@lazhus/kg-ui 0.8.2 → 0.8.4

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.
@@ -707,7 +707,7 @@
707
707
  "kind": "field",
708
708
  "name": "styles",
709
709
  "static": true,
710
- "default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; display: flex; flex-direction: column; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
710
+ "default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
711
711
  },
712
712
  {
713
713
  "kind": "method",
@@ -1683,75 +1683,6 @@
1683
1683
  "module": "src/mixins/FormAssociated.js"
1684
1684
  }
1685
1685
  },
1686
- {
1687
- "kind": "field",
1688
- "name": "open",
1689
- "type": {
1690
- "text": "boolean"
1691
- },
1692
- "default": "false"
1693
- },
1694
- {
1695
- "kind": "field",
1696
- "name": "placeholder",
1697
- "type": {
1698
- "text": "string"
1699
- },
1700
- "default": "'Tarih seçiniz...'"
1701
- },
1702
- {
1703
- "kind": "field",
1704
- "name": "label",
1705
- "type": {
1706
- "text": "string"
1707
- }
1708
- },
1709
- {
1710
- "kind": "field",
1711
- "name": "showTime",
1712
- "type": {
1713
- "text": "boolean"
1714
- }
1715
- },
1716
- {
1717
- "kind": "field",
1718
- "name": "fullwidth",
1719
- "type": {
1720
- "text": "boolean"
1721
- }
1722
- },
1723
- {
1724
- "kind": "field",
1725
- "name": "mode",
1726
- "type": {
1727
- "text": "string"
1728
- },
1729
- "default": "'date'"
1730
- },
1731
- {
1732
- "kind": "field",
1733
- "name": "locale",
1734
- "type": {
1735
- "text": "string"
1736
- },
1737
- "default": "'tr-TR'"
1738
- },
1739
- {
1740
- "kind": "field",
1741
- "name": "min",
1742
- "type": {
1743
- "text": "string|number"
1744
- },
1745
- "default": "''"
1746
- },
1747
- {
1748
- "kind": "field",
1749
- "name": "max",
1750
- "type": {
1751
- "text": "string|number"
1752
- },
1753
- "default": "''"
1754
- },
1755
1686
  {
1756
1687
  "kind": "field",
1757
1688
  "name": "styles",
@@ -1937,6 +1868,14 @@
1937
1868
  "kind": "method",
1938
1869
  "name": "render"
1939
1870
  },
1871
+ {
1872
+ "kind": "field",
1873
+ "name": "open",
1874
+ "type": {
1875
+ "text": "boolean"
1876
+ },
1877
+ "default": "false"
1878
+ },
1940
1879
  {
1941
1880
  "kind": "field",
1942
1881
  "name": "disabled",
@@ -1949,6 +1888,46 @@
1949
1888
  "module": "src/mixins/FormAssociated.js"
1950
1889
  }
1951
1890
  },
1891
+ {
1892
+ "kind": "field",
1893
+ "name": "mode",
1894
+ "type": {
1895
+ "text": "string"
1896
+ },
1897
+ "default": "'date'"
1898
+ },
1899
+ {
1900
+ "kind": "field",
1901
+ "name": "locale",
1902
+ "type": {
1903
+ "text": "string"
1904
+ },
1905
+ "default": "'tr-TR'"
1906
+ },
1907
+ {
1908
+ "kind": "field",
1909
+ "name": "placeholder",
1910
+ "type": {
1911
+ "text": "string"
1912
+ },
1913
+ "default": "'Tarih seçiniz...'"
1914
+ },
1915
+ {
1916
+ "kind": "field",
1917
+ "name": "min",
1918
+ "type": {
1919
+ "text": "string|number"
1920
+ },
1921
+ "default": "''"
1922
+ },
1923
+ {
1924
+ "kind": "field",
1925
+ "name": "max",
1926
+ "type": {
1927
+ "text": "string|number"
1928
+ },
1929
+ "default": "''"
1930
+ },
1952
1931
  {
1953
1932
  "kind": "field",
1954
1933
  "name": "_viewDate",
@@ -1966,6 +1945,27 @@
1966
1945
  "module": "src/mixins/FormAssociated.js"
1967
1946
  }
1968
1947
  },
