Compare commits
8 Commits
ab45b130b1
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
68a5cefd46 | ||
|
|
51aaa130b7 | ||
|
|
71ee0d9b72 | ||
|
|
b87ac53dc8 | ||
|
|
6011c7ba4b | ||
|
|
3e37ef14e4 | ||
|
|
b11250262c | ||
|
|
b137f68801 |
31
.idea/cake_config_setting_v0_6.xml
generated
31
.idea/cake_config_setting_v0_6.xml
generated
@@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="CakeStormCakeSettings">
|
||||
<option name="cakeVersionAbsorption">
|
||||
<map>
|
||||
<entry key="Controller" value="/controllers/" />
|
||||
<entry key="View" value="/views/" />
|
||||
<entry key="Model" value="/models/" />
|
||||
<entry key="Helper" value="/views/helpers/" />
|
||||
<entry key="Component" value="/controllers/components/" />
|
||||
<entry key="Behavior" value="/models/behaviors/" />
|
||||
<entry key="Plugin" value="plugins/" />
|
||||
<entry key="Shell" value="/vendors/shell" />
|
||||
<entry key="Task" value="/vendors/Shell/Task" />
|
||||
<entry key="ControllerTest" value="/tests/cases/controllers/" />
|
||||
<entry key="ModelTest" value="/tests/cases/models/" />
|
||||
<entry key="BehaviorTest" value="/tests/cases/behaviors/" />
|
||||
<entry key="ComponentTest" value="/tests/cases/components/" />
|
||||
<entry key="HelperTest" value="/tests/cases/helpers/" />
|
||||
<entry key="TestFile" value="test" />
|
||||
<entry key="FileSeparator" value="." />
|
||||
<entry key="FileWordSeparator" value="_" />
|
||||
<entry key="Fixture" value="/tests/fixtures/" />
|
||||
<entry key="Element" value="elements/" />
|
||||
<entry key="FixtureFile" value="fixture" />
|
||||
<entry key="Layout" value="layouts/" />
|
||||
</map>
|
||||
</option>
|
||||
<option name="cakeVersion" value="1" />
|
||||
</component>
|
||||
</project>
|
||||
2
.idea/modules.xml
generated
2
.idea/modules.xml
generated
@@ -2,7 +2,7 @@
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/x-editable.iml" filepath="$PROJECT_DIR$/.idea/x-editable.iml" />
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/x-editable-bs5.iml" filepath="$PROJECT_DIR$/.idea/x-editable-bs5.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
2
.idea/vcs.xml
generated
2
.idea/vcs.xml
generated
@@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -53,7 +53,7 @@ function getFiles() {
|
||||
form: [forms+'editable-form-bootstrap5.js'],
|
||||
container: [containers+'editable-popover5.js'],
|
||||
inputs: [
|
||||
// Bootstrap-datepicker now loaded from npm, not bundled
|
||||
inputs+'date/bootstrap-datepicker/js/bootstrap-datepicker.js',
|
||||
inputs+'date/date.js',
|
||||
inputs+'date/datefield.js',
|
||||
inputs+'datetime/datetime.js',
|
||||
@@ -64,7 +64,7 @@ function getFiles() {
|
||||
//inputs+'typeahead.js'
|
||||
],
|
||||
css: [
|
||||
// Bootstrap-datepicker CSS now loaded from npm, not bundled
|
||||
inputs+'date/bootstrap-datepicker/css/datepicker.css'
|
||||
//don't build datetime lib, should be included manually
|
||||
//inputs+'datetime/bootstrap-datetimepicker/css/datetimepicker.css'
|
||||
]
|
||||
@@ -268,7 +268,8 @@ module.exports = function(grunt) {
|
||||
evil: false,
|
||||
globals: {
|
||||
jQuery: true,
|
||||
console: true
|
||||
console: true,
|
||||
bootstrap: true
|
||||
},
|
||||
},
|
||||
js: [ 'Gruntfile.js',
|
||||
|
||||
92
README-select2-upgrade.md
Normal file
92
README-select2-upgrade.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# Select2 Modernization
|
||||
|
||||
This fork has been updated to work with **Select2 v4.x** instead of the bundled v3.4.4 from 2013.
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
### Select2 Dependency
|
||||
Select2 is now a **peer dependency** and must be installed separately:
|
||||
|
||||
```bash
|
||||
npm install select2@^4.0.0
|
||||
```
|
||||
|
||||
### Include Select2 in Your HTML
|
||||
You must now include Select2 yourself:
|
||||
|
||||
```html
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css">
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
```
|
||||
|
||||
For Bootstrap 5 styling, also include:
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
## API Changes
|
||||
|
||||
### Event Handling
|
||||
Select2 v4.x uses different event names:
|
||||
- `select2:select` instead of `select2-loaded`
|
||||
- `select2:unselect` for deselection
|
||||
|
||||
### AJAX Configuration
|
||||
For remote data sources, use the new v4.x format:
|
||||
|
||||
```javascript
|
||||
$('#element').editable({
|
||||
select2: {
|
||||
ajax: {
|
||||
url: '/api/data',
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Template Functions
|
||||
Use `templateResult` and `templateSelection` instead of `formatResult` and `formatSelection`:
|
||||
|
||||
```javascript
|
||||
select2: {
|
||||
templateResult: function(item) {
|
||||
return item.text;
|
||||
},
|
||||
templateSelection: function(item) {
|
||||
return item.text;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Migration Guide
|
||||
|
||||
1. **Install Select2 v4.x** as a peer dependency
|
||||
2. **Include Select2 CSS/JS** in your HTML before x-editable
|
||||
3. **Update AJAX configurations** to use v4.x format
|
||||
4. **Update template functions** to use new naming
|
||||
5. **Test thoroughly** - Select2 v4.x has different behavior
|
||||
|
||||
## Debug Mode
|
||||
|
||||
The updated code includes console logging for debugging. Check browser console for:
|
||||
- `[Select2 Debug] value2input called with: ...`
|
||||
- `[Select2 Debug] Item selected: ...`
|
||||
- `[Select2 Debug] Change event triggered: ...`
|
||||
2
dist/app.js
vendored
2
dist/app.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
.editableform {
|
||||
@@ -156,20 +156,6 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
445
dist/bootstrap-editable/js/bootstrap-editable.js
vendored
445
dist/bootstrap-editable/js/bootstrap-editable.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
/**
|
||||
@@ -1503,10 +1503,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.input = $.fn.editableutils.createInput(this.options);
|
||||
if(!this.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the editable's type from the input's type
|
||||
this.type = this.input.type;
|
||||
}
|
||||
|
||||
//set value from settings or by element's text
|
||||
if (this.options.value === undefined || this.options.value === null) {
|
||||
@@ -1543,16 +1540,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
//stop propagation to prevent interference with other click handlers
|
||||
e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
//when toggle='click' we should not close all other containers as they will be closed automatically in document click listener
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
//always close other containers when opening a new one
|
||||
this.toggle(true);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
@@ -3604,23 +3600,20 @@ Time
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
|
||||
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/select2/select2.
|
||||
Please see [Select2 docs](https://select2.org/) for detailed description and options.
|
||||
|
||||
You should manually download and include select2 distributive:
|
||||
You should manually download and include Select2 v4.x distributive:
|
||||
|
||||
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="select2/select2.js"></script>
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
|
||||
To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
|
||||
To make it **bootstrap-styled** you can use css from [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme):
|
||||
|
||||
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
|
||||
You need initially put both `data-value` and element's text youself:
|
||||
|
||||
<a href="#" data-type="select2" data-value="1">Text1</a>
|
||||
<link href="select2-bootstrap-5-theme.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** This version requires Select2 v4.x. For remote sources, you may need to provide custom
|
||||
`templateResult` and `templateSelection` functions.
|
||||
|
||||
@class select2
|
||||
@extends abstractinput
|
||||
@@ -3649,36 +3642,40 @@ $(function(){
|
||||
minimumInputLength: 1
|
||||
}
|
||||
});
|
||||
//remote source (advanced)
|
||||
//remote source (advanced) - Select2 v4.x format
|
||||
$('#country').editable({
|
||||
select2: {
|
||||
placeholder: 'Select Country',
|
||||
allowClear: true,
|
||||
minimumInputLength: 3,
|
||||
id: function (item) {
|
||||
return item.CountryId;
|
||||
},
|
||||
ajax: {
|
||||
url: '/getCountries',
|
||||
dataType: 'json',
|
||||
data: function (term, page) {
|
||||
return { query: term };
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
results: function (data, page) {
|
||||
return { results: data };
|
||||
}
|
||||
processResults: function (data, params) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.CountryId,
|
||||
text: item.CountryName
|
||||
};
|
||||
})
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
formatResult: function (item) {
|
||||
return item.CountryName;
|
||||
templateResult: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
},
|
||||
formatSelection: function (item) {
|
||||
return item.CountryName;
|
||||
},
|
||||
initSelection: function (element, callback) {
|
||||
return $.get('/getCountryById', { query: element.val() }, function (data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
templateSelection: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -3709,12 +3706,19 @@ $(function(){
|
||||
|
||||
if (typeof source === 'string') {
|
||||
options.select2.ajax = options.select2.ajax || {};
|
||||
//some default ajax params
|
||||
//default ajax params for Select2 v4.x
|
||||
if(!options.select2.ajax.data) {
|
||||
options.select2.ajax.data = function(term) {return { query:term };};
|
||||
options.select2.ajax.data = function(params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
};
|
||||
}
|
||||
if(!options.select2.ajax.results) {
|
||||
options.select2.ajax.results = function(data) { return {results:data };};
|
||||
if(!options.select2.ajax.processResults) {
|
||||
options.select2.ajax.processResults = function(data) {
|
||||
return {results: data };
|
||||
};
|
||||
}
|
||||
options.select2.ajax.url = source;
|
||||
} else {
|
||||
@@ -3731,16 +3735,8 @@ $(function(){
|
||||
this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
|
||||
this.isRemote = ('ajax' in this.options.select2);
|
||||
|
||||
//store function returning ID of item
|
||||
//should be here as used inautotext for local source
|
||||
this.idFunc = this.options.select2.id;
|
||||
if (typeof(this.idFunc) !== "function") {
|
||||
var idKey = this.idFunc || 'id';
|
||||
this.idFunc = function (e) { return e[idKey]; };
|
||||
}
|
||||
|
||||
//store function that renders text in select2
|
||||
this.formatSelection = this.options.select2.formatSelection;
|
||||
this.formatSelection = this.options.select2.templateSelection;
|
||||
if (typeof(this.formatSelection) !== "function") {
|
||||
this.formatSelection = function (e) { return e.text; };
|
||||
}
|
||||
@@ -3751,20 +3747,8 @@ $(function(){
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.setClass();
|
||||
|
||||
//can not apply select2 here as it calls initSelection
|
||||
//over input that does not have correct value yet.
|
||||
//apply select2 only in value2input
|
||||
//this.$input.select2(this.options.select2);
|
||||
|
||||
//when data is loaded via ajax, we need to know when it's done to populate listData
|
||||
if(this.isRemote) {
|
||||
//listen to loaded event to populate data
|
||||
this.$input.on('select2-loaded', $.proxy(function(e) {
|
||||
this.sourceData = e.items.results;
|
||||
}, this));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//trigger resize of editableform to re-position container in multi-valued mode
|
||||
if(this.isMultiple) {
|
||||
this.$input.on('change', function() {
|
||||
@@ -3773,15 +3757,33 @@ $(function(){
|
||||
}
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
var self = this;
|
||||
var submitting = false;
|
||||
|
||||
// Use Select2 v4.x events for autosubmit - avoid double submissions
|
||||
this.$input.on('select2:select select2:unselect', $.proxy(function(e){
|
||||
if (!submitting) {
|
||||
submitting = true;
|
||||
setTimeout(function() {
|
||||
$(self.$input).closest('form').submit();
|
||||
submitting = false;
|
||||
}, 100);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = '', data,
|
||||
that = this;
|
||||
|
||||
if(this.options.select2.tags) { //in tags mode just assign value
|
||||
// Use stored selected data if available (for visual display after selection)
|
||||
if(this.selectedData && this.selectedData.length > 0) {
|
||||
data = this.selectedData;
|
||||
} else if(this.options.select2.tags) { //in tags mode just assign value
|
||||
data = value;
|
||||
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
|
||||
} else if(this.sourceData) {
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, function(e) { return e.id; });
|
||||
} else {
|
||||
//can not get list of possible values
|
||||
//(e.g. autotext for select2 with ajax source)
|
||||
@@ -3800,7 +3802,6 @@ $(function(){
|
||||
|
||||
text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
|
||||
|
||||
//$(element).text(text);
|
||||
Constructor.superclass.value2html.call(this, text, element);
|
||||
},
|
||||
|
||||
@@ -3809,46 +3810,97 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
|
||||
// if value array => join it anyway
|
||||
if(Array.isArray(value)) {
|
||||
value = value.join(this.getSeparator());
|
||||
}
|
||||
|
||||
//for remote source just set value, text is updated by initSelection
|
||||
// For remote sources with existing value, create option element before Select2 init
|
||||
if(this.isRemote && !this.isMultiple && value) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var text = $el.text();
|
||||
var $option = new Option(text, value, true, true);
|
||||
this.$input.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
//initialize select2 if not already done
|
||||
if(!this.$input.data('select2')) {
|
||||
this.$input.val(value);
|
||||
this.$input.select2(this.options.select2);
|
||||
} else {
|
||||
//second argument needed to separate initial change from user's click (for autosubmit)
|
||||
this.$input.val(value).trigger('change', true);
|
||||
|
||||
//Uncaught Error: cannot call val() if initSelection() is not defined
|
||||
//this.$input.select2('val', value);
|
||||
}
|
||||
|
||||
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
|
||||
// we should somehow get text for provided id.
|
||||
// The solution is to use element's text as text for that id (exclude empty)
|
||||
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
|
||||
// customId and customText are methods to extract `id` and `text` from data object
|
||||
// we can use this workaround only if user did not define these methods
|
||||
// otherwise we cant construct data object
|
||||
var customId = this.options.select2.id,
|
||||
customText = this.options.select2.formatSelection;
|
||||
|
||||
if(!customId && !customText) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var data = {id: value, text: $el.text()};
|
||||
this.$input.select2('data', data);
|
||||
|
||||
// Set up minimal event handling AFTER initialization
|
||||
this.$input.on('select2:select', $.proxy(function(e) {
|
||||
|
||||
if (e.params && e.params.data) {
|
||||
var selectedData = e.params.data;
|
||||
this.selectedData = [selectedData];
|
||||
|
||||
// Fix Select2's visual display by ensuring the option exists and is selected
|
||||
var $existingOption = this.$input.find('option[value="' + selectedData.id + '"]');
|
||||
if ($existingOption.length === 0) {
|
||||
// Create the option if it doesn't exist
|
||||
var $option = $('<option></option>')
|
||||
.attr('value', selectedData.id)
|
||||
.text(selectedData.text)
|
||||
.prop('selected', true);
|
||||
this.$input.append($option);
|
||||
} else {
|
||||
// Make sure existing option is selected
|
||||
$existingOption.prop('selected', true);
|
||||
}
|
||||
|
||||
// Force Select2 to update its display
|
||||
this.$input.trigger('change.select2');
|
||||
|
||||
// Mark that a selection was just made (for blur handling)
|
||||
this._justSelected = true;
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.$input.on('select2:unselect', $.proxy(function(e) {
|
||||
this.selectedData = [];
|
||||
}, this));
|
||||
|
||||
// Ensure Select2 doesn't interfere with x-editable's document click handling
|
||||
// by making sure clicks on Select2 elements don't stop propagation
|
||||
this.$input.on('select2:open', $.proxy(function(e) {
|
||||
// Find the Select2 dropdown container and ensure it allows document clicks to propagate
|
||||
setTimeout(function() {
|
||||
$('.select2-container--open .select2-dropdown').off('click.editable-prevent-close');
|
||||
$('.select2-container--open .select2-results').off('click.editable-prevent-close');
|
||||
}, 10);
|
||||
}, this));
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
//update value on existing select2
|
||||
this.$input.val(value).trigger('change.select2');
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
return this.$input.select2('val');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var val = this.$input.val();
|
||||
|
||||
// --- Handle Bootstrap Datepicker ---
|
||||
var dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
val = dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// --- Handle Select2 v4.x ---
|
||||
if (this.$input.data('select2')) {
|
||||
var selectedData = this.$input.select2('data');
|
||||
if (selectedData && selectedData.length > 0) {
|
||||
val = this.isMultiple ? selectedData.map(function(item) { return item.id; }) : selectedData[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
|
||||
str2value: function(str, separator) {
|
||||
if(typeof str !== 'string' || !this.isMultiple) {
|
||||
@@ -3870,16 +3922,10 @@ $(function(){
|
||||
return val;
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
this.$input.on('change', function(e, isInitial){
|
||||
if(!isInitial) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeparator: function() {
|
||||
return this.options.select2.separator || $.fn.select2.defaults.separator;
|
||||
// Select2 v4.x uses different separator handling
|
||||
return this.options.select2.separator || ',';
|
||||
},
|
||||
|
||||
/*
|
||||
@@ -3915,7 +3961,7 @@ $(function(){
|
||||
**/
|
||||
tpl:'<input type="hidden">',
|
||||
/**
|
||||
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
|
||||
Configuration of select2. [Full list of options](https://select2.org/configuration).
|
||||
|
||||
@property select2
|
||||
@type object
|
||||
@@ -3953,7 +3999,6 @@ $(function(){
|
||||
$.fn.editabletypes.select2 = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
* Combodate - 1.0.5
|
||||
* Dropdown date and time picker.
|
||||
@@ -4890,29 +4935,27 @@ $(function(){
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
|
||||
var Date = function (options) {
|
||||
this.init('date', options, Date.defaults);
|
||||
this.initPicker(options, Date.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'date';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
|
||||
|
||||
$.extend(Date.prototype, {
|
||||
prerender: function() {
|
||||
// Call parent prerender
|
||||
Date.superclass.prerender.call(this);
|
||||
},
|
||||
|
||||
initPicker: function(options, defaults) {
|
||||
// Initialize bootstrap-datepicker reference
|
||||
if (!$.fn.bdatepicker) {
|
||||
if ($.fn.datepicker) {
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
} else {
|
||||
throw new Error('bootstrap-datepicker not found. Please include bootstrap-datepicker before x-editable.');
|
||||
}
|
||||
}
|
||||
|
||||
//'format' is set directly from settings or data-* attributes
|
||||
|
||||
//by default viewformat equals to format
|
||||
@@ -4932,8 +4975,8 @@ $(function(){
|
||||
//language
|
||||
this.options.datepicker.language = this.options.datepicker.language || 'en';
|
||||
|
||||
//store DPglobal - use datepicker instead of bdatepicker
|
||||
this.dpg = $.fn.datepicker.DPGlobal;
|
||||
//store DPglobal
|
||||
this.dpg = $.fn.bdatepicker.DPGlobal;
|
||||
|
||||
//store parsed formats
|
||||
this.parsedFormat = this.dpg.parseFormat(this.options.format);
|
||||
@@ -4941,22 +4984,7 @@ $(function(){
|
||||
},
|
||||
|
||||
render: function () {
|
||||
// Ensure we have an input element
|
||||
if (!this.$input || !this.$input.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize datepicker immediately
|
||||
try {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
|
||||
// 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
|
||||
}
|
||||
this.$input.bdatepicker(this.options.datepicker);
|
||||
|
||||
//"clear" link
|
||||
if(this.options.clear) {
|
||||
@@ -4969,19 +4997,41 @@ $(function(){
|
||||
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
Date.superclass.value2html.call(this, text, element);
|
||||
let text = '';
|
||||
|
||||
if (value) {
|
||||
if (typeof value === 'string') {
|
||||
text = value;
|
||||
} else if (value instanceof Date && typeof value.getUTCDate === 'function') {
|
||||
text = this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
}
|
||||
}
|
||||
|
||||
// direct fallback: set text without using editableutils
|
||||
if (element) {
|
||||
element.textContent = text;
|
||||
}
|
||||
},
|
||||
|
||||
html2value: function(html) {
|
||||
return this.parseDate(html, this.parsedViewFormat);
|
||||
},
|
||||
},
|
||||
|
||||
value2str: function(value) {
|
||||
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
|
||||
},
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// If value is already a string (like "2025-11-27"), just return it.
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
|
||||
// Otherwise, assume it's a Date object and format it.
|
||||
return this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
},
|
||||
|
||||
str2value: function(str) {
|
||||
return this.parseDate(str, this.parsedFormat);
|
||||
@@ -4992,43 +5042,16 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
// Ensure datepicker is initialized before trying to update
|
||||
if (!this.$input.data('datepicker')) {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
}
|
||||
|
||||
this.$input.datepicker('update', value);
|
||||
this.$input.bdatepicker('update', value);
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var datepicker = this.$input.data('datepicker');
|
||||
|
||||
if (datepicker) {
|
||||
if (datepicker.date) {
|
||||
return datepicker.date;
|
||||
}
|
||||
|
||||
// Try getting date from dates array
|
||||
if (datepicker.dates && datepicker.dates.length > 0) {
|
||||
return datepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try using getDate method
|
||||
if (typeof datepicker.getDate === 'function') {
|
||||
var dateFromMethod = datepicker.getDate();
|
||||
return dateFromMethod;
|
||||
}
|
||||
input2value: function() {
|
||||
const dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
return dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// Fallback: try to parse the input value directly
|
||||
var inputVal = this.$input.val();
|
||||
if (inputVal) {
|
||||
var parsedDate = this.parseDate(inputVal, this.parsedViewFormat);
|
||||
return parsedDate;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
return this.$input.val();
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
},
|
||||
@@ -5162,9 +5185,6 @@ Automatically shown in inline mode.
|
||||
var DateField = function (options) {
|
||||
this.init('datefield', options, DateField.defaults);
|
||||
this.initPicker(options, DateField.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'datefield';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
|
||||
@@ -5175,8 +5195,8 @@ Automatically shown in inline mode.
|
||||
this.setClass();
|
||||
this.setAttr('placeholder');
|
||||
|
||||
//use datepicker instead of bdatepicker
|
||||
this.$tpl.datepicker(this.options.datepicker);
|
||||
//bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)
|
||||
this.$tpl.bdatepicker(this.options.datepicker);
|
||||
|
||||
//need to disable original event handlers
|
||||
this.$input.off('focus keydown');
|
||||
@@ -5184,48 +5204,17 @@ Automatically shown in inline mode.
|
||||
//update value of datepicker
|
||||
this.$input.keyup($.proxy(function(){
|
||||
this.$tpl.removeData('date');
|
||||
this.$tpl.datepicker('update');
|
||||
this.$tpl.bdatepicker('update');
|
||||
}, this));
|
||||
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
var formattedValue = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
this.$input.val(formattedValue);
|
||||
this.$tpl.datepicker('update');
|
||||
this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
|
||||
this.$tpl.bdatepicker('update');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
// First try the container datepicker (ideal case)
|
||||
var containerDatepicker = this.$tpl.data('datepicker');
|
||||
|
||||
if (containerDatepicker && containerDatepicker.dates && containerDatepicker.dates.length > 0) {
|
||||
return containerDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Fallback: try the input datepicker (in case manual init worked)
|
||||
var inputDatepicker = this.$input.data('datepicker');
|
||||
|
||||
if (inputDatepicker && inputDatepicker.dates && inputDatepicker.dates.length > 0) {
|
||||
return inputDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try getDate methods
|
||||
if (containerDatepicker && typeof containerDatepicker.getDate === 'function') {
|
||||
var containerDate = containerDatepicker.getDate();
|
||||
if (containerDate) {
|
||||
return containerDate;
|
||||
}
|
||||
}
|
||||
|
||||
if (inputDatepicker && typeof inputDatepicker.getDate === 'function') {
|
||||
var inputDate = inputDatepicker.getDate();
|
||||
if (inputDate) {
|
||||
return inputDate;
|
||||
}
|
||||
}
|
||||
|
||||
// Final fallback to text parsing
|
||||
return this.html2value(this.$input.val());
|
||||
},
|
||||
|
||||
@@ -5242,21 +5231,19 @@ Automatically shown in inline mode.
|
||||
/**
|
||||
@property tpl
|
||||
**/
|
||||
tpl:'<div class="input-group input-group-sm date datepicker-above" style="width: 200px; border: 1px solid #dee2e6; border-radius: 0.375rem; position: relative;"><input type="text" class="form-control form-control-sm" style="border: none;"/><span class="input-group-text" style="border: none; background: transparent;"><i class="bi bi-calendar"></i></span></div>',
|
||||
tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
|
||||
/**
|
||||
@property inputclass
|
||||
@default 'form-control form-control-sm'
|
||||
@default 'input-small'
|
||||
**/
|
||||
inputclass: 'form-control form-control-sm',
|
||||
inputclass: 'input-small',
|
||||
|
||||
/* datepicker config */
|
||||
datepicker: {
|
||||
weekStart: 0,
|
||||
startView: 0,
|
||||
minViewMode: 0,
|
||||
autoclose: true,
|
||||
orientation: 'top',
|
||||
container: 'body'
|
||||
autoclose: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
.editableform {
|
||||
@@ -156,20 +156,6 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
445
dist/bootstrap3-editable/js/bootstrap-editable.js
vendored
445
dist/bootstrap3-editable/js/bootstrap-editable.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
/**
|
||||
@@ -1503,10 +1503,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.input = $.fn.editableutils.createInput(this.options);
|
||||
if(!this.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the editable's type from the input's type
|
||||
this.type = this.input.type;
|
||||
}
|
||||
|
||||
//set value from settings or by element's text
|
||||
if (this.options.value === undefined || this.options.value === null) {
|
||||
@@ -1543,16 +1540,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
//stop propagation to prevent interference with other click handlers
|
||||
e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
//when toggle='click' we should not close all other containers as they will be closed automatically in document click listener
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
//always close other containers when opening a new one
|
||||
this.toggle(true);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
@@ -3604,23 +3600,20 @@ Time
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
|
||||
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/select2/select2.
|
||||
Please see [Select2 docs](https://select2.org/) for detailed description and options.
|
||||
|
||||
You should manually download and include select2 distributive:
|
||||
You should manually download and include Select2 v4.x distributive:
|
||||
|
||||
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="select2/select2.js"></script>
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
|
||||
To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
|
||||
To make it **bootstrap-styled** you can use css from [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme):
|
||||
|
||||
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
|
||||
You need initially put both `data-value` and element's text youself:
|
||||
|
||||
<a href="#" data-type="select2" data-value="1">Text1</a>
|
||||
<link href="select2-bootstrap-5-theme.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** This version requires Select2 v4.x. For remote sources, you may need to provide custom
|
||||
`templateResult` and `templateSelection` functions.
|
||||
|
||||
@class select2
|
||||
@extends abstractinput
|
||||
@@ -3649,36 +3642,40 @@ $(function(){
|
||||
minimumInputLength: 1
|
||||
}
|
||||
});
|
||||
//remote source (advanced)
|
||||
//remote source (advanced) - Select2 v4.x format
|
||||
$('#country').editable({
|
||||
select2: {
|
||||
placeholder: 'Select Country',
|
||||
allowClear: true,
|
||||
minimumInputLength: 3,
|
||||
id: function (item) {
|
||||
return item.CountryId;
|
||||
},
|
||||
ajax: {
|
||||
url: '/getCountries',
|
||||
dataType: 'json',
|
||||
data: function (term, page) {
|
||||
return { query: term };
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
results: function (data, page) {
|
||||
return { results: data };
|
||||
}
|
||||
processResults: function (data, params) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.CountryId,
|
||||
text: item.CountryName
|
||||
};
|
||||
})
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
formatResult: function (item) {
|
||||
return item.CountryName;
|
||||
templateResult: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
},
|
||||
formatSelection: function (item) {
|
||||
return item.CountryName;
|
||||
},
|
||||
initSelection: function (element, callback) {
|
||||
return $.get('/getCountryById', { query: element.val() }, function (data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
templateSelection: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -3709,12 +3706,19 @@ $(function(){
|
||||
|
||||
if (typeof source === 'string') {
|
||||
options.select2.ajax = options.select2.ajax || {};
|
||||
//some default ajax params
|
||||
//default ajax params for Select2 v4.x
|
||||
if(!options.select2.ajax.data) {
|
||||
options.select2.ajax.data = function(term) {return { query:term };};
|
||||
options.select2.ajax.data = function(params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
};
|
||||
}
|
||||
if(!options.select2.ajax.results) {
|
||||
options.select2.ajax.results = function(data) { return {results:data };};
|
||||
if(!options.select2.ajax.processResults) {
|
||||
options.select2.ajax.processResults = function(data) {
|
||||
return {results: data };
|
||||
};
|
||||
}
|
||||
options.select2.ajax.url = source;
|
||||
} else {
|
||||
@@ -3731,16 +3735,8 @@ $(function(){
|
||||
this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
|
||||
this.isRemote = ('ajax' in this.options.select2);
|
||||
|
||||
//store function returning ID of item
|
||||
//should be here as used inautotext for local source
|
||||
this.idFunc = this.options.select2.id;
|
||||
if (typeof(this.idFunc) !== "function") {
|
||||
var idKey = this.idFunc || 'id';
|
||||
this.idFunc = function (e) { return e[idKey]; };
|
||||
}
|
||||
|
||||
//store function that renders text in select2
|
||||
this.formatSelection = this.options.select2.formatSelection;
|
||||
this.formatSelection = this.options.select2.templateSelection;
|
||||
if (typeof(this.formatSelection) !== "function") {
|
||||
this.formatSelection = function (e) { return e.text; };
|
||||
}
|
||||
@@ -3751,20 +3747,8 @@ $(function(){
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.setClass();
|
||||
|
||||
//can not apply select2 here as it calls initSelection
|
||||
//over input that does not have correct value yet.
|
||||
//apply select2 only in value2input
|
||||
//this.$input.select2(this.options.select2);
|
||||
|
||||
//when data is loaded via ajax, we need to know when it's done to populate listData
|
||||
if(this.isRemote) {
|
||||
//listen to loaded event to populate data
|
||||
this.$input.on('select2-loaded', $.proxy(function(e) {
|
||||
this.sourceData = e.items.results;
|
||||
}, this));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//trigger resize of editableform to re-position container in multi-valued mode
|
||||
if(this.isMultiple) {
|
||||
this.$input.on('change', function() {
|
||||
@@ -3773,15 +3757,33 @@ $(function(){
|
||||
}
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
var self = this;
|
||||
var submitting = false;
|
||||
|
||||
// Use Select2 v4.x events for autosubmit - avoid double submissions
|
||||
this.$input.on('select2:select select2:unselect', $.proxy(function(e){
|
||||
if (!submitting) {
|
||||
submitting = true;
|
||||
setTimeout(function() {
|
||||
$(self.$input).closest('form').submit();
|
||||
submitting = false;
|
||||
}, 100);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = '', data,
|
||||
that = this;
|
||||
|
||||
if(this.options.select2.tags) { //in tags mode just assign value
|
||||
// Use stored selected data if available (for visual display after selection)
|
||||
if(this.selectedData && this.selectedData.length > 0) {
|
||||
data = this.selectedData;
|
||||
} else if(this.options.select2.tags) { //in tags mode just assign value
|
||||
data = value;
|
||||
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
|
||||
} else if(this.sourceData) {
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, function(e) { return e.id; });
|
||||
} else {
|
||||
//can not get list of possible values
|
||||
//(e.g. autotext for select2 with ajax source)
|
||||
@@ -3800,7 +3802,6 @@ $(function(){
|
||||
|
||||
text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
|
||||
|
||||
//$(element).text(text);
|
||||
Constructor.superclass.value2html.call(this, text, element);
|
||||
},
|
||||
|
||||
@@ -3809,46 +3810,97 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
|
||||
// if value array => join it anyway
|
||||
if(Array.isArray(value)) {
|
||||
value = value.join(this.getSeparator());
|
||||
}
|
||||
|
||||
//for remote source just set value, text is updated by initSelection
|
||||
// For remote sources with existing value, create option element before Select2 init
|
||||
if(this.isRemote && !this.isMultiple && value) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var text = $el.text();
|
||||
var $option = new Option(text, value, true, true);
|
||||
this.$input.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
//initialize select2 if not already done
|
||||
if(!this.$input.data('select2')) {
|
||||
this.$input.val(value);
|
||||
this.$input.select2(this.options.select2);
|
||||
} else {
|
||||
//second argument needed to separate initial change from user's click (for autosubmit)
|
||||
this.$input.val(value).trigger('change', true);
|
||||
|
||||
//Uncaught Error: cannot call val() if initSelection() is not defined
|
||||
//this.$input.select2('val', value);
|
||||
}
|
||||
|
||||
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
|
||||
// we should somehow get text for provided id.
|
||||
// The solution is to use element's text as text for that id (exclude empty)
|
||||
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
|
||||
// customId and customText are methods to extract `id` and `text` from data object
|
||||
// we can use this workaround only if user did not define these methods
|
||||
// otherwise we cant construct data object
|
||||
var customId = this.options.select2.id,
|
||||
customText = this.options.select2.formatSelection;
|
||||
|
||||
if(!customId && !customText) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var data = {id: value, text: $el.text()};
|
||||
this.$input.select2('data', data);
|
||||
|
||||
// Set up minimal event handling AFTER initialization
|
||||
this.$input.on('select2:select', $.proxy(function(e) {
|
||||
|
||||
if (e.params && e.params.data) {
|
||||
var selectedData = e.params.data;
|
||||
this.selectedData = [selectedData];
|
||||
|
||||
// Fix Select2's visual display by ensuring the option exists and is selected
|
||||
var $existingOption = this.$input.find('option[value="' + selectedData.id + '"]');
|
||||
if ($existingOption.length === 0) {
|
||||
// Create the option if it doesn't exist
|
||||
var $option = $('<option></option>')
|
||||
.attr('value', selectedData.id)
|
||||
.text(selectedData.text)
|
||||
.prop('selected', true);
|
||||
this.$input.append($option);
|
||||
} else {
|
||||
// Make sure existing option is selected
|
||||
$existingOption.prop('selected', true);
|
||||
}
|
||||
|
||||
// Force Select2 to update its display
|
||||
this.$input.trigger('change.select2');
|
||||
|
||||
// Mark that a selection was just made (for blur handling)
|
||||
this._justSelected = true;
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.$input.on('select2:unselect', $.proxy(function(e) {
|
||||
this.selectedData = [];
|
||||
}, this));
|
||||
|
||||
// Ensure Select2 doesn't interfere with x-editable's document click handling
|
||||
// by making sure clicks on Select2 elements don't stop propagation
|
||||
this.$input.on('select2:open', $.proxy(function(e) {
|
||||
// Find the Select2 dropdown container and ensure it allows document clicks to propagate
|
||||
setTimeout(function() {
|
||||
$('.select2-container--open .select2-dropdown').off('click.editable-prevent-close');
|
||||
$('.select2-container--open .select2-results').off('click.editable-prevent-close');
|
||||
}, 10);
|
||||
}, this));
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
//update value on existing select2
|
||||
this.$input.val(value).trigger('change.select2');
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
return this.$input.select2('val');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var val = this.$input.val();
|
||||
|
||||
// --- Handle Bootstrap Datepicker ---
|
||||
var dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
val = dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// --- Handle Select2 v4.x ---
|
||||
if (this.$input.data('select2')) {
|
||||
var selectedData = this.$input.select2('data');
|
||||
if (selectedData && selectedData.length > 0) {
|
||||
val = this.isMultiple ? selectedData.map(function(item) { return item.id; }) : selectedData[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
|
||||
str2value: function(str, separator) {
|
||||
if(typeof str !== 'string' || !this.isMultiple) {
|
||||
@@ -3870,16 +3922,10 @@ $(function(){
|
||||
return val;
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
this.$input.on('change', function(e, isInitial){
|
||||
if(!isInitial) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeparator: function() {
|
||||
return this.options.select2.separator || $.fn.select2.defaults.separator;
|
||||
// Select2 v4.x uses different separator handling
|
||||
return this.options.select2.separator || ',';
|
||||
},
|
||||
|
||||
/*
|
||||
@@ -3915,7 +3961,7 @@ $(function(){
|
||||
**/
|
||||
tpl:'<input type="hidden">',
|
||||
/**
|
||||
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
|
||||
Configuration of select2. [Full list of options](https://select2.org/configuration).
|
||||
|
||||
@property select2
|
||||
@type object
|
||||
@@ -3953,7 +3999,6 @@ $(function(){
|
||||
$.fn.editabletypes.select2 = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
* Combodate - 1.0.5
|
||||
* Dropdown date and time picker.
|
||||
@@ -4958,29 +5003,27 @@ $(function(){
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
|
||||
var Date = function (options) {
|
||||
this.init('date', options, Date.defaults);
|
||||
this.initPicker(options, Date.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'date';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
|
||||
|
||||
$.extend(Date.prototype, {
|
||||
prerender: function() {
|
||||
// Call parent prerender
|
||||
Date.superclass.prerender.call(this);
|
||||
},
|
||||
|
||||
initPicker: function(options, defaults) {
|
||||
// Initialize bootstrap-datepicker reference
|
||||
if (!$.fn.bdatepicker) {
|
||||
if ($.fn.datepicker) {
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
} else {
|
||||
throw new Error('bootstrap-datepicker not found. Please include bootstrap-datepicker before x-editable.');
|
||||
}
|
||||
}
|
||||
|
||||
//'format' is set directly from settings or data-* attributes
|
||||
|
||||
//by default viewformat equals to format
|
||||
@@ -5000,8 +5043,8 @@ $(function(){
|
||||
//language
|
||||
this.options.datepicker.language = this.options.datepicker.language || 'en';
|
||||
|
||||
//store DPglobal - use datepicker instead of bdatepicker
|
||||
this.dpg = $.fn.datepicker.DPGlobal;
|
||||
//store DPglobal
|
||||
this.dpg = $.fn.bdatepicker.DPGlobal;
|
||||
|
||||
//store parsed formats
|
||||
this.parsedFormat = this.dpg.parseFormat(this.options.format);
|
||||
@@ -5009,22 +5052,7 @@ $(function(){
|
||||
},
|
||||
|
||||
render: function () {
|
||||
// Ensure we have an input element
|
||||
if (!this.$input || !this.$input.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize datepicker immediately
|
||||
try {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
|
||||
// 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
|
||||
}
|
||||
this.$input.bdatepicker(this.options.datepicker);
|
||||
|
||||
//"clear" link
|
||||
if(this.options.clear) {
|
||||
@@ -5037,19 +5065,41 @@ $(function(){
|
||||
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
Date.superclass.value2html.call(this, text, element);
|
||||
let text = '';
|
||||
|
||||
if (value) {
|
||||
if (typeof value === 'string') {
|
||||
text = value;
|
||||
} else if (value instanceof Date && typeof value.getUTCDate === 'function') {
|
||||
text = this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
}
|
||||
}
|
||||
|
||||
// direct fallback: set text without using editableutils
|
||||
if (element) {
|
||||
element.textContent = text;
|
||||
}
|
||||
},
|
||||
|
||||
html2value: function(html) {
|
||||
return this.parseDate(html, this.parsedViewFormat);
|
||||
},
|
||||
},
|
||||
|
||||
value2str: function(value) {
|
||||
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
|
||||
},
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// If value is already a string (like "2025-11-27"), just return it.
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
|
||||
// Otherwise, assume it's a Date object and format it.
|
||||
return this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
},
|
||||
|
||||
str2value: function(str) {
|
||||
return this.parseDate(str, this.parsedFormat);
|
||||
@@ -5060,43 +5110,16 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
// Ensure datepicker is initialized before trying to update
|
||||
if (!this.$input.data('datepicker')) {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
}
|
||||
|
||||
this.$input.datepicker('update', value);
|
||||
this.$input.bdatepicker('update', value);
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var datepicker = this.$input.data('datepicker');
|
||||
|
||||
if (datepicker) {
|
||||
if (datepicker.date) {
|
||||
return datepicker.date;
|
||||
}
|
||||
|
||||
// Try getting date from dates array
|
||||
if (datepicker.dates && datepicker.dates.length > 0) {
|
||||
return datepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try using getDate method
|
||||
if (typeof datepicker.getDate === 'function') {
|
||||
var dateFromMethod = datepicker.getDate();
|
||||
return dateFromMethod;
|
||||
}
|
||||
input2value: function() {
|
||||
const dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
return dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// Fallback: try to parse the input value directly
|
||||
var inputVal = this.$input.val();
|
||||
if (inputVal) {
|
||||
var parsedDate = this.parseDate(inputVal, this.parsedViewFormat);
|
||||
return parsedDate;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
return this.$input.val();
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
},
|
||||
@@ -5230,9 +5253,6 @@ Automatically shown in inline mode.
|
||||
var DateField = function (options) {
|
||||
this.init('datefield', options, DateField.defaults);
|
||||
this.initPicker(options, DateField.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'datefield';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
|
||||
@@ -5243,8 +5263,8 @@ Automatically shown in inline mode.
|
||||
this.setClass();
|
||||
this.setAttr('placeholder');
|
||||
|
||||
//use datepicker instead of bdatepicker
|
||||
this.$tpl.datepicker(this.options.datepicker);
|
||||
//bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)
|
||||
this.$tpl.bdatepicker(this.options.datepicker);
|
||||
|
||||
//need to disable original event handlers
|
||||
this.$input.off('focus keydown');
|
||||
@@ -5252,48 +5272,17 @@ Automatically shown in inline mode.
|
||||
//update value of datepicker
|
||||
this.$input.keyup($.proxy(function(){
|
||||
this.$tpl.removeData('date');
|
||||
this.$tpl.datepicker('update');
|
||||
this.$tpl.bdatepicker('update');
|
||||
}, this));
|
||||
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
var formattedValue = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
this.$input.val(formattedValue);
|
||||
this.$tpl.datepicker('update');
|
||||
this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
|
||||
this.$tpl.bdatepicker('update');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
// First try the container datepicker (ideal case)
|
||||
var containerDatepicker = this.$tpl.data('datepicker');
|
||||
|
||||
if (containerDatepicker && containerDatepicker.dates && containerDatepicker.dates.length > 0) {
|
||||
return containerDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Fallback: try the input datepicker (in case manual init worked)
|
||||
var inputDatepicker = this.$input.data('datepicker');
|
||||
|
||||
if (inputDatepicker && inputDatepicker.dates && inputDatepicker.dates.length > 0) {
|
||||
return inputDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try getDate methods
|
||||
if (containerDatepicker && typeof containerDatepicker.getDate === 'function') {
|
||||
var containerDate = containerDatepicker.getDate();
|
||||
if (containerDate) {
|
||||
return containerDate;
|
||||
}
|
||||
}
|
||||
|
||||
if (inputDatepicker && typeof inputDatepicker.getDate === 'function') {
|
||||
var inputDate = inputDatepicker.getDate();
|
||||
if (inputDate) {
|
||||
return inputDate;
|
||||
}
|
||||
}
|
||||
|
||||
// Final fallback to text parsing
|
||||
return this.html2value(this.$input.val());
|
||||
},
|
||||
|
||||
@@ -5310,21 +5299,19 @@ Automatically shown in inline mode.
|
||||
/**
|
||||
@property tpl
|
||||
**/
|
||||
tpl:'<div class="input-group input-group-sm date datepicker-above" style="width: 200px; border: 1px solid #dee2e6; border-radius: 0.375rem; position: relative;"><input type="text" class="form-control form-control-sm" style="border: none;"/><span class="input-group-text" style="border: none; background: transparent;"><i class="bi bi-calendar"></i></span></div>',
|
||||
tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
|
||||
/**
|
||||
@property inputclass
|
||||
@default 'form-control form-control-sm'
|
||||
@default 'input-small'
|
||||
**/
|
||||
inputclass: 'form-control form-control-sm',
|
||||
inputclass: 'input-small',
|
||||
|
||||
/* datepicker config */
|
||||
datepicker: {
|
||||
weekStart: 0,
|
||||
startView: 0,
|
||||
minViewMode: 0,
|
||||
autoclose: true,
|
||||
orientation: 'top',
|
||||
container: 'body'
|
||||
autoclose: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
.editableform {
|
||||
@@ -156,20 +156,6 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
14
dist/bootstrap5-editable/css/editable-form.css
vendored
14
dist/bootstrap5-editable/css/editable-form.css
vendored
@@ -151,17 +151,3 @@
|
||||
.editable-pre-wrapped {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
5509
dist/bootstrap5-editable/js/bootstrap-editable.js
vendored
5509
dist/bootstrap5-editable/js/bootstrap-editable.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,15 +1,3 @@
|
||||
/*!
|
||||
* Bootstrap v5.3.3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Datepicker for Bootstrap v1.10.0 (https://github.com/uxsolutions/bootstrap-datepicker)
|
||||
*
|
||||
* Licensed under the Apache License v2.0 (https://www.apache.org/licenses/LICENSE-2.0)
|
||||
*/
|
||||
|
||||
/*!
|
||||
* jQuery JavaScript Library v3.7.1
|
||||
* https://jquery.com/
|
||||
|
||||
File diff suppressed because one or more lines are too long
18
dist/jquery-editable/css/jquery-editable.css
vendored
18
dist/jquery-editable/css/jquery-editable.css
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
.editableform {
|
||||
@@ -156,20 +156,6 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
269
dist/jquery-editable/js/jquery-editable-poshytip.js
vendored
269
dist/jquery-editable/js/jquery-editable-poshytip.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
/**
|
||||
@@ -1503,10 +1503,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.input = $.fn.editableutils.createInput(this.options);
|
||||
if(!this.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the editable's type from the input's type
|
||||
this.type = this.input.type;
|
||||
}
|
||||
|
||||
//set value from settings or by element's text
|
||||
if (this.options.value === undefined || this.options.value === null) {
|
||||
@@ -1543,16 +1540,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
//stop propagation to prevent interference with other click handlers
|
||||
e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
//when toggle='click' we should not close all other containers as they will be closed automatically in document click listener
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
//always close other containers when opening a new one
|
||||
this.toggle(true);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
@@ -3604,23 +3600,20 @@ Time
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
|
||||
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/select2/select2.
|
||||
Please see [Select2 docs](https://select2.org/) for detailed description and options.
|
||||
|
||||
You should manually download and include select2 distributive:
|
||||
You should manually download and include Select2 v4.x distributive:
|
||||
|
||||
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="select2/select2.js"></script>
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
|
||||
To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
|
||||
To make it **bootstrap-styled** you can use css from [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme):
|
||||
|
||||
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
|
||||
You need initially put both `data-value` and element's text youself:
|
||||
|
||||
<a href="#" data-type="select2" data-value="1">Text1</a>
|
||||
<link href="select2-bootstrap-5-theme.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** This version requires Select2 v4.x. For remote sources, you may need to provide custom
|
||||
`templateResult` and `templateSelection` functions.
|
||||
|
||||
@class select2
|
||||
@extends abstractinput
|
||||
@@ -3649,36 +3642,40 @@ $(function(){
|
||||
minimumInputLength: 1
|
||||
}
|
||||
});
|
||||
//remote source (advanced)
|
||||
//remote source (advanced) - Select2 v4.x format
|
||||
$('#country').editable({
|
||||
select2: {
|
||||
placeholder: 'Select Country',
|
||||
allowClear: true,
|
||||
minimumInputLength: 3,
|
||||
id: function (item) {
|
||||
return item.CountryId;
|
||||
},
|
||||
ajax: {
|
||||
url: '/getCountries',
|
||||
dataType: 'json',
|
||||
data: function (term, page) {
|
||||
return { query: term };
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
results: function (data, page) {
|
||||
return { results: data };
|
||||
}
|
||||
processResults: function (data, params) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.CountryId,
|
||||
text: item.CountryName
|
||||
};
|
||||
})
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
formatResult: function (item) {
|
||||
return item.CountryName;
|
||||
templateResult: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
},
|
||||
formatSelection: function (item) {
|
||||
return item.CountryName;
|
||||
},
|
||||
initSelection: function (element, callback) {
|
||||
return $.get('/getCountryById', { query: element.val() }, function (data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
templateSelection: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -3709,12 +3706,19 @@ $(function(){
|
||||
|
||||
if (typeof source === 'string') {
|
||||
options.select2.ajax = options.select2.ajax || {};
|
||||
//some default ajax params
|
||||
//default ajax params for Select2 v4.x
|
||||
if(!options.select2.ajax.data) {
|
||||
options.select2.ajax.data = function(term) {return { query:term };};
|
||||
options.select2.ajax.data = function(params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
};
|
||||
}
|
||||
if(!options.select2.ajax.results) {
|
||||
options.select2.ajax.results = function(data) { return {results:data };};
|
||||
if(!options.select2.ajax.processResults) {
|
||||
options.select2.ajax.processResults = function(data) {
|
||||
return {results: data };
|
||||
};
|
||||
}
|
||||
options.select2.ajax.url = source;
|
||||
} else {
|
||||
@@ -3731,16 +3735,8 @@ $(function(){
|
||||
this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
|
||||
this.isRemote = ('ajax' in this.options.select2);
|
||||
|
||||
//store function returning ID of item
|
||||
//should be here as used inautotext for local source
|
||||
this.idFunc = this.options.select2.id;
|
||||
if (typeof(this.idFunc) !== "function") {
|
||||
var idKey = this.idFunc || 'id';
|
||||
this.idFunc = function (e) { return e[idKey]; };
|
||||
}
|
||||
|
||||
//store function that renders text in select2
|
||||
this.formatSelection = this.options.select2.formatSelection;
|
||||
this.formatSelection = this.options.select2.templateSelection;
|
||||
if (typeof(this.formatSelection) !== "function") {
|
||||
this.formatSelection = function (e) { return e.text; };
|
||||
}
|
||||
@@ -3751,20 +3747,8 @@ $(function(){
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.setClass();
|
||||
|
||||
//can not apply select2 here as it calls initSelection
|
||||
//over input that does not have correct value yet.
|
||||
//apply select2 only in value2input
|
||||
//this.$input.select2(this.options.select2);
|
||||
|
||||
//when data is loaded via ajax, we need to know when it's done to populate listData
|
||||
if(this.isRemote) {
|
||||
//listen to loaded event to populate data
|
||||
this.$input.on('select2-loaded', $.proxy(function(e) {
|
||||
this.sourceData = e.items.results;
|
||||
}, this));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//trigger resize of editableform to re-position container in multi-valued mode
|
||||
if(this.isMultiple) {
|
||||
this.$input.on('change', function() {
|
||||
@@ -3773,15 +3757,33 @@ $(function(){
|
||||
}
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
var self = this;
|
||||
var submitting = false;
|
||||
|
||||
// Use Select2 v4.x events for autosubmit - avoid double submissions
|
||||
this.$input.on('select2:select select2:unselect', $.proxy(function(e){
|
||||
if (!submitting) {
|
||||
submitting = true;
|
||||
setTimeout(function() {
|
||||
$(self.$input).closest('form').submit();
|
||||
submitting = false;
|
||||
}, 100);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = '', data,
|
||||
that = this;
|
||||
|
||||
if(this.options.select2.tags) { //in tags mode just assign value
|
||||
// Use stored selected data if available (for visual display after selection)
|
||||
if(this.selectedData && this.selectedData.length > 0) {
|
||||
data = this.selectedData;
|
||||
} else if(this.options.select2.tags) { //in tags mode just assign value
|
||||
data = value;
|
||||
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
|
||||
} else if(this.sourceData) {
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, function(e) { return e.id; });
|
||||
} else {
|
||||
//can not get list of possible values
|
||||
//(e.g. autotext for select2 with ajax source)
|
||||
@@ -3800,7 +3802,6 @@ $(function(){
|
||||
|
||||
text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
|
||||
|
||||
//$(element).text(text);
|
||||
Constructor.superclass.value2html.call(this, text, element);
|
||||
},
|
||||
|
||||
@@ -3809,46 +3810,97 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
|
||||
// if value array => join it anyway
|
||||
if(Array.isArray(value)) {
|
||||
value = value.join(this.getSeparator());
|
||||
}
|
||||
|
||||
//for remote source just set value, text is updated by initSelection
|
||||
// For remote sources with existing value, create option element before Select2 init
|
||||
if(this.isRemote && !this.isMultiple && value) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var text = $el.text();
|
||||
var $option = new Option(text, value, true, true);
|
||||
this.$input.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
//initialize select2 if not already done
|
||||
if(!this.$input.data('select2')) {
|
||||
this.$input.val(value);
|
||||
this.$input.select2(this.options.select2);
|
||||
} else {
|
||||
//second argument needed to separate initial change from user's click (for autosubmit)
|
||||
this.$input.val(value).trigger('change', true);
|
||||
|
||||
//Uncaught Error: cannot call val() if initSelection() is not defined
|
||||
//this.$input.select2('val', value);
|
||||
}
|
||||
|
||||
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
|
||||
// we should somehow get text for provided id.
|
||||
// The solution is to use element's text as text for that id (exclude empty)
|
||||
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
|
||||
// customId and customText are methods to extract `id` and `text` from data object
|
||||
// we can use this workaround only if user did not define these methods
|
||||
// otherwise we cant construct data object
|
||||
var customId = this.options.select2.id,
|
||||
customText = this.options.select2.formatSelection;
|
||||
|
||||
if(!customId && !customText) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var data = {id: value, text: $el.text()};
|
||||
this.$input.select2('data', data);
|
||||
|
||||
// Set up minimal event handling AFTER initialization
|
||||
this.$input.on('select2:select', $.proxy(function(e) {
|
||||
|
||||
if (e.params && e.params.data) {
|
||||
var selectedData = e.params.data;
|
||||
this.selectedData = [selectedData];
|
||||
|
||||
// Fix Select2's visual display by ensuring the option exists and is selected
|
||||
var $existingOption = this.$input.find('option[value="' + selectedData.id + '"]');
|
||||
if ($existingOption.length === 0) {
|
||||
// Create the option if it doesn't exist
|
||||
var $option = $('<option></option>')
|
||||
.attr('value', selectedData.id)
|
||||
.text(selectedData.text)
|
||||
.prop('selected', true);
|
||||
this.$input.append($option);
|
||||
} else {
|
||||
// Make sure existing option is selected
|
||||
$existingOption.prop('selected', true);
|
||||
}
|
||||
|
||||
// Force Select2 to update its display
|
||||
this.$input.trigger('change.select2');
|
||||
|
||||
// Mark that a selection was just made (for blur handling)
|
||||
this._justSelected = true;
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.$input.on('select2:unselect', $.proxy(function(e) {
|
||||
this.selectedData = [];
|
||||
}, this));
|
||||
|
||||
// Ensure Select2 doesn't interfere with x-editable's document click handling
|
||||
// by making sure clicks on Select2 elements don't stop propagation
|
||||
this.$input.on('select2:open', $.proxy(function(e) {
|
||||
// Find the Select2 dropdown container and ensure it allows document clicks to propagate
|
||||
setTimeout(function() {
|
||||
$('.select2-container--open .select2-dropdown').off('click.editable-prevent-close');
|
||||
$('.select2-container--open .select2-results').off('click.editable-prevent-close');
|
||||
}, 10);
|
||||
}, this));
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
//update value on existing select2
|
||||
this.$input.val(value).trigger('change.select2');
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
return this.$input.select2('val');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var val = this.$input.val();
|
||||
|
||||
// --- Handle Bootstrap Datepicker ---
|
||||
var dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
val = dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// --- Handle Select2 v4.x ---
|
||||
if (this.$input.data('select2')) {
|
||||
var selectedData = this.$input.select2('data');
|
||||
if (selectedData && selectedData.length > 0) {
|
||||
val = this.isMultiple ? selectedData.map(function(item) { return item.id; }) : selectedData[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
|
||||
str2value: function(str, separator) {
|
||||
if(typeof str !== 'string' || !this.isMultiple) {
|
||||
@@ -3870,16 +3922,10 @@ $(function(){
|
||||
return val;
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
this.$input.on('change', function(e, isInitial){
|
||||
if(!isInitial) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeparator: function() {
|
||||
return this.options.select2.separator || $.fn.select2.defaults.separator;
|
||||
// Select2 v4.x uses different separator handling
|
||||
return this.options.select2.separator || ',';
|
||||
},
|
||||
|
||||
/*
|
||||
@@ -3915,7 +3961,7 @@ $(function(){
|
||||
**/
|
||||
tpl:'<input type="hidden">',
|
||||
/**
|
||||
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
|
||||
Configuration of select2. [Full list of options](https://select2.org/configuration).
|
||||
|
||||
@property select2
|
||||
@type object
|
||||
@@ -3953,7 +3999,6 @@ $(function(){
|
||||
$.fn.editabletypes.select2 = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
* Combodate - 1.0.5
|
||||
* Dropdown date and time picker.
|
||||
|
||||
File diff suppressed because one or more lines are too long
18
dist/jqueryui-editable/css/jqueryui-editable.css
vendored
18
dist/jqueryui-editable/css/jqueryui-editable.css
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
.editableform {
|
||||
@@ -156,20 +156,6 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.editable-container.editable-popup {
|
||||
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||
}
|
||||
|
||||
269
dist/jqueryui-editable/js/jqueryui-editable.js
vendored
269
dist/jqueryui-editable/js/jqueryui-editable.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*! X-editable - v1.5.2
|
||||
* A maintained fork of x-editable for Bootstrap 5 support.
|
||||
/*! X-editable-bootstrap5 - v1.5.7
|
||||
* A fork of x-editable for Bootstrap 5 support.
|
||||
* https://git.24unix.net/tracer/x-editable
|
||||
* Copyright (c) 2025 Micha Espey; Licensed MIT */
|
||||
/**
|
||||
@@ -1503,10 +1503,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.input = $.fn.editableutils.createInput(this.options);
|
||||
if(!this.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the editable's type from the input's type
|
||||
this.type = this.input.type;
|
||||
}
|
||||
|
||||
//set value from settings or by element's text
|
||||
if (this.options.value === undefined || this.options.value === null) {
|
||||
@@ -1543,16 +1540,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
//stop propagation to prevent interference with other click handlers
|
||||
e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
//when toggle='click' we should not close all other containers as they will be closed automatically in document click listener
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
//always close other containers when opening a new one
|
||||
this.toggle(true);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
@@ -3604,23 +3600,20 @@ Time
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
|
||||
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/select2/select2.
|
||||
Please see [Select2 docs](https://select2.org/) for detailed description and options.
|
||||
|
||||
You should manually download and include select2 distributive:
|
||||
You should manually download and include Select2 v4.x distributive:
|
||||
|
||||
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="select2/select2.js"></script>
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
|
||||
To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
|
||||
To make it **bootstrap-styled** you can use css from [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme):
|
||||
|
||||
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
|
||||
You need initially put both `data-value` and element's text youself:
|
||||
|
||||
<a href="#" data-type="select2" data-value="1">Text1</a>
|
||||
<link href="select2-bootstrap-5-theme.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** This version requires Select2 v4.x. For remote sources, you may need to provide custom
|
||||
`templateResult` and `templateSelection` functions.
|
||||
|
||||
@class select2
|
||||
@extends abstractinput
|
||||
@@ -3649,36 +3642,40 @@ $(function(){
|
||||
minimumInputLength: 1
|
||||
}
|
||||
});
|
||||
//remote source (advanced)
|
||||
//remote source (advanced) - Select2 v4.x format
|
||||
$('#country').editable({
|
||||
select2: {
|
||||
placeholder: 'Select Country',
|
||||
allowClear: true,
|
||||
minimumInputLength: 3,
|
||||
id: function (item) {
|
||||
return item.CountryId;
|
||||
},
|
||||
ajax: {
|
||||
url: '/getCountries',
|
||||
dataType: 'json',
|
||||
data: function (term, page) {
|
||||
return { query: term };
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
results: function (data, page) {
|
||||
return { results: data };
|
||||
}
|
||||
processResults: function (data, params) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.CountryId,
|
||||
text: item.CountryName
|
||||
};
|
||||
})
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
formatResult: function (item) {
|
||||
return item.CountryName;
|
||||
templateResult: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
},
|
||||
formatSelection: function (item) {
|
||||
return item.CountryName;
|
||||
},
|
||||
initSelection: function (element, callback) {
|
||||
return $.get('/getCountryById', { query: element.val() }, function (data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
templateSelection: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -3709,12 +3706,19 @@ $(function(){
|
||||
|
||||
if (typeof source === 'string') {
|
||||
options.select2.ajax = options.select2.ajax || {};
|
||||
//some default ajax params
|
||||
//default ajax params for Select2 v4.x
|
||||
if(!options.select2.ajax.data) {
|
||||
options.select2.ajax.data = function(term) {return { query:term };};
|
||||
options.select2.ajax.data = function(params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
};
|
||||
}
|
||||
if(!options.select2.ajax.results) {
|
||||
options.select2.ajax.results = function(data) { return {results:data };};
|
||||
if(!options.select2.ajax.processResults) {
|
||||
options.select2.ajax.processResults = function(data) {
|
||||
return {results: data };
|
||||
};
|
||||
}
|
||||
options.select2.ajax.url = source;
|
||||
} else {
|
||||
@@ -3731,16 +3735,8 @@ $(function(){
|
||||
this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
|
||||
this.isRemote = ('ajax' in this.options.select2);
|
||||
|
||||
//store function returning ID of item
|
||||
//should be here as used inautotext for local source
|
||||
this.idFunc = this.options.select2.id;
|
||||
if (typeof(this.idFunc) !== "function") {
|
||||
var idKey = this.idFunc || 'id';
|
||||
this.idFunc = function (e) { return e[idKey]; };
|
||||
}
|
||||
|
||||
//store function that renders text in select2
|
||||
this.formatSelection = this.options.select2.formatSelection;
|
||||
this.formatSelection = this.options.select2.templateSelection;
|
||||
if (typeof(this.formatSelection) !== "function") {
|
||||
this.formatSelection = function (e) { return e.text; };
|
||||
}
|
||||
@@ -3751,20 +3747,8 @@ $(function(){
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.setClass();
|
||||
|
||||
//can not apply select2 here as it calls initSelection
|
||||
//over input that does not have correct value yet.
|
||||
//apply select2 only in value2input
|
||||
//this.$input.select2(this.options.select2);
|
||||
|
||||
//when data is loaded via ajax, we need to know when it's done to populate listData
|
||||
if(this.isRemote) {
|
||||
//listen to loaded event to populate data
|
||||
this.$input.on('select2-loaded', $.proxy(function(e) {
|
||||
this.sourceData = e.items.results;
|
||||
}, this));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//trigger resize of editableform to re-position container in multi-valued mode
|
||||
if(this.isMultiple) {
|
||||
this.$input.on('change', function() {
|
||||
@@ -3773,15 +3757,33 @@ $(function(){
|
||||
}
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
var self = this;
|
||||
var submitting = false;
|
||||
|
||||
// Use Select2 v4.x events for autosubmit - avoid double submissions
|
||||
this.$input.on('select2:select select2:unselect', $.proxy(function(e){
|
||||
if (!submitting) {
|
||||
submitting = true;
|
||||
setTimeout(function() {
|
||||
$(self.$input).closest('form').submit();
|
||||
submitting = false;
|
||||
}, 100);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = '', data,
|
||||
that = this;
|
||||
|
||||
if(this.options.select2.tags) { //in tags mode just assign value
|
||||
// Use stored selected data if available (for visual display after selection)
|
||||
if(this.selectedData && this.selectedData.length > 0) {
|
||||
data = this.selectedData;
|
||||
} else if(this.options.select2.tags) { //in tags mode just assign value
|
||||
data = value;
|
||||
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
|
||||
} else if(this.sourceData) {
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, function(e) { return e.id; });
|
||||
} else {
|
||||
//can not get list of possible values
|
||||
//(e.g. autotext for select2 with ajax source)
|
||||
@@ -3800,7 +3802,6 @@ $(function(){
|
||||
|
||||
text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
|
||||
|
||||
//$(element).text(text);
|
||||
Constructor.superclass.value2html.call(this, text, element);
|
||||
},
|
||||
|
||||
@@ -3809,46 +3810,97 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
|
||||
// if value array => join it anyway
|
||||
if(Array.isArray(value)) {
|
||||
value = value.join(this.getSeparator());
|
||||
}
|
||||
|
||||
//for remote source just set value, text is updated by initSelection
|
||||
// For remote sources with existing value, create option element before Select2 init
|
||||
if(this.isRemote && !this.isMultiple && value) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var text = $el.text();
|
||||
var $option = new Option(text, value, true, true);
|
||||
this.$input.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
//initialize select2 if not already done
|
||||
if(!this.$input.data('select2')) {
|
||||
this.$input.val(value);
|
||||
this.$input.select2(this.options.select2);
|
||||
} else {
|
||||
//second argument needed to separate initial change from user's click (for autosubmit)
|
||||
this.$input.val(value).trigger('change', true);
|
||||
|
||||
//Uncaught Error: cannot call val() if initSelection() is not defined
|
||||
//this.$input.select2('val', value);
|
||||
}
|
||||
|
||||
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
|
||||
// we should somehow get text for provided id.
|
||||
// The solution is to use element's text as text for that id (exclude empty)
|
||||
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
|
||||
// customId and customText are methods to extract `id` and `text` from data object
|
||||
// we can use this workaround only if user did not define these methods
|
||||
// otherwise we cant construct data object
|
||||
var customId = this.options.select2.id,
|
||||
customText = this.options.select2.formatSelection;
|
||||
|
||||
if(!customId && !customText) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var data = {id: value, text: $el.text()};
|
||||
this.$input.select2('data', data);
|
||||
|
||||
// Set up minimal event handling AFTER initialization
|
||||
this.$input.on('select2:select', $.proxy(function(e) {
|
||||
|
||||
if (e.params && e.params.data) {
|
||||
var selectedData = e.params.data;
|
||||
this.selectedData = [selectedData];
|
||||
|
||||
// Fix Select2's visual display by ensuring the option exists and is selected
|
||||
var $existingOption = this.$input.find('option[value="' + selectedData.id + '"]');
|
||||
if ($existingOption.length === 0) {
|
||||
// Create the option if it doesn't exist
|
||||
var $option = $('<option></option>')
|
||||
.attr('value', selectedData.id)
|
||||
.text(selectedData.text)
|
||||
.prop('selected', true);
|
||||
this.$input.append($option);
|
||||
} else {
|
||||
// Make sure existing option is selected
|
||||
$existingOption.prop('selected', true);
|
||||
}
|
||||
|
||||
// Force Select2 to update its display
|
||||
this.$input.trigger('change.select2');
|
||||
|
||||
// Mark that a selection was just made (for blur handling)
|
||||
this._justSelected = true;
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.$input.on('select2:unselect', $.proxy(function(e) {
|
||||
this.selectedData = [];
|
||||
}, this));
|
||||
|
||||
// Ensure Select2 doesn't interfere with x-editable's document click handling
|
||||
// by making sure clicks on Select2 elements don't stop propagation
|
||||
this.$input.on('select2:open', $.proxy(function(e) {
|
||||
// Find the Select2 dropdown container and ensure it allows document clicks to propagate
|
||||
setTimeout(function() {
|
||||
$('.select2-container--open .select2-dropdown').off('click.editable-prevent-close');
|
||||
$('.select2-container--open .select2-results').off('click.editable-prevent-close');
|
||||
}, 10);
|
||||
}, this));
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
//update value on existing select2
|
||||
this.$input.val(value).trigger('change.select2');
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
return this.$input.select2('val');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var val = this.$input.val();
|
||||
|
||||
// --- Handle Bootstrap Datepicker ---
|
||||
var dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
val = dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// --- Handle Select2 v4.x ---
|
||||
if (this.$input.data('select2')) {
|
||||
var selectedData = this.$input.select2('data');
|
||||
if (selectedData && selectedData.length > 0) {
|
||||
val = this.isMultiple ? selectedData.map(function(item) { return item.id; }) : selectedData[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
|
||||
str2value: function(str, separator) {
|
||||
if(typeof str !== 'string' || !this.isMultiple) {
|
||||
@@ -3870,16 +3922,10 @@ $(function(){
|
||||
return val;
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
this.$input.on('change', function(e, isInitial){
|
||||
if(!isInitial) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeparator: function() {
|
||||
return this.options.select2.separator || $.fn.select2.defaults.separator;
|
||||
// Select2 v4.x uses different separator handling
|
||||
return this.options.select2.separator || ',';
|
||||
},
|
||||
|
||||
/*
|
||||
@@ -3915,7 +3961,7 @@ $(function(){
|
||||
**/
|
||||
tpl:'<input type="hidden">',
|
||||
/**
|
||||
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
|
||||
Configuration of select2. [Full list of options](https://select2.org/configuration).
|
||||
|
||||
@property select2
|
||||
@type object
|
||||
@@ -3953,7 +3999,6 @@ $(function(){
|
||||
$.fn.editabletypes.select2 = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
|
||||
/**
|
||||
* Combodate - 1.0.5
|
||||
* Dropdown date and time picker.
|
||||
|
||||
File diff suppressed because one or more lines are too long
272
package-lock.json
generated
272
package-lock.json
generated
@@ -1,14 +1,13 @@
|
||||
{
|
||||
"name": "@24unix/x-editable",
|
||||
"version": "1.5.2",
|
||||
"name": "x-editable-bootstrap5",
|
||||
"version": "1.5.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@24unix/x-editable",
|
||||
"version": "1.5.2",
|
||||
"name": "x-editable-bootstrap5",
|
||||
"version": "1.5.3",
|
||||
"dependencies": {
|
||||
"@anthropic-ai/claude-code": "^1.0.61",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-datepicker": "^1.10.0",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
@@ -31,26 +30,9 @@
|
||||
"grunt-contrib-uglify": "^5.2.2",
|
||||
"style-loader": "^4.0.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@anthropic-ai/claude-code": {
|
||||
"version": "1.0.61",
|
||||
"resolved": "https://registry.npmjs.org/@anthropic-ai/claude-code/-/claude-code-1.0.61.tgz",
|
||||
"integrity": "sha512-+gjKzY1hsWfHoH52SgKR6E0ujCDPyyRsjyRShtZfS0urKd8VQq3D/DF3hvT3P4JJeW0YuWp5Dep0aSRON+/FFA==",
|
||||
"license": "SEE LICENSE IN README.md",
|
||||
"bin": {
|
||||
"claude": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-darwin-arm64": "^0.33.5",
|
||||
"@img/sharp-darwin-x64": "^0.33.5",
|
||||
"@img/sharp-linux-arm": "^0.33.5",
|
||||
"@img/sharp-linux-arm64": "^0.33.5",
|
||||
"@img/sharp-linux-x64": "^0.33.5",
|
||||
"@img/sharp-win32-x64": "^0.33.5"
|
||||
"peerDependencies": {
|
||||
"select2": ">=4.0.0 || 4.1.0-rc.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
@@ -88,215 +70,6 @@
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
|
||||
"integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
|
||||
"integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||
@@ -1031,9 +804,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -3639,9 +3412,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/morgan": {
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.1.tgz",
|
||||
"integrity": "sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==",
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
|
||||
"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -3649,7 +3422,7 @@
|
||||
"debug": "2.6.9",
|
||||
"depd": "~2.0.0",
|
||||
"on-finished": "~2.3.0",
|
||||
"on-headers": "~1.1.0"
|
||||
"on-headers": "~1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
@@ -3792,9 +3565,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/on-headers": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
|
||||
"integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
|
||||
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -4654,6 +4427,13 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/select2": {
|
||||
"version": "4.0.13",
|
||||
"resolved": "https://registry.npmjs.org/select2/-/select2-4.0.13.tgz",
|
||||
"integrity": "sha512-1JeB87s6oN/TDxQQYCvS5EFoQyvV6eYMZZ0AeA4tdFDYWN3BAGZ8npr17UBFddU0lgAt3H0yjX3X6/ekOj1yjw==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
|
||||
@@ -5080,9 +4860,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tar-fs": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.0.tgz",
|
||||
"integrity": "sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==",
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
|
||||
"integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
12
package.json
12
package.json
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "@24unix/x-editable",
|
||||
"title": "X-editable",
|
||||
"description": "A maintained fork of x-editable for Bootstrap 5 support.",
|
||||
"version": "1.5.2",
|
||||
"name": "x-editable-bootstrap5",
|
||||
"title": "X-editable-bootstrap5",
|
||||
"description": "A fork of x-editable for Bootstrap 5 support.",
|
||||
"version": "1.5.7",
|
||||
"homepage": "https://git.24unix.net/tracer/x-editable",
|
||||
"author": {
|
||||
"name": "Micha Espey",
|
||||
@@ -33,7 +33,6 @@
|
||||
"module": "dist/bootstrap5-editable/js/bootstrap-editable.esm.js",
|
||||
"style": "dist/bootstrap5-editable/css/bootstrap-editable.css",
|
||||
"dependencies": {
|
||||
"@anthropic-ai/claude-code": "^1.0.61",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-datepicker": "^1.10.0",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
@@ -42,6 +41,9 @@
|
||||
"popper.js": "^1.16.1",
|
||||
"webpack": "^5.98.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"select2": ">=4.0.0 || 4.1.0-rc.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^7.1.2",
|
||||
"file-loader": "^6.2.0",
|
||||
|
||||
32
src/bootstrap5-editable.js
vendored
32
src/bootstrap5-editable.js
vendored
@@ -1,32 +0,0 @@
|
||||
/*
|
||||
X-Editable Bootstrap 5 - Complete Bundle
|
||||
Uses npm bootstrap-datepicker instead of bundled version
|
||||
Order matches Gruntfile.js for compatibility
|
||||
*/
|
||||
import $ from "jquery";
|
||||
|
||||
// Import bootstrap-datepicker from npm
|
||||
import "bootstrap-datepicker";
|
||||
|
||||
// Core editable functionality - EXACT ORDER from Gruntfile
|
||||
import "./editable-form/editable-form.js";
|
||||
import "./editable-form/editable-form-utils.js";
|
||||
import "./containers/editable-container.js";
|
||||
import "./containers/editable-inline.js";
|
||||
import "./element/editable-element.js";
|
||||
import "./inputs/abstract.js";
|
||||
import "./inputs/list.js";
|
||||
import "./inputs/text.js";
|
||||
import "./inputs/textarea.js";
|
||||
import "./inputs/select.js";
|
||||
|
||||
// Date input (now uses npm bootstrap-datepicker)
|
||||
import "./inputs/date/date.js";
|
||||
import "./inputs/date/datefield.js";
|
||||
|
||||
// Bootstrap 5 specific containers and forms
|
||||
import "./containers/editable-popover5.js";
|
||||
import "./editable-form/editable-form-bootstrap5.js";
|
||||
|
||||
// Export jQuery for compatibility
|
||||
export default $;
|
||||
@@ -3,7 +3,6 @@
|
||||
* ---------------------
|
||||
* requires bootstrap-popover.js
|
||||
*/
|
||||
import { Popover } from "bootstrap";
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
@@ -13,7 +12,7 @@ import { Popover } from "bootstrap";
|
||||
containerName: 'popover',
|
||||
containerDataName: 'bs.popover',
|
||||
innerCss: '.popover-body',
|
||||
defaults: Popover.Default,
|
||||
defaults: bootstrap.Popover.Default,
|
||||
|
||||
initContainer: function(){
|
||||
$.extend(this.containerOptions, {
|
||||
@@ -40,7 +39,27 @@ import { Popover } from "bootstrap";
|
||||
|
||||
/* show */
|
||||
innerShow: function () {
|
||||
// Preserve scroll position to prevent page jumping
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var scrollLeft = $(window).scrollLeft();
|
||||
|
||||
this.call('show');
|
||||
|
||||
// Multiple restoration attempts to handle async positioning
|
||||
setTimeout(function() {
|
||||
$(window).scrollTop(scrollTop);
|
||||
$(window).scrollLeft(scrollLeft);
|
||||
}, 0);
|
||||
|
||||
setTimeout(function() {
|
||||
$(window).scrollTop(scrollTop);
|
||||
$(window).scrollLeft(scrollLeft);
|
||||
}, 10);
|
||||
|
||||
setTimeout(function() {
|
||||
$(window).scrollTop(scrollTop);
|
||||
$(window).scrollLeft(scrollLeft);
|
||||
}, 50);
|
||||
},
|
||||
|
||||
/* hide */
|
||||
@@ -64,7 +83,7 @@ import { Popover } from "bootstrap";
|
||||
call: function() {
|
||||
if ( ! $(this.$element).data(this.containerDataName)) {
|
||||
$(this.$element).data(this.containerDataName,
|
||||
Popover.getOrCreateInstance(this.$element, this.containerOptions)
|
||||
bootstrap.Popover.getOrCreateInstance(this.$element, this.containerOptions)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
/*
|
||||
Editableform based on Twitter Bootstrap 5
|
||||
*/
|
||||
import $ from "jquery";
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
@@ -48,7 +47,7 @@ import $ from "jquery";
|
||||
'<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
|
||||
'<i class="bi bi-check"></i>'+
|
||||
'</button>'+
|
||||
'<button type="button" class="btn btn-secondary btn-sm editable-cancel">'+
|
||||
'<button type="button" class="btn btn-outline-secondary btn-sm editable-cancel">'+
|
||||
'<i class="bi bi-x"></i>'+
|
||||
'</button>';
|
||||
|
||||
|
||||
@@ -151,17 +151,3 @@
|
||||
.editable-pre-wrapped {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Position datepicker above input for datepicker-above class */
|
||||
.datepicker-above .datepicker-inline {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 5px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
@@ -38,10 +38,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.input = $.fn.editableutils.createInput(this.options);
|
||||
if(!this.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the editable's type from the input's type
|
||||
this.type = this.input.type;
|
||||
}
|
||||
|
||||
//set value from settings or by element's text
|
||||
if (this.options.value === undefined || this.options.value === null) {
|
||||
@@ -78,16 +75,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
//stop propagation to prevent interference with other click handlers
|
||||
e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
//when toggle='click' we should not close all other containers as they will be closed automatically in document click listener
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
//always close other containers when opening a new one
|
||||
this.toggle(true);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
|
||||
@@ -26,29 +26,27 @@ $(function(){
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
|
||||
var Date = function (options) {
|
||||
this.init('date', options, Date.defaults);
|
||||
this.initPicker(options, Date.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'date';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
|
||||
|
||||
$.extend(Date.prototype, {
|
||||
prerender: function() {
|
||||
// Call parent prerender
|
||||
Date.superclass.prerender.call(this);
|
||||
},
|
||||
|
||||
initPicker: function(options, defaults) {
|
||||
// Initialize bootstrap-datepicker reference
|
||||
if (!$.fn.bdatepicker) {
|
||||
if ($.fn.datepicker) {
|
||||
$.fn.bdatepicker = $.fn.datepicker.noConflict();
|
||||
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
|
||||
$.fn.datepicker = $.fn.bdatepicker;
|
||||
}
|
||||
} else {
|
||||
throw new Error('bootstrap-datepicker not found. Please include bootstrap-datepicker before x-editable.');
|
||||
}
|
||||
}
|
||||
|
||||
//'format' is set directly from settings or data-* attributes
|
||||
|
||||
//by default viewformat equals to format
|
||||
@@ -68,8 +66,8 @@ $(function(){
|
||||
//language
|
||||
this.options.datepicker.language = this.options.datepicker.language || 'en';
|
||||
|
||||
//store DPglobal - use datepicker instead of bdatepicker
|
||||
this.dpg = $.fn.datepicker.DPGlobal;
|
||||
//store DPglobal
|
||||
this.dpg = $.fn.bdatepicker.DPGlobal;
|
||||
|
||||
//store parsed formats
|
||||
this.parsedFormat = this.dpg.parseFormat(this.options.format);
|
||||
@@ -77,22 +75,7 @@ $(function(){
|
||||
},
|
||||
|
||||
render: function () {
|
||||
// Ensure we have an input element
|
||||
if (!this.$input || !this.$input.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize datepicker immediately
|
||||
try {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
|
||||
// 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
|
||||
}
|
||||
this.$input.bdatepicker(this.options.datepicker);
|
||||
|
||||
//"clear" link
|
||||
if(this.options.clear) {
|
||||
@@ -105,19 +88,41 @@ $(function(){
|
||||
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
Date.superclass.value2html.call(this, text, element);
|
||||
let text = '';
|
||||
|
||||
if (value) {
|
||||
if (typeof value === 'string') {
|
||||
text = value;
|
||||
} else if (value instanceof Date && typeof value.getUTCDate === 'function') {
|
||||
text = this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
}
|
||||
}
|
||||
|
||||
// direct fallback: set text without using editableutils
|
||||
if (element) {
|
||||
element.textContent = text;
|
||||
}
|
||||
},
|
||||
|
||||
html2value: function(html) {
|
||||
return this.parseDate(html, this.parsedViewFormat);
|
||||
},
|
||||
},
|
||||
|
||||
value2str: function(value) {
|
||||
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
|
||||
},
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// If value is already a string (like "2025-11-27"), just return it.
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
|
||||
// Otherwise, assume it's a Date object and format it.
|
||||
return this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language);
|
||||
},
|
||||
|
||||
str2value: function(str) {
|
||||
return this.parseDate(str, this.parsedFormat);
|
||||
@@ -128,43 +133,16 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
// Ensure datepicker is initialized before trying to update
|
||||
if (!this.$input.data('datepicker')) {
|
||||
this.$input.datepicker(this.options.datepicker);
|
||||
}
|
||||
|
||||
this.$input.datepicker('update', value);
|
||||
this.$input.bdatepicker('update', value);
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var datepicker = this.$input.data('datepicker');
|
||||
|
||||
if (datepicker) {
|
||||
if (datepicker.date) {
|
||||
return datepicker.date;
|
||||
}
|
||||
|
||||
// Try getting date from dates array
|
||||
if (datepicker.dates && datepicker.dates.length > 0) {
|
||||
return datepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try using getDate method
|
||||
if (typeof datepicker.getDate === 'function') {
|
||||
var dateFromMethod = datepicker.getDate();
|
||||
return dateFromMethod;
|
||||
}
|
||||
input2value: function() {
|
||||
const dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
return dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// Fallback: try to parse the input value directly
|
||||
var inputVal = this.$input.val();
|
||||
if (inputVal) {
|
||||
var parsedDate = this.parseDate(inputVal, this.parsedViewFormat);
|
||||
return parsedDate;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
return this.$input.val();
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
},
|
||||
|
||||
@@ -14,9 +14,6 @@ Automatically shown in inline mode.
|
||||
var DateField = function (options) {
|
||||
this.init('datefield', options, DateField.defaults);
|
||||
this.initPicker(options, DateField.defaults);
|
||||
|
||||
// Ensure type is set correctly
|
||||
this.type = 'datefield';
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
|
||||
@@ -27,8 +24,8 @@ Automatically shown in inline mode.
|
||||
this.setClass();
|
||||
this.setAttr('placeholder');
|
||||
|
||||
//use datepicker instead of bdatepicker
|
||||
this.$tpl.datepicker(this.options.datepicker);
|
||||
//bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)
|
||||
this.$tpl.bdatepicker(this.options.datepicker);
|
||||
|
||||
//need to disable original event handlers
|
||||
this.$input.off('focus keydown');
|
||||
@@ -36,48 +33,17 @@ Automatically shown in inline mode.
|
||||
//update value of datepicker
|
||||
this.$input.keyup($.proxy(function(){
|
||||
this.$tpl.removeData('date');
|
||||
this.$tpl.datepicker('update');
|
||||
this.$tpl.bdatepicker('update');
|
||||
}, this));
|
||||
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
var formattedValue = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
|
||||
this.$input.val(formattedValue);
|
||||
this.$tpl.datepicker('update');
|
||||
this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
|
||||
this.$tpl.bdatepicker('update');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
// First try the container datepicker (ideal case)
|
||||
var containerDatepicker = this.$tpl.data('datepicker');
|
||||
|
||||
if (containerDatepicker && containerDatepicker.dates && containerDatepicker.dates.length > 0) {
|
||||
return containerDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Fallback: try the input datepicker (in case manual init worked)
|
||||
var inputDatepicker = this.$input.data('datepicker');
|
||||
|
||||
if (inputDatepicker && inputDatepicker.dates && inputDatepicker.dates.length > 0) {
|
||||
return inputDatepicker.dates[0];
|
||||
}
|
||||
|
||||
// Try getDate methods
|
||||
if (containerDatepicker && typeof containerDatepicker.getDate === 'function') {
|
||||
var containerDate = containerDatepicker.getDate();
|
||||
if (containerDate) {
|
||||
return containerDate;
|
||||
}
|
||||
}
|
||||
|
||||
if (inputDatepicker && typeof inputDatepicker.getDate === 'function') {
|
||||
var inputDate = inputDatepicker.getDate();
|
||||
if (inputDate) {
|
||||
return inputDate;
|
||||
}
|
||||
}
|
||||
|
||||
// Final fallback to text parsing
|
||||
return this.html2value(this.$input.val());
|
||||
},
|
||||
|
||||
@@ -94,21 +60,19 @@ Automatically shown in inline mode.
|
||||
/**
|
||||
@property tpl
|
||||
**/
|
||||
tpl:'<div class="input-group input-group-sm date datepicker-above" style="width: 200px; border: 1px solid #dee2e6; border-radius: 0.375rem; position: relative;"><input type="text" class="form-control form-control-sm" style="border: none;"/><span class="input-group-text" style="border: none; background: transparent;"><i class="bi bi-calendar"></i></span></div>',
|
||||
tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
|
||||
/**
|
||||
@property inputclass
|
||||
@default 'form-control form-control-sm'
|
||||
@default 'input-small'
|
||||
**/
|
||||
inputclass: 'form-control form-control-sm',
|
||||
inputclass: 'input-small',
|
||||
|
||||
/* datepicker config */
|
||||
datepicker: {
|
||||
weekStart: 0,
|
||||
startView: 0,
|
||||
minViewMode: 0,
|
||||
autoclose: true,
|
||||
orientation: 'top',
|
||||
container: 'body'
|
||||
autoclose: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
87
src/inputs/select2/lib/select2-bootstrap.css
vendored
87
src/inputs/select2/lib/select2-bootstrap.css
vendored
@@ -1,87 +0,0 @@
|
||||
.form-control .select2-choice {
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.form-control .select2-choice .select2-arrow {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.form-control.select2-container {
|
||||
height: auto !important;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.form-control.select2-container.select2-dropdown-open {
|
||||
border-color: #5897FB;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.form-control .select2-container.select2-dropdown-open .select2-choices {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.form-control.select2-container .select2-choices {
|
||||
border: 0 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.control-group.warning .select2-container .select2-choice,
|
||||
.control-group.warning .select2-container .select2-choices,
|
||||
.control-group.warning .select2-container-active .select2-choice,
|
||||
.control-group.warning .select2-container-active .select2-choices,
|
||||
.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||
.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||
.control-group.warning .select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid #C09853 !important;
|
||||
}
|
||||
|
||||
.control-group.warning .select2-container .select2-choice div {
|
||||
border-left: 1px solid #C09853 !important;
|
||||
background: #FCF8E3 !important;
|
||||
}
|
||||
|
||||
.control-group.error .select2-container .select2-choice,
|
||||
.control-group.error .select2-container .select2-choices,
|
||||
.control-group.error .select2-container-active .select2-choice,
|
||||
.control-group.error .select2-container-active .select2-choices,
|
||||
.control-group.error .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||
.control-group.error .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||
.control-group.error .select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid #B94A48 !important;
|
||||
}
|
||||
|
||||
.control-group.error .select2-container .select2-choice div {
|
||||
border-left: 1px solid #B94A48 !important;
|
||||
background: #F2DEDE !important;
|
||||
}
|
||||
|
||||
.control-group.info .select2-container .select2-choice,
|
||||
.control-group.info .select2-container .select2-choices,
|
||||
.control-group.info .select2-container-active .select2-choice,
|
||||
.control-group.info .select2-container-active .select2-choices,
|
||||
.control-group.info .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||
.control-group.info .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||
.control-group.info .select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid #3A87AD !important;
|
||||
}
|
||||
|
||||
.control-group.info .select2-container .select2-choice div {
|
||||
border-left: 1px solid #3A87AD !important;
|
||||
background: #D9EDF7 !important;
|
||||
}
|
||||
|
||||
.control-group.success .select2-container .select2-choice,
|
||||
.control-group.success .select2-container .select2-choices,
|
||||
.control-group.success .select2-container-active .select2-choice,
|
||||
.control-group.success .select2-container-active .select2-choices,
|
||||
.control-group.success .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||
.control-group.success .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||
.control-group.success .select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid #468847 !important;
|
||||
}
|
||||
|
||||
.control-group.success .select2-container .select2-choice div {
|
||||
border-left: 1px solid #468847 !important;
|
||||
background: #DFF0D8 !important;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
615
src/inputs/select2/lib/select2.css
vendored
615
src/inputs/select2/lib/select2.css
vendored
@@ -1,615 +0,0 @@
|
||||
/*
|
||||
Version: 3.4.4 Timestamp: Thu Oct 24 13:23:11 PDT 2013
|
||||
*/
|
||||
.select2-container {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* inline-block for ie7 */
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.select2-container,
|
||||
.select2-drop,
|
||||
.select2-search,
|
||||
.select2-search input {
|
||||
/*
|
||||
Force border-box so that % widths fit the parent
|
||||
container without overlap because of margin/padding.
|
||||
|
||||
More Info : http://www.quirksmode.org/css/box.html
|
||||
*/
|
||||
-webkit-box-sizing: border-box; /* webkit */
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
.select2-container .select2-choice {
|
||||
display: block;
|
||||
height: 26px;
|
||||
padding: 0 0 0 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
white-space: nowrap;
|
||||
line-height: 26px;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
background-clip: padding-box;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
|
||||
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
|
||||
background-image: linear-gradient(top, #fff 0%, #eee 50%);
|
||||
}
|
||||
|
||||
.select2-container.select2-drop-above .select2-choice {
|
||||
border-bottom-color: #aaa;
|
||||
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
|
||||
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
|
||||
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
|
||||
background-image: linear-gradient(top, #eee 0%, #fff 90%);
|
||||
}
|
||||
|
||||
.select2-container.select2-allowclear .select2-choice .select2-chosen {
|
||||
margin-right: 42px;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice > .select2-chosen {
|
||||
margin-right: 26px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice abbr {
|
||||
display: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 8px;
|
||||
|
||||
font-size: 1px;
|
||||
text-decoration: none;
|
||||
|
||||
border: 0;
|
||||
background: url('select2.png') right top no-repeat;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.select2-container.select2-allowclear .select2-choice abbr {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice abbr:hover {
|
||||
background-position: right -11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select2-drop-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 9998;
|
||||
/* styles required for IE to work */
|
||||
background-color: #fff;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
width: 100%;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 100%;
|
||||
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #aaa;
|
||||
border-top: 0;
|
||||
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.select2-drop-auto-width {
|
||||
border-top: 1px solid #aaa;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.select2-drop-auto-width .select2-search {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.select2-drop.select2-drop-above {
|
||||
margin-top: 1px;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 0;
|
||||
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.select2-drop-active {
|
||||
border: 1px solid #5897fb;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.select2-drop.select2-drop-above.select2-drop-active {
|
||||
border-top: 1px solid #5897fb;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice .select2-arrow {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
border-left: 1px solid #aaa;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
background-clip: padding-box;
|
||||
|
||||
background: #ccc;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
|
||||
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
|
||||
background-image: linear-gradient(top, #ccc 0%, #eee 60%);
|
||||
}
|
||||
|
||||
.select2-container .select2-choice .select2-arrow b {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('select2.png') no-repeat 0 1px;
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-height: 26px;
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select2-search input {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
min-height: 26px;
|
||||
padding: 4px 20px 4px 5px;
|
||||
margin: 0;
|
||||
|
||||
outline: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
background: #fff url('select2.png') no-repeat 100% -22px;
|
||||
background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
|
||||
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
|
||||
}
|
||||
|
||||
.select2-drop.select2-drop-above .select2-search input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.select2-search input.select2-active {
|
||||
background: #fff url('select2-spinner.gif') no-repeat 100%;
|
||||
background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
|
||||
background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||
background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||
background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
|
||||
}
|
||||
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices {
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
|
||||
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
border-bottom-color: transparent;
|
||||
-webkit-box-shadow: 0 1px 0 #fff inset;
|
||||
box-shadow: 0 1px 0 #fff inset;
|
||||
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
background-color: #eee;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
|
||||
background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
|
||||
background-image: linear-gradient(top, #fff 0%, #eee 50%);
|
||||
}
|
||||
|
||||
.select2-dropdown-open.select2-drop-above .select2-choice,
|
||||
.select2-dropdown-open.select2-drop-above .select2-choices {
|
||||
border: 1px solid #5897fb;
|
||||
border-top-color: transparent;
|
||||
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
|
||||
background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
|
||||
background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
|
||||
background-image: linear-gradient(bottom, #fff 0%, #eee 50%);
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice .select2-arrow {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
filter: none;
|
||||
}
|
||||
.select2-dropdown-open .select2-choice .select2-arrow b {
|
||||
background-position: -18px 1px;
|
||||
}
|
||||
|
||||
/* results */
|
||||
.select2-results {
|
||||
max-height: 200px;
|
||||
padding: 0 0 0 4px;
|
||||
margin: 4px 4px 4px 0;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.select2-results ul.select2-result-sub {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
|
||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
|
||||
|
||||
.select2-results li {
|
||||
list-style: none;
|
||||
display: list-item;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.select2-results li.select2-result-with-children > .select2-result-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.select2-results .select2-result-label {
|
||||
padding: 3px 7px 4px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
min-height: 1em;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.select2-results .select2-highlighted {
|
||||
background: #3875d7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select2-results li em {
|
||||
background: #feffde;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.select2-results .select2-highlighted em {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select2-results .select2-highlighted ul {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.select2-results .select2-no-results,
|
||||
.select2-results .select2-searching,
|
||||
.select2-results .select2-selection-limit {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
disabled look for disabled choices in the results dropdown
|
||||
*/
|
||||
.select2-results .select2-disabled.select2-highlighted {
|
||||
color: #666;
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
cursor: default;
|
||||
}
|
||||
.select2-results .select2-disabled {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-results .select2-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select2-more-results.select2-active {
|
||||
background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
|
||||
}
|
||||
|
||||
.select2-more-results {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* disabled styles */
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice .select2-arrow {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice abbr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* multiselect */
|
||||
|
||||
.select2-container-multi .select2-choices {
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
|
||||
background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
|
||||
background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
|
||||
background-image: linear-gradient(top, #eee 1%, #fff 15%);
|
||||
}
|
||||
|
||||
.select2-locked {
|
||||
padding: 3px 5px 3px 5px !important;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
|
||||
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
.select2-container-multi .select2-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-field {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-field input {
|
||||
padding: 5px;
|
||||
margin: 1px 0;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
color: #666;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
|
||||
background: #fff url('select2-spinner.gif') no-repeat 100% !important;
|
||||
}
|
||||
|
||||
.select2-default {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 18px;
|
||||
margin: 3px 0 3px 5px;
|
||||
position: relative;
|
||||
|
||||
line-height: 13px;
|
||||
color: #333;
|
||||
cursor: default;
|
||||
border: 1px solid #aaaaaa;
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
background-clip: padding-box;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: #e4e4e4;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
|
||||
cursor: default;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice-focus {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 4px;
|
||||
|
||||
font-size: 1px;
|
||||
outline: none;
|
||||
background: url('select2.png') right top no-repeat;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-search-choice-close {
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
|
||||
background-position: right -11px;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
|
||||
background-position: right -11px;
|
||||
}
|
||||
|
||||
/* disabled styles */
|
||||
.select2-container-multi.select2-container-disabled .select2-choices {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 5px;
|
||||
border: 1px solid #ddd;
|
||||
background-image: none;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none;
|
||||
background: none;
|
||||
}
|
||||
/* end multiselect */
|
||||
|
||||
|
||||
.select2-result-selectable .select2-match,
|
||||
.select2-result-unselectable .select2-match {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.select2-offscreen, .select2-offscreen:focus {
|
||||
clip: rect(0 0 0 0) !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
border: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
position: absolute !important;
|
||||
outline: 0 !important;
|
||||
left: 0px !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.select2-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select2-measure-scrollbar {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
}
|
||||
/* Retina-ize icons */
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
|
||||
.select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
|
||||
background-image: url('select2x2.png') !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 60px 40px !important;
|
||||
}
|
||||
.select2-search input {
|
||||
background-position: 100% -21px !important;
|
||||
}
|
||||
}
|
||||
3251
src/inputs/select2/lib/select2.js
vendored
3251
src/inputs/select2/lib/select2.js
vendored
File diff suppressed because one or more lines are too long
22
src/inputs/select2/lib/select2.min.js
vendored
22
src/inputs/select2/lib/select2.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 613 B |
Binary file not shown.
|
Before Width: | Height: | Size: 845 B |
252
src/inputs/select2/select2.js
vendored
252
src/inputs/select2/select2.js
vendored
@@ -1,21 +1,18 @@
|
||||
/**
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
|
||||
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
|
||||
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/select2/select2.
|
||||
Please see [Select2 docs](https://select2.org/) for detailed description and options.
|
||||
|
||||
You should manually download and include select2 distributive:
|
||||
You should manually download and include Select2 v4.x distributive:
|
||||
|
||||
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="select2/select2.js"></script>
|
||||
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="node_modules/select2/dist/js/select2.js"></script>
|
||||
|
||||
To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
|
||||
To make it **bootstrap-styled** you can use css from [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme):
|
||||
|
||||
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
|
||||
You need initially put both `data-value` and element's text youself:
|
||||
|
||||
<a href="#" data-type="select2" data-value="1">Text1</a>
|
||||
<link href="select2-bootstrap-5-theme.css" rel="stylesheet" type="text/css"></link>
|
||||
|
||||
**Note:** This version requires Select2 v4.x. For remote sources, you may need to provide custom
|
||||
`templateResult` and `templateSelection` functions.
|
||||
|
||||
@class select2
|
||||
@extends abstractinput
|
||||
@@ -44,36 +41,40 @@ $(function(){
|
||||
minimumInputLength: 1
|
||||
}
|
||||
});
|
||||
//remote source (advanced)
|
||||
//remote source (advanced) - Select2 v4.x format
|
||||
$('#country').editable({
|
||||
select2: {
|
||||
placeholder: 'Select Country',
|
||||
allowClear: true,
|
||||
minimumInputLength: 3,
|
||||
id: function (item) {
|
||||
return item.CountryId;
|
||||
},
|
||||
ajax: {
|
||||
url: '/getCountries',
|
||||
dataType: 'json',
|
||||
data: function (term, page) {
|
||||
return { query: term };
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
results: function (data, page) {
|
||||
return { results: data };
|
||||
}
|
||||
processResults: function (data, params) {
|
||||
return {
|
||||
results: data.map(function(item) {
|
||||
return {
|
||||
id: item.CountryId,
|
||||
text: item.CountryName
|
||||
};
|
||||
})
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
formatResult: function (item) {
|
||||
return item.CountryName;
|
||||
templateResult: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
},
|
||||
formatSelection: function (item) {
|
||||
return item.CountryName;
|
||||
},
|
||||
initSelection: function (element, callback) {
|
||||
return $.get('/getCountryById', { query: element.val() }, function (data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
templateSelection: function (item) {
|
||||
return item.text || item.CountryName;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -104,12 +105,19 @@ $(function(){
|
||||
|
||||
if (typeof source === 'string') {
|
||||
options.select2.ajax = options.select2.ajax || {};
|
||||
//some default ajax params
|
||||
//default ajax params for Select2 v4.x
|
||||
if(!options.select2.ajax.data) {
|
||||
options.select2.ajax.data = function(term) {return { query:term };};
|
||||
options.select2.ajax.data = function(params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page
|
||||
};
|
||||
};
|
||||
}
|
||||
if(!options.select2.ajax.results) {
|
||||
options.select2.ajax.results = function(data) { return {results:data };};
|
||||
if(!options.select2.ajax.processResults) {
|
||||
options.select2.ajax.processResults = function(data) {
|
||||
return {results: data };
|
||||
};
|
||||
}
|
||||
options.select2.ajax.url = source;
|
||||
} else {
|
||||
@@ -126,16 +134,8 @@ $(function(){
|
||||
this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
|
||||
this.isRemote = ('ajax' in this.options.select2);
|
||||
|
||||
//store function returning ID of item
|
||||
//should be here as used inautotext for local source
|
||||
this.idFunc = this.options.select2.id;
|
||||
if (typeof(this.idFunc) !== "function") {
|
||||
var idKey = this.idFunc || 'id';
|
||||
this.idFunc = function (e) { return e[idKey]; };
|
||||
}
|
||||
|
||||
//store function that renders text in select2
|
||||
this.formatSelection = this.options.select2.formatSelection;
|
||||
this.formatSelection = this.options.select2.templateSelection;
|
||||
if (typeof(this.formatSelection) !== "function") {
|
||||
this.formatSelection = function (e) { return e.text; };
|
||||
}
|
||||
@@ -146,20 +146,8 @@ $(function(){
|
||||
$.extend(Constructor.prototype, {
|
||||
render: function() {
|
||||
this.setClass();
|
||||
|
||||
//can not apply select2 here as it calls initSelection
|
||||
//over input that does not have correct value yet.
|
||||
//apply select2 only in value2input
|
||||
//this.$input.select2(this.options.select2);
|
||||
|
||||
//when data is loaded via ajax, we need to know when it's done to populate listData
|
||||
if(this.isRemote) {
|
||||
//listen to loaded event to populate data
|
||||
this.$input.on('select2-loaded', $.proxy(function(e) {
|
||||
this.sourceData = e.items.results;
|
||||
}, this));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//trigger resize of editableform to re-position container in multi-valued mode
|
||||
if(this.isMultiple) {
|
||||
this.$input.on('change', function() {
|
||||
@@ -168,15 +156,33 @@ $(function(){
|
||||
}
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
var self = this;
|
||||
var submitting = false;
|
||||
|
||||
// Use Select2 v4.x events for autosubmit - avoid double submissions
|
||||
this.$input.on('select2:select select2:unselect', $.proxy(function(e){
|
||||
if (!submitting) {
|
||||
submitting = true;
|
||||
setTimeout(function() {
|
||||
$(self.$input).closest('form').submit();
|
||||
submitting = false;
|
||||
}, 100);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
var text = '', data,
|
||||
that = this;
|
||||
|
||||
if(this.options.select2.tags) { //in tags mode just assign value
|
||||
// Use stored selected data if available (for visual display after selection)
|
||||
if(this.selectedData && this.selectedData.length > 0) {
|
||||
data = this.selectedData;
|
||||
} else if(this.options.select2.tags) { //in tags mode just assign value
|
||||
data = value;
|
||||
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
|
||||
} else if(this.sourceData) {
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
|
||||
data = $.fn.editableutils.itemsByValue(value, this.sourceData, function(e) { return e.id; });
|
||||
} else {
|
||||
//can not get list of possible values
|
||||
//(e.g. autotext for select2 with ajax source)
|
||||
@@ -195,7 +201,6 @@ $(function(){
|
||||
|
||||
text = Array.isArray(text) ? text.join(this.options.viewseparator) : text;
|
||||
|
||||
//$(element).text(text);
|
||||
Constructor.superclass.value2html.call(this, text, element);
|
||||
},
|
||||
|
||||
@@ -204,46 +209,97 @@ $(function(){
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
|
||||
// if value array => join it anyway
|
||||
if(Array.isArray(value)) {
|
||||
value = value.join(this.getSeparator());
|
||||
}
|
||||
|
||||
//for remote source just set value, text is updated by initSelection
|
||||
// For remote sources with existing value, create option element before Select2 init
|
||||
if(this.isRemote && !this.isMultiple && value) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var text = $el.text();
|
||||
var $option = new Option(text, value, true, true);
|
||||
this.$input.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
//initialize select2 if not already done
|
||||
if(!this.$input.data('select2')) {
|
||||
this.$input.val(value);
|
||||
this.$input.select2(this.options.select2);
|
||||
} else {
|
||||
//second argument needed to separate initial change from user's click (for autosubmit)
|
||||
this.$input.val(value).trigger('change', true);
|
||||
|
||||
//Uncaught Error: cannot call val() if initSelection() is not defined
|
||||
//this.$input.select2('val', value);
|
||||
}
|
||||
|
||||
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
|
||||
// we should somehow get text for provided id.
|
||||
// The solution is to use element's text as text for that id (exclude empty)
|
||||
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
|
||||
// customId and customText are methods to extract `id` and `text` from data object
|
||||
// we can use this workaround only if user did not define these methods
|
||||
// otherwise we cant construct data object
|
||||
var customId = this.options.select2.id,
|
||||
customText = this.options.select2.formatSelection;
|
||||
|
||||
if(!customId && !customText) {
|
||||
var $el = $(this.options.scope);
|
||||
if (!$el.data('editable').isEmpty) {
|
||||
var data = {id: value, text: $el.text()};
|
||||
this.$input.select2('data', data);
|
||||
|
||||
// Set up minimal event handling AFTER initialization
|
||||
this.$input.on('select2:select', $.proxy(function(e) {
|
||||
|
||||
if (e.params && e.params.data) {
|
||||
var selectedData = e.params.data;
|
||||
this.selectedData = [selectedData];
|
||||
|
||||
// Fix Select2's visual display by ensuring the option exists and is selected
|
||||
var $existingOption = this.$input.find('option[value="' + selectedData.id + '"]');
|
||||
if ($existingOption.length === 0) {
|
||||
// Create the option if it doesn't exist
|
||||
var $option = $('<option></option>')
|
||||
.attr('value', selectedData.id)
|
||||
.text(selectedData.text)
|
||||
.prop('selected', true);
|
||||
this.$input.append($option);
|
||||
} else {
|
||||
// Make sure existing option is selected
|
||||
$existingOption.prop('selected', true);
|
||||
}
|
||||
|
||||
// Force Select2 to update its display
|
||||
this.$input.trigger('change.select2');
|
||||
|
||||
// Mark that a selection was just made (for blur handling)
|
||||
this._justSelected = true;
|
||||
}
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.$input.on('select2:unselect', $.proxy(function(e) {
|
||||
this.selectedData = [];
|
||||
}, this));
|
||||
|
||||
// Ensure Select2 doesn't interfere with x-editable's document click handling
|
||||
// by making sure clicks on Select2 elements don't stop propagation
|
||||
this.$input.on('select2:open', $.proxy(function(e) {
|
||||
// Find the Select2 dropdown container and ensure it allows document clicks to propagate
|
||||
setTimeout(function() {
|
||||
$('.select2-container--open .select2-dropdown').off('click.editable-prevent-close');
|
||||
$('.select2-container--open .select2-results').off('click.editable-prevent-close');
|
||||
}, 10);
|
||||
}, this));
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
//update value on existing select2
|
||||
this.$input.val(value).trigger('change.select2');
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
return this.$input.select2('val');
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var val = this.$input.val();
|
||||
|
||||
// --- Handle Bootstrap Datepicker ---
|
||||
var dp = this.$input.data('datepicker');
|
||||
if (dp && typeof dp.getFormattedDate === 'function') {
|
||||
val = dp.getFormattedDate(this.options.format || 'yyyy-mm-dd');
|
||||
}
|
||||
|
||||
// --- Handle Select2 v4.x ---
|
||||
if (this.$input.data('select2')) {
|
||||
var selectedData = this.$input.select2('data');
|
||||
if (selectedData && selectedData.length > 0) {
|
||||
val = this.isMultiple ? selectedData.map(function(item) { return item.id; }) : selectedData[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
|
||||
str2value: function(str, separator) {
|
||||
if(typeof str !== 'string' || !this.isMultiple) {
|
||||
@@ -265,16 +321,10 @@ $(function(){
|
||||
return val;
|
||||
},
|
||||
|
||||
autosubmit: function() {
|
||||
this.$input.on('change', function(e, isInitial){
|
||||
if(!isInitial) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeparator: function() {
|
||||
return this.options.select2.separator || $.fn.select2.defaults.separator;
|
||||
// Select2 v4.x uses different separator handling
|
||||
return this.options.select2.separator || ',';
|
||||
},
|
||||
|
||||
/*
|
||||
@@ -310,7 +360,7 @@ $(function(){
|
||||
**/
|
||||
tpl:'<input type="hidden">',
|
||||
/**
|
||||
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
|
||||
Configuration of select2. [Full list of options](https://select2.org/configuration).
|
||||
|
||||
@property select2
|
||||
@type object
|
||||
@@ -347,4 +397,4 @@ $(function(){
|
||||
|
||||
$.fn.editabletypes.select2 = Constructor;
|
||||
|
||||
}(window.jQuery));
|
||||
}(window.jQuery));
|
||||
@@ -26,7 +26,6 @@
|
||||
href="#"
|
||||
id="yes-no-switch"
|
||||
class="editable editable-click"
|
||||
data-pk="101"
|
||||
>
|
||||
Yes
|
||||
</a>
|
||||
@@ -40,7 +39,7 @@
|
||||
id="yes-no-switch-json"
|
||||
class="editable editable-click"
|
||||
data-type="select"
|
||||
data-pk="102"
|
||||
data-pk="1"
|
||||
data-title="Select Yes/No"
|
||||
>
|
||||
Yes
|
||||
@@ -56,10 +55,10 @@
|
||||
id="datepicker"
|
||||
class="editable editable-click"
|
||||
data-type="date"
|
||||
data-pk="103"
|
||||
data-pk="1"
|
||||
data-title="Select Date"
|
||||
>
|
||||
Click to select date
|
||||
Yes
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
37
test.js
37
test.js
@@ -1,15 +1,18 @@
|
||||
// debugger
|
||||
import $ from 'jquery';
|
||||
window.$ = window.jQuery = $;
|
||||
//
|
||||
console.log("jQuery version:", $.fn?.jquery);
|
||||
// // import $ from './dist/jquery';
|
||||
import "bootstrap"
|
||||
import "bootstrap/dist/css/bootstrap.min.css"
|
||||
import "bootstrap-icons/font/bootstrap-icons.min.css"
|
||||
|
||||
// bootstrap-datepicker loaded separately (not bundled in grunt build)
|
||||
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
|
||||
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
|
||||
|
||||
// Import the editable functionality (attaches to jQuery.fn) - using Grunt-built version
|
||||
require("./dist/bootstrap5-editable/js/bootstrap-editable");
|
||||
const Editable = require("bootstrap5-editable/js/bootstrap-editable");
|
||||
console.log("Editable:", Editable);
|
||||
$.fn.editable.defaults.mode = 'inline';
|
||||
|
||||
$(function() {
|
||||
@@ -20,12 +23,18 @@ $(function() {
|
||||
source: 'test.php', // URL to fetch select options
|
||||
value: 1,
|
||||
success: function(response, newValue) {
|
||||
// Handle success
|
||||
console.log("Saved successfully:", response);
|
||||
},
|
||||
error: function(response) {
|
||||
// Handle error
|
||||
console.error("Save error:", response);
|
||||
}
|
||||
});
|
||||
console.log("Internal editable data:", $('#yes-no-switch').data('editable'));
|
||||
const ed = $('#yes-no-switch').data('editable');
|
||||
console.log("Internal editable data:", ed);
|
||||
if (ed) {
|
||||
console.log("TYPE:", ed.type, "OPTIONS:", ed.options);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -39,19 +48,16 @@ $(function() {
|
||||
],
|
||||
value: 1,
|
||||
success: function(response, newValue) {
|
||||
// Handle success
|
||||
console.log("Static source saved successfully:", response);
|
||||
},
|
||||
error: function(response) {
|
||||
// Handle error
|
||||
console.error("Static source save error:", response);
|
||||
}
|
||||
});
|
||||
|
||||
const initialDateValue = new Date().toISOString().split('T')[0];
|
||||
|
||||
$('#datepicker').editable({
|
||||
type: 'date',
|
||||
url: 'test.php', // URL to send the POST request
|
||||
value: initialDateValue, // Set to current date (YYYY-MM-DD)
|
||||
format: 'yyyy-mm-dd', // Date format
|
||||
viewformat: 'dd/mm/yyyy', // How the user sees it
|
||||
datepicker: {
|
||||
@@ -60,11 +66,18 @@ $(function() {
|
||||
todayHighlight: true
|
||||
},
|
||||
success: (response, newValue)=> {
|
||||
// Handle success
|
||||
console.log("Date saved successfully:", response);
|
||||
},
|
||||
error: (response) => {
|
||||
// Handle error
|
||||
console.error("Date save error:", response);
|
||||
}
|
||||
}).on('shown', (e, editable)=> {
|
||||
console.log("Datepicker shown:", editable);
|
||||
$(editable.input.$input).datepicker({
|
||||
weekStart: 1,
|
||||
autoclose: true,
|
||||
todayHighlight: true
|
||||
}).datepicker('show')
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
@@ -46,7 +46,6 @@ module.exports = [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{ from: "src/editable-form/editable-form.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
|
||||
{ from: "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
|
||||
{ from: "node_modules/bootstrap-icons/font/fonts", to: path.resolve(__dirname, "dist/fonts") }
|
||||
]
|
||||
})
|
||||
@@ -55,7 +54,7 @@ module.exports = [
|
||||
|
||||
// X-Editable Plugin (Bootstrap 5)
|
||||
{
|
||||
entry: "./src/bootstrap5-editable.js",
|
||||
entry: "./src/editable-form/editable-form-bootstrap5.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist/bootstrap5-editable/js"), // X-Editable stays here
|
||||
filename: "bootstrap-editable.js",
|
||||
|
||||
Reference in New Issue
Block a user