react-bootstrap-plugins 1.0.3 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -270
- package/dist/DatePicker.cjs +2 -2
- package/dist/DatePicker.d.cts +57 -0
- package/dist/DatePicker.d.ts +54 -42
- package/dist/DatePicker.js +2 -2
- package/dist/Label.cjs +2 -2
- package/dist/Label.d.cts +15 -0
- package/dist/Label.d.ts +12 -13
- package/dist/Label.js +2 -2
- package/dist/SearchSelect.cjs +2 -2
- package/dist/SearchSelect.d.cts +40 -0
- package/dist/SearchSelect.d.ts +37 -25
- package/dist/SearchSelect.js +2 -2
- package/dist/TableLoading.cjs +2 -0
- package/dist/TableLoading.d.cts +13 -0
- package/dist/TableLoading.d.ts +13 -0
- package/dist/TableLoading.js +2 -0
- package/dist/chunk-2Q4NZKMX.cjs +2 -0
- package/dist/chunk-5IOLZUVD.cjs +2 -0
- package/dist/chunk-7LXLWNUR.js +2 -0
- package/dist/chunk-AWU5XGMI.cjs +2 -0
- package/dist/chunk-ES5ABK5L.js +2 -0
- package/dist/chunk-GZ2D7HTS.cjs +2 -0
- package/dist/chunk-HYB5IGJK.js +2 -0
- package/dist/chunk-NPQQDBFB.cjs +2 -0
- package/dist/chunk-RR7TBRGI.js +2 -0
- package/dist/chunk-ZCAQ7S2A.js +2 -0
- package/dist/css/datepicker.css +1 -299
- package/dist/css/plugins.css +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +5 -0
- package/dist/index.d.ts +5 -10
- package/dist/index.js +2 -2
- package/docs/DATEPICKER.md +157 -0
- package/docs/LABEL.md +89 -0
- package/docs/SEARCHSELECT.md +123 -0
- package/docs/TABLELOADING.md +98 -0
- package/package.json +29 -10
- package/dist/DatePicker.cjs.map +0 -1
- package/dist/DatePicker.js.map +0 -1
- package/dist/Label.cjs.map +0 -1
- package/dist/Label.js.map +0 -1
- package/dist/SearchSelect.cjs.map +0 -1
- package/dist/SearchSelect.js.map +0 -1
- package/dist/chunk-46AJ2Q5H.js +0 -2
- package/dist/chunk-46AJ2Q5H.js.map +0 -1
- package/dist/chunk-4ISYCPRB.cjs +0 -2
- package/dist/chunk-4ISYCPRB.cjs.map +0 -1
- package/dist/chunk-CZV7QBHA.cjs +0 -2
- package/dist/chunk-CZV7QBHA.cjs.map +0 -1
- package/dist/chunk-DIUGH74M.js +0 -2
- package/dist/chunk-DIUGH74M.js.map +0 -1
- package/dist/chunk-F3KMQZXU.js +0 -2
- package/dist/chunk-F3KMQZXU.js.map +0 -1
- package/dist/chunk-HBS6VOGV.cjs +0 -2
- package/dist/chunk-HBS6VOGV.cjs.map +0 -1
- package/dist/chunk-NOGRIWSU.js +0 -2
- package/dist/chunk-NOGRIWSU.js.map +0 -1
- package/dist/chunk-QQNPKA7A.cjs +0 -2
- package/dist/chunk-QQNPKA7A.cjs.map +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/src/components/DatePicker.d.ts +0 -45
- package/src/components/DatePicker.jsx +0 -690
- package/src/components/Label.d.ts +0 -16
- package/src/components/Label.jsx +0 -21
- package/src/components/SearchSelect.d.ts +0 -28
- package/src/components/SearchSelect.jsx +0 -152
- package/src/css/datepicker.css +0 -299
- package/src/index.js +0 -15
- package/src/lib/cn.js +0 -35
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function i(...r){let e=[];for(let n of r)if(n){if(typeof n=="string")e.push(n);else if(Array.isArray(n)){let s=i(...n);s&&e.push(s);}else if(typeof n=="object")for(let[s,t]of Object.entries(n))t&&e.push(s);}return e.join(" ")}export{i as a};//# sourceMappingURL=chunk-RR7TBRGI.js.map
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9saWIvY24udHMiXSwibmFtZXMiOlsiY24iLCJhcmdzIiwiY2xhc3NlcyIsImFyZyIsIm5lc3RlZCIsImtleSIsInZhbHVlIl0sIm1hcHBpbmdzIjoiQUFjTyxTQUFTQSxDQUFBQSxDQUFBQSxHQUFNQyxDQUFBQSxDQUF1QixDQUMzQyxJQUFNQyxDQUFBQSxDQUFvQixFQUFDLENBRTNCLElBQUEsSUFBV0MsQ0FBQUEsSUFBT0YsQ0FBQUEsQ0FDaEIsR0FBS0UsQ0FBQUEsQ0FBQUEsQ0FFTCxHQUFJLE9BQU9BLENBQUFBLEVBQVEsUUFBQSxDQUNqQkQsQ0FBQUEsQ0FBUSxJQUFBLENBQUtDLENBQUcsQ0FBQSxDQUFBLEtBQUEsR0FDUCxLQUFBLENBQU0sT0FBQSxDQUFRQSxDQUFHLENBQUEsQ0FBRyxDQUM3QixJQUFNQyxDQUFBQSxDQUFTSixDQUFBQSxDQUFHLEdBQUdHLENBQUcsQ0FBQSxDQUNwQkMsQ0FBQUEsRUFBUUYsQ0FBQUEsQ0FBUSxJQUFBLENBQUtFLENBQU0sRUFDakMsQ0FBQSxLQUFBLEdBQVcsT0FBT0QsQ0FBQUEsRUFBUSxRQUFBLENBQ3hCLElBQUEsR0FBVyxDQUFDRSxDQUFBQSxDQUFLQyxDQUFLLENBQUEsR0FBSyxNQUFBLENBQU8sT0FBQSxDQUFRSCxDQUFHLENBQUEsQ0FDdkNHLENBQUFBLEVBQU9KLENBQUFBLENBQVEsSUFBQSxDQUFLRyxDQUFHLEVBQUEsQ0FLakMsT0FBT0gsQ0FBQUEsQ0FBUSxJQUFBLENBQUssR0FBRyxDQUN6QiIsImZpbGUiOiJjaHVuay1SUjdUQlJHSS5qcyIsInNvdXJjZXNDb250ZW50IjpbInR5cGUgQ25BcmcgPSBzdHJpbmcgfCBmYWxzZSB8IG51bGwgfCB1bmRlZmluZWQgfCBDbkFyZ1tdIHwgUmVjb3JkPHN0cmluZywgYm9vbGVhbiB8IHVuZGVmaW5lZCB8IG51bGw+XG5cbi8qKlxuICogVXRpbGl0eSBmb3IgY29uZGl0aW9uYWxseSBqb2luaW5nIENTUyBjbGFzcyBuYW1lcyB0b2dldGhlci5cbiAqIEZpbHRlcnMgb3V0IGZhbHN5IHZhbHVlcyBhbmQgam9pbnMgd2l0aCBzcGFjZS5cbiAqXG4gKiBAZXhhbXBsZVxuICogY24oJ2J0bicsIGlzQWN0aXZlICYmICdidG4tcHJpbWFyeScsICdweC0zJylcbiAqIC8vID0+ICdidG4gYnRuLXByaW1hcnkgcHgtMydcbiAqXG4gKiBAZXhhbXBsZVxuICogY24oJ2Jhc2UtY2xhc3MnLCB7ICdhY3RpdmUnOiBpc0FjdGl2ZSwgJ2Rpc2FibGVkJzogaXNEaXNhYmxlZCB9KVxuICogLy8gPT4gJ2Jhc2UtY2xhc3MgYWN0aXZlJyAgKHdoZW4gaXNBY3RpdmU9dHJ1ZSwgaXNEaXNhYmxlZD1mYWxzZSlcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGNuKC4uLmFyZ3M6IENuQXJnW10pOiBzdHJpbmcge1xuICBjb25zdCBjbGFzc2VzOiBzdHJpbmdbXSA9IFtdXG5cbiAgZm9yIChjb25zdCBhcmcgb2YgYXJncykge1xuICAgIGlmICghYXJnKSBjb250aW51ZVxuXG4gICAgaWYgKHR5cGVvZiBhcmcgPT09ICdzdHJpbmcnKSB7XG4gICAgICBjbGFzc2VzLnB1c2goYXJnKVxuICAgIH0gZWxzZSBpZiAoQXJyYXkuaXNBcnJheShhcmcpKSB7XG4gICAgICBjb25zdCBuZXN0ZWQgPSBjbiguLi5hcmcpXG4gICAgICBpZiAobmVzdGVkKSBjbGFzc2VzLnB1c2gobmVzdGVkKVxuICAgIH0gZWxzZSBpZiAodHlwZW9mIGFyZyA9PT0gJ29iamVjdCcpIHtcbiAgICAgIGZvciAoY29uc3QgW2tleSwgdmFsdWVdIG9mIE9iamVjdC5lbnRyaWVzKGFyZykpIHtcbiAgICAgICAgaWYgKHZhbHVlKSBjbGFzc2VzLnB1c2goa2V5KVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiBjbGFzc2VzLmpvaW4oJyAnKVxufVxuIl19
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {a}from'./chunk-RR7TBRGI.js';import*as t from'react';import {jsxs,jsx}from'react/jsx-runtime';var H=({className:y,options:r=[],labelKey:d="label",valueKey:m="value",placeholder:x="Select...",value:f=null,onChange:p,id:g="filterable-select",name:E,disabled:h=false,...N},s)=>{let[L,l]=t.useState(false),[S,c]=t.useState(""),i=t.useRef(null),R=r.length>0&&(typeof r[0]=="string"||typeof r[0]=="number"||typeof r[0]=="boolean"),o=e=>R?String(e):e?.[d]||"",u=e=>R?e:e?.[m]??null,T=r.find(e=>u(e)===f);t.useEffect(()=>{c(T!==void 0?o(T):"");},[f,r,d,m]);let v=r.filter(e=>o(e).toLowerCase().includes(S.toLowerCase()));t.useEffect(()=>{let e=a=>{i.current&&!i.current.contains(a.target)&&l(false);};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);let k=e=>{let a=u(e);c(o(e)),l(false),p&&p({target:{value:a,name:E||g}});};return jsxs("div",{ref:e=>{i.current=e,typeof s=="function"?s(e):s&&(s.current=e);},className:a("searchselect-wrapper position-relative ",y),style:{minWidth:0},...N,children:[jsx("input",{id:g,type:"text",className:"form-select",placeholder:x,value:S,disabled:h,onChange:e=>{c(e.target.value),l(true);},onFocus:()=>l(true),style:{cursor:"text",borderRadius:"inherit"}}),L&&!h&&jsx("ul",{className:"dropdown-menu show w-100 overflow-x-hidden",style:{maxHeight:"200px",marginTop:"2px",zIndex:1050,borderRadius:"0.375rem",boxShadow:"0 0.5rem 1rem rgba(0,0,0,0.15)"},children:v.length>0?v.map((e,a)=>{let C=u(e)??`option-${a}`;return jsx("li",{children:jsx("button",{type:"button",className:"dropdown-item text-truncate",onClick:()=>k(e),children:o(e)})},C)}):jsx("li",{children:jsx("span",{className:"dropdown-item disabled text-muted",style:{cursor:"default"},children:"No options found"})})})]})},w=t.forwardRef(H);w.displayName="SearchSelect";var D=w;export{w as a,D as b};//# sourceMappingURL=chunk-ZCAQ7S2A.js.map
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jb21wb25lbnRzL1NlYXJjaFNlbGVjdC50c3giXSwibmFtZXMiOlsiU2VhcmNoU2VsZWN0SW5uZXIiLCJjbGFzc05hbWUiLCJvcHRpb25zIiwibGFiZWxLZXkiLCJ2YWx1ZUtleSIsInBsYWNlaG9sZGVyIiwidmFsdWUiLCJvbkNoYW5nZSIsImlkIiwibmFtZSIsImRpc2FibGVkIiwicHJvcHMiLCJyZWYiLCJpc09wZW4iLCJzZXRJc09wZW4iLCJzZWFyY2hUZXJtIiwic2V0U2VhcmNoVGVybSIsIndyYXBwZXJSZWYiLCJpc1ByaW1pdGl2ZUFycmF5IiwiZ2V0TGFiZWwiLCJvcHRpb24iLCJnZXRWYWx1ZSIsInNlbGVjdGVkT3B0aW9uIiwib3B0IiwiZmlsdGVyZWRPcHRpb25zIiwiaGFuZGxlQ2xpY2tPdXRzaWRlIiwiZXZlbnQiLCJoYW5kbGVTZWxlY3QiLCJzZWxlY3RlZFZhbHVlIiwianN4cyIsIm5vZGUiLCJjbiIsImpzeCIsImluZGV4Iiwia2V5IiwiU2VhcmNoU2VsZWN0IiwiU2VhcmNoU2VsZWN0X2RlZmF1bHQiXSwibWFwcGluZ3MiOiJxR0FtQ0EsSUFBTUEsRUFBb0IsQ0FBSyxDQUMzQixVQUFBQyxDQUFBQSxDQUNBLE9BQUEsQ0FBQUMsRUFBVSxFQUFDLENBQ1gsU0FBQUMsQ0FBQUEsQ0FBVyxPQUFBLENBQ1gsUUFBQSxDQUFBQyxDQUFBQSxDQUFXLFFBQ1gsV0FBQSxDQUFBQyxDQUFBQSxDQUFjLFlBQ2QsS0FBQSxDQUFBQyxDQUFBQSxDQUFRLEtBQ1IsUUFBQSxDQUFBQyxDQUFBQSxDQUNBLEdBQUFDLENBQUFBLENBQUssbUJBQUEsQ0FDTCxLQUFBQyxDQUFBQSxDQUNBLFFBQUEsQ0FBQUMsRUFBVyxLQUFBLENBQ1gsR0FBR0MsQ0FDTCxDQUFBLENBQStEQyxDQUFBQSxHQUE0QyxDQUN6RyxHQUFNLENBQUNDLENBQUFBLENBQVFDLENBQVMsRUFBVSxDQUFBLENBQUEsUUFBQSxDQUFTLEtBQUssRUFDMUMsQ0FBQ0MsQ0FBQUEs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WkNBUTdTMkEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vbGliL2NuLmpzJ1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlYXJjaFNlbGVjdFByb3BzPFQgPSB1bmtub3duPiB7XG4gIC8qKiBBZGRpdGlvbmFsIENTUyBjbGFzc2VzIG9uIHRoZSB3cmFwcGVyICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKiogU2VsZWN0YWJsZSBvcHRpb25zIOKAlCBwcmltaXRpdmVzIChzdHJpbmd8bnVtYmVyfGJvb2xlYW4pIG9yIG9iamVjdHMgKi9cbiAgb3B0aW9ucz86IFRbXVxuICAvKiogS2V5IGZvciBkaXNwbGF5IHRleHQgd2hlbiBvcHRpb25zIGFyZSBvYmplY3RzIChkZWZhdWx0ICdsYWJlbCcpICovXG4gIGxhYmVsS2V5Pzogc3RyaW5nXG4gIC8qKiBLZXkgZm9yIHRoZSB2YWx1ZSB3aGVuIG9wdGlvbnMgYXJlIG9iamVjdHMgKGRlZmF1bHQgJ3ZhbHVlJykgKi9cbiAgdmFsdWVLZXk/OiBzdHJpbmdcbiAgLyoqIFBsYWNlaG9sZGVyIHRleHQgKGRlZmF1bHQgJ1NlbGVjdC4uLicpICovXG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nXG4gIC8qKiBDdXJyZW50bHkgc2VsZWN0ZWQgdmFsdWUgKi9cbiAgdmFsdWU/OiBUIHwgbnVsbFxuICAvKiogQ2FsbGVkIHdpdGggc3ludGhldGljIGV2ZW50OyBlLnRhcmdldC52YWx1ZSBpcyB0aGUgc2VsZWN0ZWQgdmFsdWUsIGUudGFyZ2V0Lm5hbWUgaXMgdGhlIGlucHV0IG5hbWUgKi9cbiAgb25DaGFuZ2U/OiAoZTogeyB0YXJnZXQ6IHsgdmFsdWU6IFQgfCBudWxsOyBuYW1lOiBzdHJpbmcgfSB9KSA9PiB2b2lkXG4gIC8qKiBJbnB1dCBlbGVtZW50IElEICovXG4gIGlkPzogc3RyaW5nXG4gIC8qKiBJbnB1dCBuYW1lIGF0dHJpYnV0ZSDigJQgc3VyZmFjZXMgYXMgZS50YXJnZXQubmFtZSBpbiBvbkNoYW5nZSAqL1xuICBuYW1lPzogc3RyaW5nXG4gIC8qKiBEaXNhYmxlIHRoZSBpbnB1dCAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW5cbn1cblxuLyoqXG4gKiBBIGZpbHRlcmFibGUsIHNlYXJjaGFibGUgc2VsZWN0IGRyb3Bkb3duIHN0eWxlZCB3aXRoIEJvb3RzdHJhcCA1LlxuICogU3VwcG9ydHMgYm90aCBwcmltaXRpdmUgYXJyYXlzIGFuZCBvYmplY3QgYXJyYXlzIHdpdGggY29uZmlndXJhYmxlIGxhYmVsL3ZhbHVlIGtleXMuXG4gKi9cbmludGVyZmFjZSBTZWFyY2hTZWxlY3RDb21wb25lbnQge1xuICA8VD4ocHJvcHM6IFNlYXJjaFNlbGVjdFByb3BzPFQ+ICYgUmVhY3QuUmVmQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pOiBSZWFjdC5SZWFjdEVsZW1lbnQgfCBudWxsXG4gIGRpc3BsYXlOYW1lPzogc3RyaW5nXG59XG5cbmNvbnN0IFNlYXJjaFNlbGVjdElubmVyID0gPFQsPih7XG4gICAgY2xhc3NOYW1lLFxuICAgIG9wdGlvbnMgPSBbXSBhcyBUW10sXG4gICAgbGFiZWxLZXkgPSAnbGFiZWwnLFxuICAgIHZhbHVlS2V5ID0gJ3ZhbHVlJyxcbiAgICBwbGFjZWhvbGRlciA9ICdTZWxlY3QuLi4nLFxuICAgIHZhbHVlID0gbnVsbCxcbiAgICBvbkNoYW5nZSxcbiAgICBpZCA9ICdmaWx0ZXJhYmxlLXNlbGVjdCcsXG4gICAgbmFtZSxcbiAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgIC4uLnByb3BzXG4gIH06IFNlYXJjaFNlbGVjdFByb3BzPFQ+ICYgUmVhY3QuUmVmQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4sIHJlZjogUmVhY3QuRm9yd2FyZGVkUmVmPEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSlcbiAgICBjb25zdCBbc2VhcmNoVGVybSwgc2V0U2VhcmNoVGVybV0gPSBSZWFjdC51c2VTdGF0ZSgnJylcbiAgICBjb25zdCB3cmFwcGVyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKVxuXG4gICAgLy8gQVVUTy1ERVRFQ1Q6IHByaW1pdGl2ZXMgdnMgb2JqZWN0c1xuICAgIGNvbnN0IGlzUHJpbWl0aXZlQXJyYXkgPSBvcHRpb25zLmxlbmd0aCA+IDAgJiZcbiAgICAgICh0eXBlb2Ygb3B0aW9uc1swXSA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIG9wdGlvbnNbMF0gPT09ICdudW1iZXInIHx8IHR5cGVvZiBvcHRpb25zWzBdID09PSAnYm9vbGVhbicpXG5cbiAgICBjb25zdCBnZXRMYWJlbCA9IChvcHRpb246IFQpOiBzdHJpbmcgPT4ge1xuICAgICAgaWYgKGlzUHJpbWl0aXZlQXJyYXkpIHJldHVybiBTdHJpbmcob3B0aW9uKVxuICAgICAgcmV0dXJuIChvcHRpb24gYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pPy5bbGFiZWxLZXldIGFzIHN0cmluZyB8fCAnJ1xuICAgIH1cblxuICAgIGNvbnN0IGdldFZhbHVlID0gKG9wdGlvbjogVCk6IFQgfCBudWxsID0+IHtcbiAgICAgIGlmIChpc1ByaW1pdGl2ZUFycmF5KSByZXR1cm4gb3B0aW9uXG4gICAgICByZXR1cm4gKChvcHRpb24gYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pPy5bdmFsdWVLZXldIGFzIFQpID8/IG51bGxcbiAgICB9XG5cbiAgICBjb25zdCBzZWxlY3RlZE9wdGlvbiA9IG9wdGlvbnMuZmluZChvcHQgPT4gZ2V0VmFsdWUob3B0KSA9PT0gdmFsdWUpXG5cbiAgICAvLyBTeW5jIGlucHV0IHdoZW4gdmFsdWUgY2hhbmdlcyBleHRlcm5hbGx5XG4gICAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmIChzZWxlY3RlZE9wdGlvbiAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgIHNldFNlYXJjaFRlcm0oZ2V0TGFiZWwoc2VsZWN0ZWRPcHRpb24pKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0U2VhcmNoVGVybSgnJylcbiAgICAgIH1cbiAgICB9LCBbdmFsdWUsIG9wdGlvbnMsIGxhYmVsS2V5LCB2YWx1ZUtleV0pXG5cbiAgICAvLyBGaWx0ZXIgb3B0aW9uc1xuICAgIGNvbnN0IGZpbHRlcmVkT3B0aW9ucyA9IG9wdGlvbnMuZmlsdGVyKG9wdGlvbiA9PlxuICAgICAgZ2V0TGFiZWwob3B0aW9uKS50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKHNlYXJjaFRlcm0udG9Mb3dlckNhc2UoKSlcbiAgICApXG5cbiAgICAvLyBDbGljayBvdXRzaWRlIHRvIGNsb3NlXG4gICAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGNvbnN0IGhhbmRsZUNsaWNrT3V0c2lkZSA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBpZiAod3JhcHBlclJlZi5jdXJyZW50ICYmICF3cmFwcGVyUmVmLmN1cnJlbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpKSB7XG4gICAgICAgICAgc2V0SXNPcGVuKGZhbHNlKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBoYW5kbGVDbGlja091dHNpZGUpXG4gICAgICByZXR1cm4gKCkgPT4gZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKVxuICAgIH0sIFtdKVxuXG4gICAgY29uc3QgaGFuZGxlU2VsZWN0ID0gKG9wdGlvbjogVCkgPT4ge1xuICAgICAgY29uc3Qgc2VsZWN0ZWRWYWx1ZSA9IGdldFZhbHVlKG9wdGlvbilcbiAgICAgIHNldFNlYXJjaFRlcm0oZ2V0TGFiZWwob3B0aW9uKSlcbiAgICAgIHNldElzT3BlbihmYWxzZSlcbiAgICAgIGlmIChvbkNoYW5nZSkgb25DaGFuZ2UoeyB0YXJnZXQ6IHsgdmFsdWU6IHNlbGVjdGVkVmFsdWUsIG5hbWU6IG5hbWUgfHwgaWQgfSB9KVxuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17KG5vZGUpID0+IHtcbiAgICAgICAgICB3cmFwcGVyUmVmLmN1cnJlbnQgPSBub2RlXG4gICAgICAgICAgaWYgKHR5cGVvZiByZWYgPT09ICdmdW5jdGlvbicpIHJlZihub2RlKVxuICAgICAgICAgIGVsc2UgaWYgKHJlZikgcmVmLmN1cnJlbnQgPSBub2RlXG4gICAgICAgIH19XG4gICAgICAgIGNsYXNzTmFtZT17Y24oJ3NlYXJjaHNlbGVjdC13cmFwcGVyIHBvc2l0aW9uLXJlbGF0aXZlICcsIGNsYXNzTmFtZSl9XG4gICAgICAgIHN0eWxlPXt7IG1pbldpZHRoOiAwIH19XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICBjbGFzc05hbWU9XCJmb3JtLXNlbGVjdFwiXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIHZhbHVlPXtzZWFyY2hUZXJtfVxuICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICBvbkNoYW5nZT17KGUpID0+IHtcbiAgICAgICAgICAgIHNldFNlYXJjaFRlcm0oZS50YXJnZXQudmFsdWUpXG4gICAgICAgICAgICBzZXRJc09wZW4odHJ1ZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG9uRm9jdXM9eygpID0+IHNldElzT3Blbih0cnVlKX1cbiAgICAgICAgICBzdHlsZT17eyBjdXJzb3I6ICd0ZXh0JywgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcgfX1cbiAgICAgICAgLz5cblxuICAgICAgICB7aXNPcGVuICYmICFkaXNhYmxlZCAmJiAoXG4gICAgICAgICAgPHVsXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJkcm9wZG93bi1tZW51IHNob3cgdy0xMDAgb3ZlcmZsb3cteC1oaWRkZW5cIlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgbWF4SGVpZ2h0OiAnMjAwcHgnLFxuICAgICAgICAgICAgICBtYXJnaW5Ub3A6ICcycHgnLFxuICAgICAgICAgICAgICB6SW5kZXg6IDEwNTAsXG4gICAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzAuMzc1cmVtJyxcbiAgICAgICAgICAgICAgYm94U2hhZG93OiAnMCAwLjVyZW0gMXJlbSByZ2JhKDAsMCwwLDAuMTUpJyxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2ZpbHRlcmVkT3B0aW9ucy5sZW5ndGggPiAwID8gKFxuICAgICAgICAgICAgICBmaWx0ZXJlZE9wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICAgICAgY29uc3Qga2V5ID0gKGdldFZhbHVlKG9wdGlvbikgYXMgc3RyaW5nIHwgbnVtYmVyKSA/PyBgb3B0aW9uLSR7aW5kZXh9YFxuICAgICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgICA8bGkga2V5PXtrZXl9PlxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwiZHJvcGRvd24taXRlbSB0ZXh0LXRydW5jYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBoYW5kbGVTZWxlY3Qob3B0aW9uKX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHtnZXRMYWJlbChvcHRpb24pfVxuICAgICAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImRyb3Bkb3duLWl0ZW0gZGlzYWJsZWQgdGV4dC1tdXRlZFwiIHN0eWxlPXt7IGN1cnNvcjogJ2RlZmF1bHQnIH19PlxuICAgICAgICAgICAgICAgICAgTm8gb3B0aW9ucyBmb3VuZFxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxuXG5jb25zdCBTZWFyY2hTZWxlY3QgPSBSZWFjdC5mb3J3YXJkUmVmKFNlYXJjaFNlbGVjdElubmVyKSBhcyBTZWFyY2hTZWxlY3RDb21wb25lbnRcblNlYXJjaFNlbGVjdC5kaXNwbGF5TmFtZSA9ICdTZWFyY2hTZWxlY3QnXG5cbmV4cG9ydCBkZWZhdWx0IFNlYXJjaFNlbGVjdFxuZXhwb3J0IHsgU2VhcmNoU2VsZWN0IH1cbiJdfQ==
|
package/dist/css/datepicker.css
CHANGED
|
@@ -1,299 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Custom DatePicker — Bootstrap 5 design tokens
|
|
3
|
-
Zero dependencies. Calendar grid + time picker + year picker + datetime combo.
|
|
4
|
-
Popover is portaled to document.body — positioning is set inline by JS.
|
|
5
|
-
========================================================================== */
|
|
6
|
-
|
|
7
|
-
/* --- Popover container --- */
|
|
8
|
-
.datepicker-popover {
|
|
9
|
-
border-radius: var(--bs-border-radius, 0.375rem);
|
|
10
|
-
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
11
|
-
user-select: none;
|
|
12
|
-
-webkit-user-select: none;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.datepicker-popover--wide {
|
|
16
|
-
min-width: 420px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/* --- Calendar panel --- */
|
|
20
|
-
.datepicker-calendar {
|
|
21
|
-
min-width: 260px;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* 7-column day-of-week header + day grid */
|
|
25
|
-
.datepicker-days-header,
|
|
26
|
-
.datepicker-days-grid {
|
|
27
|
-
display: grid;
|
|
28
|
-
grid-template-columns: repeat(7, 1fr);
|
|
29
|
-
gap: 2px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/* Day-of-week label */
|
|
33
|
-
.datepicker-day-label {
|
|
34
|
-
font-size: 0.7rem;
|
|
35
|
-
font-weight: 600;
|
|
36
|
-
color: var(--bs-secondary-color, #6c757d);
|
|
37
|
-
text-transform: uppercase;
|
|
38
|
-
text-align: center;
|
|
39
|
-
padding: 2px 0;
|
|
40
|
-
width: 34px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* Individual day cell */
|
|
44
|
-
.datepicker-day {
|
|
45
|
-
width: 34px;
|
|
46
|
-
height: 34px;
|
|
47
|
-
display: flex;
|
|
48
|
-
align-items: center;
|
|
49
|
-
justify-content: center;
|
|
50
|
-
font-size: 0.8rem;
|
|
51
|
-
font-weight: 400;
|
|
52
|
-
color: var(--bs-body-color, #212529);
|
|
53
|
-
background: transparent;
|
|
54
|
-
border: none;
|
|
55
|
-
border-radius: var(--bs-border-radius-sm, 0.25rem);
|
|
56
|
-
cursor: pointer;
|
|
57
|
-
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
|
|
58
|
-
padding: 0;
|
|
59
|
-
margin: 0 auto;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
|
|
63
|
-
background-color: var(--bs-primary-bg-subtle, #cfe2ff);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Today */
|
|
67
|
-
.datepicker-day--today {
|
|
68
|
-
font-weight: 700;
|
|
69
|
-
border: 1px solid var(--bs-border-color, #dee2e6);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Selected (Bootstrap primary) */
|
|
73
|
-
.datepicker-day--selected {
|
|
74
|
-
background-color: var(--bs-primary, #0d6efd) !important;
|
|
75
|
-
color: #fff !important;
|
|
76
|
-
font-weight: 600;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/* Outside current month */
|
|
80
|
-
.datepicker-day--outside {
|
|
81
|
-
color: var(--bs-tertiary-color, #adb5bd);
|
|
82
|
-
opacity: 0.45;
|
|
83
|
-
pointer-events: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/* Disabled (outside min/max range) */
|
|
87
|
-
.datepicker-day--disabled {
|
|
88
|
-
color: var(--bs-tertiary-color, #adb5bd);
|
|
89
|
-
opacity: 0.35;
|
|
90
|
-
cursor: not-allowed;
|
|
91
|
-
pointer-events: none;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* --- Year picker --- */
|
|
95
|
-
.datepicker-year-picker {
|
|
96
|
-
min-width: 260px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/* 4-column year grid */
|
|
100
|
-
.datepicker-year-grid {
|
|
101
|
-
display: grid;
|
|
102
|
-
grid-template-columns: repeat(4, 1fr);
|
|
103
|
-
gap: 6px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.datepicker-year-cell {
|
|
107
|
-
font-size: 0.85rem;
|
|
108
|
-
padding: 6px 4px;
|
|
109
|
-
text-align: center;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/* --- Time panel --- */
|
|
113
|
-
.datepicker-time {
|
|
114
|
-
min-width: 120px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/* Three-column scrollable time picker */
|
|
118
|
-
.datepicker-time-col {
|
|
119
|
-
display: flex;
|
|
120
|
-
flex-direction: column;
|
|
121
|
-
align-items: center;
|
|
122
|
-
flex: 0 0 auto;
|
|
123
|
-
width: 52px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.datepicker-time-col-label {
|
|
127
|
-
font-size: 0.6rem;
|
|
128
|
-
font-weight: 600;
|
|
129
|
-
color: var(--bs-secondary-color, #6c757d);
|
|
130
|
-
text-transform: uppercase;
|
|
131
|
-
letter-spacing: 0.04em;
|
|
132
|
-
margin-bottom: 2px;
|
|
133
|
-
user-select: none;
|
|
134
|
-
-webkit-user-select: none;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.datepicker-time-col-scroll {
|
|
138
|
-
display: flex;
|
|
139
|
-
flex-direction: column;
|
|
140
|
-
align-items: center;
|
|
141
|
-
gap: 1px;
|
|
142
|
-
overflow-y: scroll;
|
|
143
|
-
scrollbar-width: none; /* Firefox */
|
|
144
|
-
-ms-overflow-style: none; /* IE/Edge */
|
|
145
|
-
height: 220px;
|
|
146
|
-
scroll-behavior: smooth;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.datepicker-time-col-scroll::-webkit-scrollbar {
|
|
150
|
-
display: none; /* Chrome/Safari/Opera */
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.datepicker-time-item {
|
|
154
|
-
width: 44px;
|
|
155
|
-
height: 30px;
|
|
156
|
-
display: flex;
|
|
157
|
-
align-items: center;
|
|
158
|
-
justify-content: center;
|
|
159
|
-
font-size: 0.82rem;
|
|
160
|
-
font-weight: 500;
|
|
161
|
-
color: var(--bs-body-color, #212529);
|
|
162
|
-
background: transparent;
|
|
163
|
-
border: none;
|
|
164
|
-
border-radius: var(--bs-border-radius-sm, 0.25rem);
|
|
165
|
-
cursor: pointer;
|
|
166
|
-
transition: background-color 0.1s ease, color 0.1s ease;
|
|
167
|
-
padding: 0;
|
|
168
|
-
flex-shrink: 0;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.datepicker-time-item:hover {
|
|
172
|
-
background-color: var(--bs-primary-bg-subtle, #cfe2ff);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.datepicker-time-item.active {
|
|
176
|
-
background-color: var(--bs-primary, #0d6efd);
|
|
177
|
-
color: #fff;
|
|
178
|
-
font-weight: 600;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/* AM/PM items — slightly taller since only 2 */
|
|
182
|
-
.datepicker-time-item--ampm {
|
|
183
|
-
height: 36px;
|
|
184
|
-
width: 46px;
|
|
185
|
-
font-size: 0.78rem;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.datepicker-time-separator {
|
|
189
|
-
font-size: 1.1rem;
|
|
190
|
-
font-weight: 600;
|
|
191
|
-
color: var(--bs-body-color, #212529);
|
|
192
|
-
align-self: center;
|
|
193
|
-
margin-top: 14px;
|
|
194
|
-
flex: 0 0 auto;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/* Footer bar (Today/Now + Clear) */
|
|
198
|
-
.datepicker-footer {
|
|
199
|
-
border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
|
|
200
|
-
border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/* --- Dark mode --- */
|
|
204
|
-
[data-bs-theme="dark"] .datepicker-popover {
|
|
205
|
-
background-color: var(--bs-body-bg, #212529);
|
|
206
|
-
border-color: var(--bs-border-color, #495057);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
[data-bs-theme="dark"] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
|
|
210
|
-
background-color: var(--bs-primary-bg-subtle, #2c3e50);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
[data-bs-theme="dark"] .datepicker-time-item:hover {
|
|
214
|
-
background-color: var(--bs-primary-bg-subtle, #2c3e50);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
[data-bs-theme="dark"] .datepicker-time-item.active {
|
|
218
|
-
background-color: var(--bs-primary, #0d6efd);
|
|
219
|
-
color: #fff;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
[data-bs-theme="dark"] .datepicker-footer {
|
|
223
|
-
border-top-color: var(--bs-border-color, #495057);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/* ==========================================================================
|
|
227
|
-
Mobile responsive — adapts layout and sizing for small screens
|
|
228
|
-
========================================================================== */
|
|
229
|
-
|
|
230
|
-
@media (max-width: 575.98px) {
|
|
231
|
-
/* Popover: never wider than the viewport */
|
|
232
|
-
.datepicker-popover {
|
|
233
|
-
max-width: calc(100vw - 8px) !important;
|
|
234
|
-
overflow-x: hidden;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
/* Stack calendar + time vertically in datetime mode */
|
|
238
|
-
.datepicker-popover--wide .d-flex.flex-row {
|
|
239
|
-
flex-direction: column !important;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
/* Hide vertical divider between calendar and time */
|
|
243
|
-
.datepicker-popover--wide .vr {
|
|
244
|
-
display: none;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/* Slightly smaller day cells to fit narrow screens */
|
|
248
|
-
.datepicker-day {
|
|
249
|
-
width: 28px;
|
|
250
|
-
height: 28px;
|
|
251
|
-
font-size: 0.72rem;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.datepicker-day-label {
|
|
255
|
-
width: 28px;
|
|
256
|
-
font-size: 0.62rem;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
/* Reduce calendar min-width */
|
|
260
|
-
.datepicker-calendar,
|
|
261
|
-
.datepicker-year-picker {
|
|
262
|
-
min-width: 210px;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
/* Time columns — stack more compactly */
|
|
266
|
-
.datepicker-time-col-scroll {
|
|
267
|
-
height: 200px;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.datepicker-time-item {
|
|
271
|
-
width: 38px;
|
|
272
|
-
height: 26px;
|
|
273
|
-
font-size: 0.75rem;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.datepicker-time-item--ampm {
|
|
277
|
-
width: 40px;
|
|
278
|
-
height: 32px;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.datepicker-time-separator {
|
|
282
|
-
font-size: 1rem;
|
|
283
|
-
margin-top: 12px;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
/* Increase touch target for footer buttons */
|
|
287
|
-
.datepicker-footer .btn {
|
|
288
|
-
font-size: 0.8rem;
|
|
289
|
-
padding: 6px 8px;
|
|
290
|
-
min-height: 34px;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
/* Year grid cells — slightly roomier for tap */
|
|
294
|
-
.datepicker-year-cell {
|
|
295
|
-
font-size: 0.8rem;
|
|
296
|
-
padding: 8px 4px;
|
|
297
|
-
min-height: 34px;
|
|
298
|
-
}
|
|
299
|
-
}
|
|
1
|
+
.input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff;font-weight:600}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[data-bs-theme=dark] .datepicker-popover{background-color:var(--bs-body-bg,#212529);border-color:var(--bs-border-color,#495057)}[data-bs-theme=dark] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected),[data-bs-theme=dark] .datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#2c3e50)}[data-bs-theme=dark] .datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff}[data-bs-theme=dark] .datepicker-footer{border-top-color:var(--bs-border-color,#495057)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff;font-weight:600}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[data-bs-theme=dark] .datepicker-popover{background-color:var(--bs-body-bg,#212529);border-color:var(--bs-border-color,#495057)}[data-bs-theme=dark] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected),[data-bs-theme=dark] .datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#2c3e50)}[data-bs-theme=dark] .datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff}[data-bs-theme=dark] .datepicker-footer{border-top-color:var(--bs-border-color,#495057)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
2
|
-
//# sourceMappingURL=
|
|
1
|
+
'use strict';var chunkGZ2D7HTS_cjs=require('./chunk-GZ2D7HTS.cjs'),chunkAWU5XGMI_cjs=require('./chunk-AWU5XGMI.cjs');require('./chunk-NPQQDBFB.cjs');var chunk2Q4NZKMX_cjs=require('./chunk-2Q4NZKMX.cjs'),chunk5IOLZUVD_cjs=require('./chunk-5IOLZUVD.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkGZ2D7HTS_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkAWU5XGMI_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2Q4NZKMX_cjs.a}});Object.defineProperty(exports,"TableLoading",{enumerable:true,get:function(){return chunk5IOLZUVD_cjs.a}});//# sourceMappingURL=index.cjs.map
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5janMifQ==
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.cjs';
|
|
2
|
+
export { SearchSelect, SearchSelectProps } from './SearchSelect.cjs';
|
|
3
|
+
export { Label, LabelProps } from './Label.cjs';
|
|
4
|
+
export { TableLoading, TableLoadingProps } from './TableLoading.cjs';
|
|
5
|
+
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export {
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
export { default as SearchSelect } from './SearchSelect.js'
|
|
7
|
-
export type { SearchSelectProps } from './SearchSelect.js'
|
|
8
|
-
|
|
9
|
-
export { Label } from './Label.js'
|
|
10
|
-
export type { LabelProps } from './Label.js'
|
|
1
|
+
export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.js';
|
|
2
|
+
export { SearchSelect, SearchSelectProps } from './SearchSelect.js';
|
|
3
|
+
export { Label, LabelProps } from './Label.js';
|
|
4
|
+
export { TableLoading, TableLoadingProps } from './TableLoading.js';
|
|
5
|
+
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{a as DatePicker}from'./chunk-
|
|
2
|
-
//# sourceMappingURL=
|
|
1
|
+
export{a as DatePicker}from'./chunk-ES5ABK5L.js';export{a as SearchSelect}from'./chunk-ZCAQ7S2A.js';import'./chunk-RR7TBRGI.js';export{a as Label}from'./chunk-HYB5IGJK.js';export{a as TableLoading}from'./chunk-7LXLWNUR.js';//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5qcyJ9
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# DatePicker
|
|
2
|
+
|
|
3
|
+
> A fully-featured date, time, and datetime picker with Bootstrap 5 styling. Popover is rendered via React Portal — no z-index stacking issues with modals or sidebars.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
// Default import (recommended for single-component tree-shaking)
|
|
11
|
+
import DatePicker from 'react-bootstrap-plugins/DatePicker'
|
|
12
|
+
|
|
13
|
+
// Named import from individual entry point
|
|
14
|
+
import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
|
|
15
|
+
|
|
16
|
+
// Barrel import
|
|
17
|
+
import { DatePicker } from 'react-bootstrap-plugins'
|
|
18
|
+
|
|
19
|
+
// Required CSS (import once, anywhere in your app)
|
|
20
|
+
import 'react-bootstrap-plugins/css/plugins.css'
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Basic Usage
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import { useState } from 'react'
|
|
29
|
+
import { DatePicker } from 'react-bootstrap-plugins'
|
|
30
|
+
import 'react-bootstrap-plugins/css/plugins.css'
|
|
31
|
+
|
|
32
|
+
function MyForm() {
|
|
33
|
+
const [date, setDate] = useState(null)
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<DatePicker
|
|
37
|
+
value={date}
|
|
38
|
+
onChange={(e) => setDate(e.target.value)}
|
|
39
|
+
placeholderText="Pick a date"
|
|
40
|
+
/>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Props
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
|---|---|---|---|
|
|
51
|
+
| `mode` | `'date'` \| `'time'` \| `'datetime'` | `'date'` | Picker mode |
|
|
52
|
+
| `value` | `Date` \| `string` \| `null` | — | Currently selected value |
|
|
53
|
+
| `selected` | `Date` \| `null` | — | Alias for `value` |
|
|
54
|
+
| `onChange` | `(e) => void` | — | Synthetic event; `e.target.value` is formatted string, `e.target.name` is the input name |
|
|
55
|
+
| `dateFormat` | `string` | — | Custom format. Tokens: `yyyy`, `MM`, `dd`, `hh`, `mm`, `aa` |
|
|
56
|
+
| `placeholderText` | `string` | Auto | Placeholder when empty |
|
|
57
|
+
| `size` | `'sm'` \| `'lg'` | — | Bootstrap input size variant |
|
|
58
|
+
| `isClearable` | `boolean` | `false` | Show clear button |
|
|
59
|
+
| `disabled` | `boolean` | `false` | Disable the input |
|
|
60
|
+
| `minDate` | `Date` | — | Earliest selectable date |
|
|
61
|
+
| `maxDate` | `Date` | — | Latest selectable date |
|
|
62
|
+
| `timeIntervals` | `number` | `5` | Minute step in time picker |
|
|
63
|
+
| `timezone` | `string` | `'Kampala'` | Timezone label |
|
|
64
|
+
| `className` | `string` | — | Additional CSS classes on the input |
|
|
65
|
+
| `id` | `string` | — | Input element ID |
|
|
66
|
+
| `name` | `string` | — | Input name attribute — surfaces as `e.target.name` in `onChange` |
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Examples
|
|
71
|
+
|
|
72
|
+
### Date mode (default)
|
|
73
|
+
|
|
74
|
+
```jsx
|
|
75
|
+
<DatePicker
|
|
76
|
+
name="dob"
|
|
77
|
+
value={birthDate}
|
|
78
|
+
onChange={(e) => setBirthDate(e.target.value)}
|
|
79
|
+
maxDate={new Date()}
|
|
80
|
+
isClearable
|
|
81
|
+
/>
|
|
82
|
+
// e.target.value → "2026-06-29"
|
|
83
|
+
// e.target.name → "dob"
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Time mode
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
<DatePicker
|
|
90
|
+
mode="time"
|
|
91
|
+
value={startTime}
|
|
92
|
+
onChange={(e) => setStartTime(e.target.value)}
|
|
93
|
+
timeIntervals={15}
|
|
94
|
+
/>
|
|
95
|
+
// e.target.value → "02:30 PM"
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Datetime mode
|
|
99
|
+
|
|
100
|
+
```jsx
|
|
101
|
+
<DatePicker
|
|
102
|
+
mode="datetime"
|
|
103
|
+
value={appointmentDateTime}
|
|
104
|
+
onChange={(e) => setAppointmentDateTime(e.target.value)}
|
|
105
|
+
dateFormat="dd/MM/yyyy hh:mm aa"
|
|
106
|
+
/>
|
|
107
|
+
// e.target.value → "29/06/2026 02:30 PM"
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### With Bootstrap form layout
|
|
111
|
+
|
|
112
|
+
```jsx
|
|
113
|
+
<div className="mb-3">
|
|
114
|
+
<label htmlFor="eventDate" className="form-label">Event Date</label>
|
|
115
|
+
<DatePicker
|
|
116
|
+
id="eventDate"
|
|
117
|
+
name="eventDate"
|
|
118
|
+
value={eventDate}
|
|
119
|
+
onChange={(e) => setEventDate(e.target.value)}
|
|
120
|
+
minDate={new Date()}
|
|
121
|
+
className="form-control-lg"
|
|
122
|
+
/>
|
|
123
|
+
</div>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## CSS Import
|
|
129
|
+
|
|
130
|
+
DatePicker requires a small CSS file for its popover calendar layout. Import it **once** in your app:
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
// Recommended — uses the package exports map
|
|
134
|
+
import 'react-bootstrap-plugins/css/plugins.css'
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
For troubleshooting CSS import issues, see the [main README](./README.md#css-imports).
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Dark Mode
|
|
142
|
+
|
|
143
|
+
The DatePicker respects Bootstrap 5's dark mode. Set `data-bs-theme="dark"` on any parent element and the popover calendar adapts automatically.
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Bundle Size
|
|
148
|
+
|
|
149
|
+
~5.5 KB (min+gzip, including CSS).
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## See Also
|
|
154
|
+
|
|
155
|
+
- [SearchSelect](./SEARCHSELECT.md) — Filterable, searchable select dropdown
|
|
156
|
+
- [Label](./LABEL.md) — Bootstrap-styled form label with required indicator
|
|
157
|
+
- [Main README](../README.md) — Package overview, installation, and general info
|
package/docs/LABEL.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Label
|
|
2
|
+
|
|
3
|
+
> A simple Bootstrap-styled form label with a required field indicator.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
// Default import (recommended for single-component tree-shaking)
|
|
11
|
+
import Label from 'react-bootstrap-plugins/Label'
|
|
12
|
+
|
|
13
|
+
// Named import from individual entry point
|
|
14
|
+
import { Label } from 'react-bootstrap-plugins/Label'
|
|
15
|
+
|
|
16
|
+
// Barrel import
|
|
17
|
+
import { Label } from 'react-bootstrap-plugins'
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Basic Usage
|
|
23
|
+
|
|
24
|
+
```jsx
|
|
25
|
+
import { Label } from 'react-bootstrap-plugins'
|
|
26
|
+
|
|
27
|
+
<Label hf="studentName" label="Student Name" />
|
|
28
|
+
// Renders: <label for="studentName">Student Name <b class="text-danger">*</b></label>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
|---|---|---|---|
|
|
37
|
+
| `hf` | `string` | `'default'` | `htmlFor` attribute — matches input `id` |
|
|
38
|
+
| `label` | `string` | `'Title'` | Label text |
|
|
39
|
+
| `required` | `boolean` | `true` | Show red asterisk |
|
|
40
|
+
| `className` | `string` | — | Additional CSS classes |
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Examples
|
|
45
|
+
|
|
46
|
+
### With required indicator
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
<Label hf="email" label="Email Address" required />
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Optional field (no asterisk)
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
55
|
+
<Label hf="middleName" label="Middle Name" required={false} />
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### With Bootstrap grid
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
<div className="mb-3 row">
|
|
62
|
+
<div className="col-sm-3">
|
|
63
|
+
<Label hf="phone" label="Phone Number" className="col-form-label" />
|
|
64
|
+
</div>
|
|
65
|
+
<div className="col-sm-9">
|
|
66
|
+
<input id="phone" type="tel" className="form-control" />
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Dark Mode
|
|
74
|
+
|
|
75
|
+
The Label respects Bootstrap 5's dark mode. Set `data-bs-theme="dark"` on any parent element.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Bundle Size
|
|
80
|
+
|
|
81
|
+
~0.3 KB (min+gzip).
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## See Also
|
|
86
|
+
|
|
87
|
+
- [DatePicker](./DATEPICKER.md) — Date, time, and datetime picker
|
|
88
|
+
- [SearchSelect](./SEARCHSELECT.md) — Filterable, searchable select dropdown
|
|
89
|
+
- [Main README](../README.md) — Package overview, installation, and general info
|