1948
+ {
1949
+ "type": {
1950
+ "text": "string"
1951
+ },
1952
+ "name": "label",
1953
+ "kind": "field"
1954
+ },
1955
+ {
1956
+ "type": {
1957
+ "text": "boolean"
1958
+ },
1959
+ "name": "showTime",
1960
+ "kind": "field"
1961
+ },
1962
+ {
1963
+ "type": {
1964
+ "text": "boolean"
1965
+ },
1966
+ "name": "fullwidth",
1967
+ "kind": "field"
1968
+ },
1969
1969
  {
1970
1970
  "kind": "field",
1971
1971
  "name": "formAssociated",
@@ -30,7 +30,6 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
30
30
  border: 1px solid var(--kg-border);
31
31
  color: var(--kg-text);
32
32
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
33
- overflow: hidden;
34
33
  display: flex;
35
34
  flex-direction: column;
36
35
  }
@@ -41,6 +40,8 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
41
40
  border-bottom: 1px solid var(--kg-border);
42
41
  font-weight: 700;
43
42
  font-size: 1.1rem;
43
+ border-top-left-radius: var(--kg-radius-lg, 12px);
44
+ border-top-right-radius: var(--kg-radius-lg, 12px);
44
45
  }
45
46
 
46
47
  .card-content {
@@ -54,6 +55,8 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
54
55
  border-top: 1px solid var(--kg-border);
55
56
  font-size: 0.9rem;
56
57
  color: var(--kg-text-muted);
58
+ border-bottom-left-radius: var(--kg-radius-lg, 12px);
59
+ border-bottom-right-radius: var(--kg-radius-lg, 12px);
57
60
  }
58
61
 
59
62
  /* Variations */
@@ -1,4 +1,4 @@
1
- var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[a]=s)(t,"symbol"!=typeof a?a+"":a,s);import{LitElement as a,css as s,html as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class o extends(n(a)){constructor(){super(),t(this,"open"),t(this,"placeholder"),t(this,"label"),t(this,"showTime"),t(this,"fullwidth"),t(this,"mode"),t(this,"locale"),t(this,"min"),t(this,"max"),this.open=!1,this.disabled=!1,this.mode="date",this.locale="tr-TR",this.placeholder="Tarih seçiniz...",this.min="",this.max="",this._viewDate=/* @__PURE__ */new Date,this.value="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}static get properties(){return{...super.properties,open:{type:Boolean,reflect:!0},placeholder:{type:String},label:{type:String},showTime:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},mode:{type:String},locale:{type:String},min:{type:String},max:{type:String},_viewDate:{type:Object},_selectedDate:{type:Object}}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}togglePopup(e){e&&e.stopPropagation(),this.disabled||(this.open=!this.open)}_handleInputKeydown(e){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key)||(e.ctrlKey||e.metaKey)&&["a","c","v","x"].includes(e.key.toLowerCase())||/^\d$/.test(e.key)||e.preventDefault()}_getDateFormat(){const e=new Date(2023,11,31),t=new Intl.DateTimeFormat(this.locale).formatToParts(e),a=t.filter(e=>"literal"!==e.type).map(e=>e.type),s=t.find(e=>"literal"===e.type);let i=s?s.value:".";return i=i.includes(".")?".":i.includes("/")?"/":i.includes("-")?"-":".",{parts:a,separator:i}}_handleManualInput(e){let t=e.detail.value;t=t.replace(/\D/g,"");const{parts:a,separator:s}=this._getDateFormat(),i="year"===a[0];let r="";if(t.length>0&&(i?t.length<=4?r=t:t.length<=6?r=`${t.slice(0,4)}${s}${t.slice(4)}`:t.length<=8&&(r=`${t.slice(0,4)}${s}${t.slice(4,6)}${s}${t.slice(6)}`):t.length<=2?r=t:t.length<=4?r=`${t.slice(0,2)}${s}${t.slice(2)}`:t.length<=8&&(r=`${t.slice(0,2)}${s}${t.slice(2,4)}${s}${t.slice(4)}`),this.showTime&&t.length>8)){const e=r,a=t.slice(8);r=a.length<=2?`${e} ${a}`:`${e} ${a.slice(0,2)}:${a.slice(2,4)}`}if(t.length>=8){let e,n,o;if(i)o=parseInt(t.slice(0,4)),n=parseInt(t.slice(4,6)),e=parseInt(t.slice(6,8));else{const s=parseInt(t.slice(0,2)),i=parseInt(t.slice(2,4)),r=parseInt(t.slice(4,8));"day"===a[0]?(e=s,n=i,o=r):(n=s,e=i,o=r)}e>31&&(e=31),0===e&&(e=1),n>12&&(n=12),0===n&&(n=1),o>2100&&(o=2100);const l=String(e).padStart(2,"0"),c=String(n).padStart(2,"0"),d=String(o);if(r=i?`${d}${s}${c}${s}${l}`:"day"===a[0]?`${l}${s}${c}${s}${d}`:`${c}${s}${l}${s}${d}`,this.showTime&&t.length>8){r.split(" ")[1];let e=parseInt(t.slice(8,10)||"0"),a=parseInt(t.slice(10,12)||"0");e>23&&(e=23),a>59&&(a=59);const s=String(e).padStart(2,"0"),i=String(a).padStart(2,"0");t.length<=10?r+=` ${s}`:r+=` ${s}:${i}`}}if(this.value=r||t,this.value.length>=8){const e=this.value.split(" ")[0].split(s);if(this.value.split(" ")[1]?.split(":"),3===e.length){let e,t,a;if(i){"year"===currentParts[0]?(a=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),e=parseInt(dateComponents[2])):"day"===currentParts[0]?(e=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),a=parseInt(dateComponents[2])):(t=parseInt(dateComponents[0]),e=parseInt(dateComponents[1]),a=parseInt(dateComponents[2]));let s=0,i=0;if(timePartStr){const e=timePartStr.split(":");e.length>=2&&(s=parseInt(e[0]),i=parseInt(e[1]))}if(a>999){let r=new Date(a,t-1,e,s,i);if(!isNaN(r.getTime())){if(this.min){const e=this._parseDateStr(this.min);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())<new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}if(this.max){const e=this._parseDateStr(this.max);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())>new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}this._viewDate=r,this._selectedDate=r;const e=this._formatValue(r);this.value!==e&&(this.value=e),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}}}}}}_changeMonth(e){const t=new Date(this._viewDate);t.setMonth(t.getMonth()+e),this._viewDate=t}_setViewMonth(e){const t=new Date(this._viewDate);t.setMonth(parseInt(e)),this._viewDate=t}_setViewYear(e){const t=new Date(this._viewDate);t.setFullYear(parseInt(e)),this._viewDate=t}_setTime(e,t){const a=new Date(this._viewDate);if("hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._viewDate=a,this._selectedDate){const a=new Date(this._selectedDate);"hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._selectedDate=a,this.value=this._formatValue(a)}}_formatValue(e){if(!e)return"";const{separator:t,parts:a}=this._getDateFormat(),s=String(e.getDate()).padStart(2,"0"),i=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getFullYear());let n="";return n="year"===a[0]?`${r}${t}${i}${t}${s}`:"day"===a[0]?`${s}${t}${i}${t}${r}`:`${i}${t}${s}${t}${r}`,"year"===this.mode?String(r):"month"===this.mode?`${i}${t}${r}`:(this.showTime&&(n+=` ${String(e.getHours()).padStart(2,"0")}:${String(e.getMinutes()).padStart(2,"0")}`),n)}_handleToday(e){e&&e.stopPropagation();const t=/* @__PURE__ */new Date;this._viewDate=t,this._selectDate(t.getDate(),!0)}_handleDone(e){e&&e.stopPropagation(),this.open=!1}_handleKeydown(e){if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));if("Escape"===e.key)return void(this.open=!1);const t=new Date(this._viewDate);let a=!0;switch(e.key){case"ArrowLeft":t.setDate(t.getDate()-1);break;case"ArrowRight":t.setDate(t.getDate()+1);break;case"ArrowUp":t.setDate(t.getDate()-7);break;case"ArrowDown":t.setDate(t.getDate()+7);break;case"Enter":const e=new Date(this._viewDate);this._isDisabled(e)||this._selectDate(this._viewDate.getDate(),!0);break;default:a=!1}a&&(e.preventDefault(),this._viewDate=t)}_parseDateStr(e){if(!e)return null;if(e instanceof Date)return e;if("number"==typeof e)return new Date(e);const t=String(e);return t.match(/^\d{4}-\d{2}-\d{2}$/),new Date(t)}_isDisabled(e){if(!e)return!1;const t=this._parseDateStr(this.min),a=this._parseDateStr(this.max),s=new Date(e.getFullYear(),e.getMonth(),e.getDate());return!!(t&&s<new Date(t.getFullYear(),t.getMonth(),t.getDate()))||!!(a&&s>new Date(a.getFullYear(),a.getMonth(),a.getDate()))}_selectDate(e,t){if(!t)return;const a=new Date(this._viewDate);"date"===this.mode&&a.setDate(e),this._isDisabled(a)||(this._selectedDate=a,this.value=this._formatValue(a),this.showTime&&"date"===this.mode||(this.open=!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0})))}_selectMonth(e){const t=new Date(this._viewDate);t.setMonth(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_selectYear(e){const t=new Date(this._viewDate);t.setFullYear(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_renderCalendar(){const e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),a=this._viewDate.getDate(),s=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)});new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7)),new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7));let n=1;(this.locale.startsWith("en-US")||this.locale.startsWith("ja")||this.locale.startsWith("zh"))&&(n=0);const o=[];for(let i=0;i<7;i++){const e=new Date(2024,0,7+i+n);o.push(new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(e))}let l=(new Date(e,t,1).getDay()-n+7)%7;const c=new Date(e,t+1,0).getDate(),d=new Date(e,t,0).getDate(),h=[];for(let i=l-1;i>=0;i--)h.push({day:d-i,current:!1});for(let i=1;i<=c;i++)h.push({day:i,current:!0});const p=42-h.length;for(let i=1;i<=p;i++)h.push({day:i,current:!1});const g=/* @__PURE__ */(new Date).getFullYear(),u=[];for(let i=g-50;i<=g+50;i++)u.push(i);const m=/* @__PURE__ */new Date,v=a=>a===m.getDate()&&t===m.getMonth()&&e===m.getFullYear(),w=a=>!!this._selectedDate&&a===this._selectedDate.getDate()&&t===this._selectedDate.getMonth()&&e===this._selectedDate.getFullYear();return i`
1
+ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class o extends(n(a)){static get properties(){return{...super.properties,open:{type:Boolean,reflect:!0},placeholder:{type:String},label:{type:String},showTime:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},mode:{type:String},locale:{type:String},min:{type:String},max:{type:String},_viewDate:{type:Object},_selectedDate:{type:Object}}}constructor(){super(),this.open=!1,this.disabled=!1,this.mode="date",this.locale="tr-TR",this.placeholder="Tarih seçiniz...",this.min="",this.max="",this._viewDate=/* @__PURE__ */new Date,this.value="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}togglePopup(e){e&&e.stopPropagation(),this.disabled||(this.open=!this.open)}_handleInputKeydown(e){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key)||(e.ctrlKey||e.metaKey)&&["a","c","v","x"].includes(e.key.toLowerCase())||/^\d$/.test(e.key)||e.preventDefault()}_getDateFormat(){const e=new Date(2023,11,31),t=new Intl.DateTimeFormat(this.locale).formatToParts(e),a=t.filter(e=>"literal"!==e.type).map(e=>e.type),s=t.find(e=>"literal"===e.type);let i=s?s.value:".";return i=i.includes(".")?".":i.includes("/")?"/":i.includes("-")?"-":".",{parts:a,separator:i}}_handleManualInput(e){let t=e.detail.value;t=t.replace(/\D/g,"");const{parts:a,separator:s}=this._getDateFormat(),i="year"===a[0];let r="";if(t.length>0&&(i?t.length<=4?r=t:t.length<=6?r=`${t.slice(0,4)}${s}${t.slice(4)}`:t.length<=8&&(r=`${t.slice(0,4)}${s}${t.slice(4,6)}${s}${t.slice(6)}`):t.length<=2?r=t:t.length<=4?r=`${t.slice(0,2)}${s}${t.slice(2)}`:t.length<=8&&(r=`${t.slice(0,2)}${s}${t.slice(2,4)}${s}${t.slice(4)}`),this.showTime&&t.length>8)){const e=r,a=t.slice(8);r=a.length<=2?`${e} ${a}`:`${e} ${a.slice(0,2)}:${a.slice(2,4)}`}if(t.length>=8){let e,n,o;if(i)o=parseInt(t.slice(0,4)),n=parseInt(t.slice(4,6)),e=parseInt(t.slice(6,8));else{const s=parseInt(t.slice(0,2)),i=parseInt(t.slice(2,4)),r=parseInt(t.slice(4,8));"day"===a[0]?(e=s,n=i,o=r):(n=s,e=i,o=r)}e>31&&(e=31),0===e&&(e=1),n>12&&(n=12),0===n&&(n=1),o>2100&&(o=2100);const l=String(e).padStart(2,"0"),c=String(n).padStart(2,"0"),d=String(o);if(r=i?`${d}${s}${c}${s}${l}`:"day"===a[0]?`${l}${s}${c}${s}${d}`:`${c}${s}${l}${s}${d}`,this.showTime&&t.length>8){r.split(" ")[1];let e=parseInt(t.slice(8,10)||"0"),a=parseInt(t.slice(10,12)||"0");e>23&&(e=23),a>59&&(a=59);const s=String(e).padStart(2,"0"),i=String(a).padStart(2,"0");t.length<=10?r+=` ${s}`:r+=` ${s}:${i}`}}if(this.value=r||t,this.value.length>=8){const e=this.value.split(" ")[0].split(s);if(this.value.split(" ")[1]?.split(":"),3===e.length){let e,t,a;if(i){"year"===currentParts[0]?(a=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),e=parseInt(dateComponents[2])):"day"===currentParts[0]?(e=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),a=parseInt(dateComponents[2])):(t=parseInt(dateComponents[0]),e=parseInt(dateComponents[1]),a=parseInt(dateComponents[2]));let s=0,i=0;if(timePartStr){const e=timePartStr.split(":");e.length>=2&&(s=parseInt(e[0]),i=parseInt(e[1]))}if(a>999){let r=new Date(a,t-1,e,s,i);if(!isNaN(r.getTime())){if(this.min){const e=this._parseDateStr(this.min);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())<new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}if(this.max){const e=this._parseDateStr(this.max);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())>new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}this._viewDate=r,this._selectedDate=r;const e=this._formatValue(r);this.value!==e&&(this.value=e),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}}}}}}_changeMonth(e){const t=new Date(this._viewDate);t.setMonth(t.getMonth()+e),this._viewDate=t}_setViewMonth(e){const t=new Date(this._viewDate);t.setMonth(parseInt(e)),this._viewDate=t}_setViewYear(e){const t=new Date(this._viewDate);t.setFullYear(parseInt(e)),this._viewDate=t}_setTime(e,t){const a=new Date(this._viewDate);if("hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._viewDate=a,this._selectedDate){const a=new Date(this._selectedDate);"hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._selectedDate=a,this.value=this._formatValue(a)}}_formatValue(e){if(!e)return"";const{separator:t,parts:a}=this._getDateFormat(),s=String(e.getDate()).padStart(2,"0"),i=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getFullYear());let n="";return n="year"===a[0]?`${r}${t}${i}${t}${s}`:"day"===a[0]?`${s}${t}${i}${t}${r}`:`${i}${t}${s}${t}${r}`,"year"===this.mode?String(r):"month"===this.mode?`${i}${t}${r}`:(this.showTime&&(n+=` ${String(e.getHours()).padStart(2,"0")}:${String(e.getMinutes()).padStart(2,"0")}`),n)}_handleToday(e){e&&e.stopPropagation();const t=/* @__PURE__ */new Date;this._viewDate=t,this._selectDate(t.getDate(),!0)}_handleDone(e){e&&e.stopPropagation(),this.open=!1}_handleKeydown(e){if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));if("Escape"===e.key)return void(this.open=!1);const t=new Date(this._viewDate);let a=!0;switch(e.key){case"ArrowLeft":t.setDate(t.getDate()-1);break;case"ArrowRight":t.setDate(t.getDate()+1);break;case"ArrowUp":t.setDate(t.getDate()-7);break;case"ArrowDown":t.setDate(t.getDate()+7);break;case"Enter":const e=new Date(this._viewDate);this._isDisabled(e)||this._selectDate(this._viewDate.getDate(),!0);break;default:a=!1}a&&(e.preventDefault(),this._viewDate=t)}_parseDateStr(e){if(!e)return null;if(e instanceof Date)return e;if("number"==typeof e)return new Date(e);const t=String(e);return t.match(/^\d{4}-\d{2}-\d{2}$/),new Date(t)}_isDisabled(e){if(!e)return!1;const t=this._parseDateStr(this.min),a=this._parseDateStr(this.max),s=new Date(e.getFullYear(),e.getMonth(),e.getDate());return!!(t&&s<new Date(t.getFullYear(),t.getMonth(),t.getDate()))||!!(a&&s>new Date(a.getFullYear(),a.getMonth(),a.getDate()))}_selectDate(e,t){if(!t)return;const a=new Date(this._viewDate);"date"===this.mode&&a.setDate(e),this._isDisabled(a)||(this._selectedDate=a,this.value=this._formatValue(a),this.showTime&&"date"===this.mode||(this.open=!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0})))}_selectMonth(e){const t=new Date(this._viewDate);t.setMonth(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_selectYear(e){const t=new Date(this._viewDate);t.setFullYear(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_renderCalendar(){const e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),a=this._viewDate.getDate(),s=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)});new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7)),new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7));let n=1;(this.locale.startsWith("en-US")||this.locale.startsWith("ja")||this.locale.startsWith("zh"))&&(n=0);const o=[];for(let i=0;i<7;i++){const e=new Date(2024,0,7+i+n);o.push(new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(e))}let l=(new Date(e,t,1).getDay()-n+7)%7;const c=new Date(e,t+1,0).getDate(),d=new Date(e,t,0).getDate(),h=[];for(let i=l-1;i>=0;i--)h.push({day:d-i,current:!1});for(let i=1;i<=c;i++)h.push({day:i,current:!0});const p=42-h.length;for(let i=1;i<=p;i++)h.push({day:i,current:!1});const g=/* @__PURE__ */(new Date).getFullYear(),u=[];for(let i=g-50;i<=g+50;i++)u.push(i);const m=/* @__PURE__ */new Date,v=a=>a===m.getDate()&&t===m.getMonth()&&e===m.getFullYear(),w=a=>!!this._selectedDate&&a===this._selectedDate.getDate()&&t===this._selectedDate.getMonth()&&e===this._selectedDate.getFullYear();return i`
2
2
  <div class="calendar-header">
3
3
  <button class="nav-btn" @click="${e=>{e.stopPropagation(),this._changeMonth(-1)}}">←</button>
4
4
  <div class="month-year">
@@ -109,7 +109,7 @@ var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
109
109
  <div class="${r({"datepicker-popup":!0,open:this.open})}">
110
110
  ${e}
111
111
  </div>
112
- `}}t(o,"styles",s`
112
+ `}}((e,a,s)=>{a in e?t(e,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[a]=s})(o,"symbol"!=typeof(e="styles")?e+"":e,s`
113
113
  :host {
114
114
  display: inline-block;
115
115
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lazhus/kg-ui",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",
@@ -15,22 +15,22 @@ export class kgdatepicker extends LitElement {
15
15
  /** */
16
16
  open: boolean;
17
17
  /** */
18
- placeholder: string;
19
- /** */
20
- label: string;
21
- /** */
22
- showTime: boolean;
23
- /** */
24
- fullwidth: boolean;
25
- /** */
26
18
  mode: string;
27
19
  /** */
28
20
  locale: string;
29
21
  /** */
22
+ placeholder: string;
23
+ /** */
30
24
  min: string | number;
31
25
  /** */
32
26
  max: string | number;
33
27
  /** */
28
+ label: string;
29
+ /** */
30
+ showTime: boolean;
31
+ /** */
32
+ fullwidth: boolean;
33
+ /** */
34
34
  form: any;
35
35
  /** */
36
36
  type: string;
@@ -50,14 +50,14 @@ declare global {
50
50
  required?: boolean;
51
51
  errorText?: string;
52
52
  open?: boolean;
53
- placeholder?: string;
54
- label?: string;
55
- showTime?: boolean;
56
- fullwidth?: boolean;
57
53
  mode?: string;
58
54
  locale?: string;
55
+ placeholder?: string;
59
56
  min?: string | number;
60
57
  max?: string | number;
58
+ label?: string;
59
+ showTime?: boolean;
60
+ fullwidth?: boolean;
61
61
  form?: any;
62
62
  type?: string;
63
63
  [key: string]: any;
package/types/index.d.ts CHANGED
@@ -204,14 +204,14 @@ declare global {
204
204
  required?: boolean;
205
205
  errorText?: string;
206
206
  open?: boolean;
207
- placeholder?: string;
208
- label?: string;
209
- showTime?: boolean;
210
- fullwidth?: boolean;
211
207
  mode?: string;
212
208
  locale?: string;
209
+ placeholder?: string;
213
210
  min?: string | number;
214
211
  max?: string | number;
212
+ label?: string;
213
+ showTime?: boolean;
214
+ fullwidth?: boolean;
215
215
  form?: any;
216
216
  type?: string;
217
217
  [key: string]: any;