@acusti/uikit-docs 0.4.4 → 0.4.6
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/.storybook/main.ts +19 -4
- package/CHANGELOG.md +60 -0
- package/dist/assets/CSSValueInput-B69U5DrZ.js +5 -0
- package/dist/assets/{CSSValueInput-BgAgo3f9.css → CSSValueInput-DKgB9IQs.css} +1 -1
- package/dist/assets/CSSValueInput.stories-vCftVQHX.js +113 -0
- package/dist/assets/Color-6BZIO3FS-BHsDhiaJ.js +1 -0
- package/dist/assets/DatePicker.stories-X2JO2cn6.js +585 -0
- package/dist/assets/DocsRenderer-LL677BLK-i2bqAbNY.js +2 -0
- package/dist/assets/Dropdown-QkqMQiyU.css +1 -0
- package/dist/assets/Dropdown-_IIsqrAA.js +101 -0
- package/dist/assets/Dropdown.stories-msGED41R.js +364 -0
- package/dist/assets/InputText-_BMv0r1n.css +1 -0
- package/dist/assets/InputText.stories-CG1EnzrQ.js +148 -0
- package/dist/assets/Introduction-orXeKug7.js +184 -0
- package/dist/assets/MonthCalendar.stories-CJT-JiqF.js +177 -0
- package/dist/assets/WithTooltip-65CFNBJE-DlgYg9W2.js +9 -0
- package/dist/assets/blocks-C4xgyV4X.js +46 -0
- package/dist/assets/chunk-242VQQM5-DEt_wvrI.js +1 -0
- package/dist/assets/chunk-YKABRMAI-BpCcWWoG.js +18 -0
- package/dist/assets/client-Bvdml6v2.js +9 -0
- package/dist/assets/clsx-Bdud1Ih_.js +1 -0
- package/dist/assets/compiler-runtime-BOsKKfMw.js +1 -0
- package/dist/assets/components-CuDS54ZU.js +92 -0
- package/dist/assets/dist-6e4YoSiG.js +1 -0
- package/dist/assets/dist-BreUZhw6.js +1 -0
- package/dist/assets/formatter-EIJCOSYU-4RP_9NAI.js +1 -0
- package/dist/assets/iframe-BsC6HWDY.js +1221 -0
- package/dist/assets/jsx-runtime-CZwoFFIL.js +1 -0
- package/dist/assets/lib-WXkUx4TK.js +1 -0
- package/dist/assets/preload-helper-Bhb7V-Yo.js +1 -0
- package/dist/assets/react-18-6aLPZbD-.js +1 -0
- package/dist/assets/react-DcwytXSz.js +1 -0
- package/dist/assets/react-dom-CFVoDXTy.js +1 -0
- package/dist/assets/syntaxhighlighter-ED5Y7EFY-BQSv6pbL.js +6 -0
- package/dist/assets/theming-DLDZLcJn.js +39 -0
- package/dist/assets/useIsOutOfBounds.stories-CI4DMSUD.js +105 -0
- package/dist/assets/{useKeyboardEvents-BH4Zd7d3.css → useKeyboardEvents-CKMYGqVT.css} +1 -1
- package/dist/assets/useKeyboardEvents.stories-CNX299tr.js +3 -0
- package/dist/favicon-wrapper.svg +46 -0
- package/dist/favicon.svg +1 -1
- package/dist/iframe.html +59 -40
- package/dist/index.html +8 -16
- package/dist/index.json +1 -1
- package/dist/project.json +1 -1
- package/dist/sb-addons/docs-1/manager-bundle.js +1 -149
- package/dist/sb-addons/storybook-2/manager-bundle.js +1 -1
- package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +548 -108
- package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
- package/dist/sb-common-assets/favicon.svg +1 -1
- package/dist/sb-manager/globals-runtime.js +73064 -67182
- package/dist/sb-manager/globals.js +6 -16
- package/dist/sb-manager/manager-stores.js +23 -0
- package/dist/sb-manager/runtime.js +17712 -10309
- package/dist/vite-inject-mocker-entry.js +2 -0
- package/package.json +11 -9
- package/stories/CSSValueInput.stories.tsx +1 -1
- package/stories/DatePicker.stories.tsx +182 -45
- package/stories/InputText.stories.tsx +36 -0
- package/tsconfig.json +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/assets/CSSValueInput-BoZriUnh.js +0 -1
- package/dist/assets/CSSValueInput.stories-D1VcYZJ0.js +0 -113
- package/dist/assets/Color-AVL7NMMY-BeW0C7pE.js +0 -1
- package/dist/assets/DatePicker.stories-BSWV31FV.js +0 -244
- package/dist/assets/DocsRenderer-PQXLIZUC-D92GwNti.js +0 -2
- package/dist/assets/Dropdown-D5cyjefk.css +0 -1
- package/dist/assets/Dropdown-DUP_ybXe.js +0 -84
- package/dist/assets/Dropdown.stories-2Wtw1otE.js +0 -336
- package/dist/assets/InputText-Tkbh5amB.css +0 -1
- package/dist/assets/InputText.stories-BYt2Aj0_.js +0 -90
- package/dist/assets/Introduction-nSE2hjmb.js +0 -183
- package/dist/assets/MonthCalendar.stories-IJrL6wIl.js +0 -169
- package/dist/assets/blocks-Du178fXa.js +0 -658
- package/dist/assets/client-B2qWCcIR.js +0 -25
- package/dist/assets/clsx-hXifHU8N.js +0 -9
- package/dist/assets/iframe-ByGa_ItU.js +0 -1102
- package/dist/assets/index-BRXcJgsA.js +0 -1
- package/dist/assets/index-BVajFqaV.js +0 -1
- package/dist/assets/index-DwJ-mRZ2.js +0 -9
- package/dist/assets/jsx-runtime-D_zvdyIk.js +0 -9
- package/dist/assets/react-18-djOrgGe8.js +0 -1
- package/dist/assets/useIsOutOfBounds.stories-e48KZd_G.js +0 -105
- package/dist/assets/useKeyboardEvents.stories-CJbDuGfk.js +0 -3
- package/dist/sb-manager/globals-module-info.js +0 -797
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";/* empty css */var ee=r(),i=e(t(),1),a=n();function o(e){let t=(0,ee.c)(80),{autoCapitalize:n,autoComplete:r,autoFocus:o,className:s,disabled:c,discardOnEscape:l,doubleClickToEdit:u,enterKeyHint:d,form:f,id:p,initialValue:m,list:h,max:g,maxHeight:_,maxLength:v,min:y,minHeight:b,minLength:x,multiLine:S,multiple:C,name:w,onBlur:T,onChange:E,onChangeValue:D,onFocus:O,onKeyDown:k,onKeyUp:A,pattern:j,placeholder:M,readOnly:ie,ref:N,required:ae,rows:oe,selectTextOnFocus:P,size:se,step:ce,style:F,submitOnEnter:le,tabIndex:ue,title:de,type:fe}=e,pe=oe===void 0?1:oe,me=fe===void 0?`text`:fe,I=(0,i.useRef)(null),L=m??``,R=(0,i.useRef)(L),z;t[0]!==_||t[1]!==b||t[2]!==S?(z=()=>{if(!I.current||te)return;if(!S){I.current.style.height=``;return}let{transitionDelay:e,transitionDuration:t}=I.current.style;I.current.style.transitionDelay=`0s`,I.current.style.transitionDuration=`0s`,I.current.style.height=``;let n=typeof b==`string`?parseFloat(b):b,r=typeof _==`string`?parseFloat(_):_,ee=Math.max(n??0,Math.min(I.current.scrollHeight,r??1/0));ee&&(I.current.style.height=`${ee}px`),setTimeout(()=>{I.current&&(I.current.style.transitionDelay=e===`0s`?``:e,I.current.style.transitionDuration=t===`0s`?``:t)},0)},t[0]=_,t[1]=b,t[2]=S,t[3]=z):z=t[3];let B=z,V;t[4]!==S||t[5]!==N||t[6]!==B?(V=e=>{I.current=e;let t;if(typeof N==`function`?t=N(e):N&&(N.current=e),!e||!S||te)return t;B();let n=new ResizeObserver(B);return n.observe(e),()=>{n.disconnect(),typeof t==`function`&&t()}},t[4]=S,t[5]=N,t[6]=B,t[7]=V):V=t[7];let he=V,H,U;t[8]===L?(H=t[9],U=t[10]):(H=()=>{R.current=L,I.current&&(I.current.value=L)},U=[L],t[8]=L,t[9]=H,t[10]=U),(0,i.useEffect)(H,U);let[W,ge]=(0,i.useState)(ie??u),_e=(0,i.useRef)(!0),G;t[11]===u?G=t[12]:(G=()=>{u&&ge(!1)},t[11]=u,t[12]=G);let ve=G,K;t[13]!==E||t[14]!==D?(K=e=>{E&&E(e),D&&D(e.target.value)},t[13]=E,t[14]=D,t[15]=K):K=t[15];let q=K,J;t[16]!==S||t[17]!==O||t[18]!==B?(J=e=>{O&&O(e),S&&B()},t[16]=S,t[17]=O,t[18]=B,t[19]=J):J=t[19];let ye=J,Y;t[20]!==u||t[21]!==T||t[22]!==P?(Y=e=>{T&&T(e),R.current=e.currentTarget.value,u&&ge(!0),P&&(_e.current=!0)},t[20]=u,t[21]=T,t[22]=P,t[23]=Y):Y=t[23];let be=Y,X;t[24]===P?X=t[25]:(X=e=>{if(!P)return;let t=e.currentTarget;if(!_e.current||(_e.current=!1,!t.value)||t.ownerDocument.activeElement!==t)return;let n=t.value.length;t.selectionStart===0&&t.selectionEnd===n||(t.selectionStart=0,t.selectionEnd=n)},t[24]=P,t[25]=X);let xe=X,Z;t[26]!==l||t[27]!==u||t[28]!==q||t[29]!==S||t[30]!==k||t[31]!==W||t[32]!==le?(Z=e=>{if(k&&k(e),!(e.key!==`Enter`&&e.key!==`Escape`)){if(e.key===`Enter`&&(le||S&&re(e))&&(!S||!e.shiftKey&&!e.altKey&&!e.ctrlKey)){e.preventDefault(),e.currentTarget.closest(`form`)?.requestSubmit(),e.currentTarget.blur();return}!l&&!u||(e.key===`Escape`&&l?e.currentTarget.value!==R.current&&(e.currentTarget.value=R.current,q(e)):e.key===`Enter`&&u&&W&&ge(!1),e.currentTarget.blur())}},t[26]=l,t[27]=u,t[28]=q,t[29]=S,t[30]=k,t[31]=W,t[32]=le,t[33]=Z):Z=t[33];let Se=Z,Q;t[34]!==_||t[35]!==b||t[36]!==S||t[37]!==F?(Q=S&&te?{...F,fieldSizing:`content`,maxHeight:ne(_)?void 0:_,minHeight:ne(b)?void 0:b}:F,t[34]=_,t[35]=b,t[36]=S,t[37]=F,t[38]=Q):Q=t[38];let Ce=Q,we=S?`textarea`:`input`,$;t[39]!==g||t[40]!==y||t[41]!==S||t[42]!==pe||t[43]!==B||t[44]!==ce?($=S?{onInput:B,rows:pe}:{max:g,min:y,step:ce},t[39]=g,t[40]=y,t[41]=S,t[42]=pe,t[43]=B,t[44]=ce,t[45]=$):$=t[45];let Te;return t[46]!==we||t[47]!==n||t[48]!==r||t[49]!==o||t[50]!==s||t[51]!==c||t[52]!==d||t[53]!==f||t[54]!==be||t[55]!==q||t[56]!==ye||t[57]!==Se||t[58]!==he||t[59]!==xe||t[60]!==p||t[61]!==Ce||t[62]!==h||t[63]!==v||t[64]!==x||t[65]!==C||t[66]!==w||t[67]!==A||t[68]!==j||t[69]!==M||t[70]!==W||t[71]!==ae||t[72]!==se||t[73]!==ve||t[74]!==$||t[75]!==ue||t[76]!==de||t[77]!==me||t[78]!==L?(Te=(0,a.jsx)(we,{autoCapitalize:n,autoComplete:r,autoFocus:o,className:s,defaultValue:L,disabled:c,enterKeyHint:d,form:f,id:p,list:h,maxLength:v,minLength:x,multiple:C,name:w,onBlur:be,onChange:q,onDoubleClick:ve,onFocus:ye,onKeyDown:Se,onKeyUp:A,onSelect:xe,pattern:j,placeholder:M,readOnly:W,ref:he,required:ae,size:se,style:Ce,tabIndex:ue,title:de,type:me,...$}),t[46]=we,t[47]=n,t[48]=r,t[49]=o,t[50]=s,t[51]=c,t[52]=d,t[53]=f,t[54]=be,t[55]=q,t[56]=ye,t[57]=Se,t[58]=he,t[59]=xe,t[60]=p,t[61]=Ce,t[62]=h,t[63]=v,t[64]=x,t[65]=C,t[66]=w,t[67]=A,t[68]=j,t[69]=M,t[70]=W,t[71]=ae,t[72]=se,t[73]=ve,t[74]=$,t[75]=ue,t[76]=de,t[77]=me,t[78]=L,t[79]=Te):Te=t[79],Te}var te=typeof CSS>`u`?!0:CSS.supports(`field-sizing`,`content`),s=/mac|iphone|ipad|ipod/i;function ne(e){return e==null||e===``||e===0||e===1/0}function re(e){let t=globalThis.navigator?.platform??``;return s.test(t)?e.metaKey:e.ctrlKey}o.__docgenInfo={description:``,methods:[],displayName:`InputText`,props:{autoCapitalize:{required:!1,tsType:{name:`union`,raw:`'characters' | 'none' | 'off' | 'sentences' | 'words'`,elements:[{name:`literal`,value:`'characters'`},{name:`literal`,value:`'none'`},{name:`literal`,value:`'off'`},{name:`literal`,value:`'sentences'`},{name:`literal`,value:`'words'`}]},description:``},autoComplete:{required:!1,tsType:{name:`HTMLInputElement['autocomplete']`,raw:`HTMLInputElement['autocomplete']`},description:``},autoFocus:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},discardOnEscape:{required:!1,tsType:{name:`boolean`},description:`If true, resets input’s value to initialValue and blurs when user presses
|
|
2
|
+
the escape key.`},doubleClickToEdit:{required:!1,tsType:{name:`boolean`},description:`If true, input renders as readonly initially and only becomes interactive
|
|
3
|
+
when double-clicked or when user focuses the readonly input and then
|
|
4
|
+
presses the enter key. Likewise, the input becomes readonly again when
|
|
5
|
+
it is blurred or when the user presses enter or escape.`},enterKeyHint:{required:!1,tsType:{name:`InputHTMLAttributes['enterKeyHint']`,raw:`InputHTMLAttributes<HTMLInputElement>['enterKeyHint']`},description:``},form:{required:!1,tsType:{name:`string`},description:``},id:{required:!1,tsType:{name:`string`},description:``},initialValue:{required:!1,tsType:{name:`string`},description:`The initial value of the text input. If props.initialValue changes at
|
|
6
|
+
any point, the new value will override the local state of the input.`},list:{required:!1,tsType:{name:`string`},description:``},max:{required:!1,tsType:{name:`number`},description:``},maxHeight:{required:!1,tsType:{name:`union`,raw:`null | number | string`,elements:[{name:`null`},{name:`number`},{name:`string`}]},description:``},maxLength:{required:!1,tsType:{name:`number`},description:``},min:{required:!1,tsType:{name:`number`},description:``},minHeight:{required:!1,tsType:{name:`union`,raw:`null | number | string`,elements:[{name:`null`},{name:`number`},{name:`string`}]},description:``},minLength:{required:!1,tsType:{name:`number`},description:``},multiLine:{required:!1,tsType:{name:`boolean`},description:`If true, input renders as a <textarea> that automatically grows and
|
|
7
|
+
shrinks vertically to adjust to the length of its contents.`},multiple:{required:!1,tsType:{name:`boolean`},description:``},name:{required:!1,tsType:{name:`string`},description:``},onBlur:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`FocusEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: ChangeEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`ChangeEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`ChangeEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onChangeValue:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => unknown`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`unknown`}}},description:`Custom change handler that only receives the changed value as an argument.
|
|
8
|
+
Enables passing a state setter function directly, e.g. onChangeValue={setValue}.`},onFocus:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`FocusEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyDown:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`KeyboardEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyUp:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`KeyboardEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},pattern:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},readOnly:{required:!1,tsType:{name:`boolean`},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLInputElement`}],raw:`Ref<HTMLInputElement>`},description:``},required:{required:!1,tsType:{name:`boolean`},description:``},rows:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`1`,computed:!1}},selectTextOnFocus:{required:!1,tsType:{name:`boolean`},description:`If true, the contents of the input are selected when it’s focused.`},size:{required:!1,tsType:{name:`number`},description:``},step:{required:!1,tsType:{name:`number`},description:``},style:{required:!1,tsType:{name:`CSSProperties`},description:``},submitOnEnter:{required:!1,tsType:{name:`boolean`},description:`If true, pressing enter/return submits the <form> that the input is a
|
|
9
|
+
part of, or else blurs the input if no form is found.`},tabIndex:{required:!1,tsType:{name:`number`},description:``},title:{required:!1,tsType:{name:`string`},description:``},type:{required:!1,tsType:{name:`union`,raw:`'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'`,elements:[{name:`literal`,value:`'email'`},{name:`literal`,value:`'number'`},{name:`literal`,value:`'password'`},{name:`literal`,value:`'search'`},{name:`literal`,value:`'tel'`},{name:`literal`,value:`'text'`},{name:`literal`,value:`'url'`}]},description:``,defaultValue:{value:`'text'`,computed:!1}}}};var{fn:c}=__STORYBOOK_MODULE_TEST__,l={component:o,parameters:{docs:{description:{component:'`InputText` is a React component that renders a textual input (`type: "text"|"email"|"number"|"password"|"search"|"tel"|"url"`) that is uncontrolled, but whose value is overwritten whenever `props.initialValue` changes. Also, if `props.selectTextOnFocus` is true, it selects the entire contents of the input whenever the input is focused. And it supports multiline inputs (rendered as a `<textarea>`) that automatically resize vertically to fit their content.'}}},tags:[`autodocs`],title:`UIKit/Controls/InputText`};const u={args:{className:`input-text`,name:`empty`,onBlur:c(),onChange:c(),onChangeValue:c(),onFocus:c(),onKeyDown:c(),onKeyUp:c(),placeholder:`enter text here…`}},d={args:{className:`input-text`,initialValue:`Bolivia`,placeholder:`enter country name`}},f={args:{className:`input-text`,initialValue:`Bolivia`,name:`country`,placeholder:`enter country name (selectTextOnFocus)`,selectTextOnFocus:!0}},p={args:{className:`multi-line-input-text`,initialValue:`The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”`,maxHeight:600,multiLine:!0,name:`multi-line-input`,placeholder:`enter text of any length`,selectTextOnFocus:!0}};var m={className:`multi-line-input-text`,maxHeight:600,multiLine:!0,name:`multi-line-submit-on-enter-input`,placeholder:`enter text of any length`,submitOnEnter:!0},h=new Intl.DateTimeFormat(void 0,{timeStyle:`medium`}).format;const g={args:m,render(){let[e,t]=(0,i.useState)(null),n=e?h(e):`never`;return(0,a.jsxs)(`form`,{onSubmit:e=>{e.preventDefault(),t(new Date)},children:[(0,a.jsx)(o,{...m}),(0,a.jsxs)(`pre`,{children:[`Last submitted: `,n]})]})}},_={args:{...m,name:`${m.name}-no-form`}};var v={className:`input-text-double-click-to-edit`,doubleClickToEdit:!0,initialValue:`Lorem ipsum dolor sit amet`,name:`double-click-to-edit-input`};const y={args:v};var b={className:`input-text`,discardOnEscape:!0,initialValue:`Lorem ipsum`,name:`discard-on-escape-input`};const x={args:b},S={args:{...b,...v,name:`double-click-to-edit-and-discard-on-escape-input`}},C={args:{autoFocus:!0,name:`autofocus-input`}},w={args:{className:`multi-line-input-text`,initialValue:`This textarea has a minHeight of 50px.
|
|
10
|
+
|
|
11
|
+
Try deleting this text to see that the textarea does not shrink below the minimum height.`,minHeight:50,multiLine:!0,name:`multi-line-min-height-input`,placeholder:`enter text of any length`}},T={args:{className:`multi-line-input-text`,initialValue:`This textarea has a maxHeight of 150px.
|
|
12
|
+
|
|
13
|
+
Line 3
|
|
14
|
+
Line 4
|
|
15
|
+
Line 5
|
|
16
|
+
Line 6
|
|
17
|
+
Line 7
|
|
18
|
+
Line 8
|
|
19
|
+
Line 9
|
|
20
|
+
Line 10`,maxHeight:150,multiLine:!0,name:`multi-line-max-height-input`,placeholder:`enter text of any length`}},E={args:{className:`multi-line-input-text`,initialValue:`This textarea has minHeight of 100px and maxHeight of 200px.`,maxHeight:200,minHeight:100,multiLine:!0,name:`multi-line-min-max-height-input`,placeholder:`enter text of any length`}},D={args:{className:`multi-line-input-css-transition`,multiLine:!0,name:`multi-line-input-css-transition`,placeholder:`Write a quick note here`,rows:4}};var O={className:`multi-line-input-text`,initialValue:`This multi-line input should resize to fit its contents when the popover opens even though it initializes with display: none as a result of being inside a hidden popover element so it doesn’t have any dimensions when the component initially renders.`,multiLine:!0,name:`multi-line-input-in-popover`,selectTextOnFocus:!0};const k={args:O,render(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`button`,{popoverTarget:`multi-line-input-popover`,children:`Open Popover`}),(0,a.jsx)(`div`,{id:`multi-line-input-popover`,popover:`auto`,children:(0,a.jsx)(o,{...O})})]})}};var A={autoFocus:!0,initialValue:`This multi-line input should be focused when the popover opens`,multiLine:!0,name:`multi-line-input-with-autofocus-in-popover`,selectTextOnFocus:!0};const j={args:A,render(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`button`,{popoverTarget:`multi-line-input-with-autofocus-popover`,children:`Open Popover`}),(0,a.jsx)(`div`,{id:`multi-line-input-with-autofocus-popover`,popover:`auto`,children:(0,a.jsx)(o,{...A})})]})}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
|
|
21
|
+
args: {
|
|
22
|
+
className: 'input-text',
|
|
23
|
+
name: 'empty',
|
|
24
|
+
// NOTE spies are a workaround for a bug related to implicit arg detection
|
|
25
|
+
onBlur: fn(),
|
|
26
|
+
onChange: fn(),
|
|
27
|
+
onChangeValue: fn(),
|
|
28
|
+
onFocus: fn(),
|
|
29
|
+
onKeyDown: fn(),
|
|
30
|
+
onKeyUp: fn(),
|
|
31
|
+
placeholder: 'enter text here…'
|
|
32
|
+
}
|
|
33
|
+
}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
34
|
+
args: {
|
|
35
|
+
className: 'input-text',
|
|
36
|
+
initialValue: 'Bolivia',
|
|
37
|
+
placeholder: 'enter country name'
|
|
38
|
+
}
|
|
39
|
+
}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
40
|
+
args: {
|
|
41
|
+
className: 'input-text',
|
|
42
|
+
initialValue: 'Bolivia',
|
|
43
|
+
name: 'country',
|
|
44
|
+
placeholder: 'enter country name (selectTextOnFocus)',
|
|
45
|
+
selectTextOnFocus: true
|
|
46
|
+
}
|
|
47
|
+
}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
48
|
+
args: {
|
|
49
|
+
className: 'multi-line-input-text',
|
|
50
|
+
initialValue: 'The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”',
|
|
51
|
+
maxHeight: 600,
|
|
52
|
+
multiLine: true,
|
|
53
|
+
name: 'multi-line-input',
|
|
54
|
+
placeholder: 'enter text of any length',
|
|
55
|
+
selectTextOnFocus: true
|
|
56
|
+
}
|
|
57
|
+
}`,...p.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
|
|
58
|
+
args: SUBMIT_ON_ENTER_PROPS,
|
|
59
|
+
render() {
|
|
60
|
+
const [lastSubmitDate, setLastSubmitDate] = useState<Date | null>(null);
|
|
61
|
+
const lastSubmit = lastSubmitDate ? formatDate(lastSubmitDate) : 'never';
|
|
62
|
+
return <form onSubmit={(event: FormEvent<HTMLFormElement>) => {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
setLastSubmitDate(new Date());
|
|
65
|
+
}}>
|
|
66
|
+
<InputText {...SUBMIT_ON_ENTER_PROPS} />
|
|
67
|
+
<pre>Last submitted: {lastSubmit}</pre>
|
|
68
|
+
</form>;
|
|
69
|
+
}
|
|
70
|
+
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
71
|
+
args: {
|
|
72
|
+
...SUBMIT_ON_ENTER_PROPS,
|
|
73
|
+
name: \`\${SUBMIT_ON_ENTER_PROPS.name}-no-form\`
|
|
74
|
+
}
|
|
75
|
+
}`,..._.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
|
|
76
|
+
args: DOUBLE_CLICK_TO_EDIT_PROPS
|
|
77
|
+
}`,...y.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
|
|
78
|
+
args: DISCARD_ON_ESCAPE_PROPS
|
|
79
|
+
}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
|
|
80
|
+
args: {
|
|
81
|
+
...DISCARD_ON_ESCAPE_PROPS,
|
|
82
|
+
...DOUBLE_CLICK_TO_EDIT_PROPS,
|
|
83
|
+
name: 'double-click-to-edit-and-discard-on-escape-input'
|
|
84
|
+
}
|
|
85
|
+
}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
|
|
86
|
+
args: {
|
|
87
|
+
autoFocus: true,
|
|
88
|
+
name: 'autofocus-input'
|
|
89
|
+
}
|
|
90
|
+
}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
|
|
91
|
+
args: {
|
|
92
|
+
className: 'multi-line-input-text',
|
|
93
|
+
initialValue: 'This textarea has a minHeight of 50px.\\n\\nTry deleting this text to see that the textarea does not shrink below the minimum height.',
|
|
94
|
+
minHeight: 50,
|
|
95
|
+
multiLine: true,
|
|
96
|
+
name: 'multi-line-min-height-input',
|
|
97
|
+
placeholder: 'enter text of any length'
|
|
98
|
+
}
|
|
99
|
+
}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
|
|
100
|
+
args: {
|
|
101
|
+
className: 'multi-line-input-text',
|
|
102
|
+
initialValue: 'This textarea has a maxHeight of 150px.\\n\\nLine 3\\nLine 4\\nLine 5\\nLine 6\\nLine 7\\nLine 8\\nLine 9\\nLine 10',
|
|
103
|
+
maxHeight: 150,
|
|
104
|
+
multiLine: true,
|
|
105
|
+
name: 'multi-line-max-height-input',
|
|
106
|
+
placeholder: 'enter text of any length'
|
|
107
|
+
}
|
|
108
|
+
}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
|
|
109
|
+
args: {
|
|
110
|
+
className: 'multi-line-input-text',
|
|
111
|
+
initialValue: 'This textarea has minHeight of 100px and maxHeight of 200px.',
|
|
112
|
+
maxHeight: 200,
|
|
113
|
+
minHeight: 100,
|
|
114
|
+
multiLine: true,
|
|
115
|
+
name: 'multi-line-min-max-height-input',
|
|
116
|
+
placeholder: 'enter text of any length'
|
|
117
|
+
}
|
|
118
|
+
}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
|
|
119
|
+
args: {
|
|
120
|
+
className: 'multi-line-input-css-transition',
|
|
121
|
+
multiLine: true,
|
|
122
|
+
name: 'multi-line-input-css-transition',
|
|
123
|
+
placeholder: 'Write a quick note here',
|
|
124
|
+
rows: 4
|
|
125
|
+
}
|
|
126
|
+
}`,...D.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
|
|
127
|
+
args: MULTI_LINE_INPUT_IN_POPOVER_PROPS,
|
|
128
|
+
render() {
|
|
129
|
+
return <>
|
|
130
|
+
<button popoverTarget="multi-line-input-popover">Open Popover</button>
|
|
131
|
+
<div id="multi-line-input-popover" popover="auto">
|
|
132
|
+
<InputText {...MULTI_LINE_INPUT_IN_POPOVER_PROPS} />
|
|
133
|
+
</div>
|
|
134
|
+
</>;
|
|
135
|
+
}
|
|
136
|
+
}`,...k.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
|
|
137
|
+
args: MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS,
|
|
138
|
+
render() {
|
|
139
|
+
return <>
|
|
140
|
+
<button popoverTarget="multi-line-input-with-autofocus-popover">
|
|
141
|
+
Open Popover
|
|
142
|
+
</button>
|
|
143
|
+
<div id="multi-line-input-with-autofocus-popover" popover="auto">
|
|
144
|
+
<InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
|
|
145
|
+
</div>
|
|
146
|
+
</>;
|
|
147
|
+
}
|
|
148
|
+
}`,...j.parameters?.docs?.source}}};const M=[`EmptyInput`,`InputWithInitialValue`,`InputWithInitialValueAndSelectTextOnFocus`,`MultiLineInputWithInitialValueAndSelectTextOnFocus`,`MultiLineInputWithSubmitOnEnter`,`MultiLineInputWithSubmitOnEnterNoForm`,`InputWithDoubleClickToEdit`,`InputWithDiscardOnEscape`,`InputWithDoubleClickToEditAndDiscardOnEscape`,`InputWithAutoFocus`,`MultiLineInputWithMinHeight`,`MultiLineInputWithMaxHeight`,`MultiLineInputWithMinHeightAndMaxHeight`,`MultiLineInputWithCSSTransition`,`MultiLineInputInPopover`,`MultiLineInputWithAutoFocusInPopover`];export{u as EmptyInput,C as InputWithAutoFocus,x as InputWithDiscardOnEscape,y as InputWithDoubleClickToEdit,S as InputWithDoubleClickToEditAndDiscardOnEscape,d as InputWithInitialValue,f as InputWithInitialValueAndSelectTextOnFocus,k as MultiLineInputInPopover,j as MultiLineInputWithAutoFocusInPopover,D as MultiLineInputWithCSSTransition,p as MultiLineInputWithInitialValueAndSelectTextOnFocus,T as MultiLineInputWithMaxHeight,w as MultiLineInputWithMinHeight,E as MultiLineInputWithMinHeightAndMaxHeight,g as MultiLineInputWithSubmitOnEnter,_ as MultiLineInputWithSubmitOnEnterNoForm,M as __namedExportsOrder,l as default};
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import{n as e}from"./lib-WXkUx4TK.js";import"./react-dom-CFVoDXTy.js";import{t}from"./jsx-runtime-CZwoFFIL.js";import"./components-CuDS54ZU.js";import{a as n}from"./blocks-C4xgyV4X.js";var r=t(),i=`data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.0001%200C7.16466%200%200%207.17472%200%2016.0256C0%2023.1061%204.58452%2029.1131%2010.9419%2031.2322C11.7415%2031.3805%2012.0351%2030.8845%2012.0351%2030.4613C12.0351%2030.0791%2012.0202%2028.8167%2012.0133%2027.4776C7.56209%2028.447%206.62283%2025.5868%206.62283%2025.5868C5.89499%2023.7345%204.8463%2023.2419%204.8463%2023.2419C3.39461%2022.2473%204.95573%2022.2678%204.95573%2022.2678C6.56242%2022.3808%207.40842%2023.9192%207.40842%2023.9192C8.83547%2026.3691%2011.1514%2025.6609%2012.0645%2025.2514C12.2081%2024.2156%2012.6227%2023.5087%2013.0803%2023.1085C9.52648%2022.7032%205.7906%2021.3291%205.7906%2015.1886C5.7906%2013.4389%206.41563%2012.0094%207.43916%2010.8871C7.27303%2010.4834%206.72537%208.85349%207.59415%206.64609C7.59415%206.64609%208.93774%206.21539%2011.9953%208.28877C13.2716%207.9337%2014.6404%207.75563%2016.0001%207.74953C17.3599%207.75563%2018.7297%207.9337%2020.0084%208.28877C23.0623%206.21539%2024.404%206.64609%2024.404%206.64609C25.2749%208.85349%2024.727%2010.4834%2024.5608%2010.8871C25.5868%2012.0094%2026.2075%2013.4389%2026.2075%2015.1886C26.2075%2021.3437%2022.4645%2022.699%2018.9017%2023.0957C19.4756%2023.593%2019.9869%2024.5683%2019.9869%2026.0634C19.9869%2028.2077%2019.9684%2029.9334%2019.9684%2030.4613C19.9684%2030.8877%2020.2564%2031.3874%2021.0674%2031.2301C27.4213%2029.1086%2032%2023.1037%2032%2016.0256C32%207.17472%2024.8364%200%2016.0001%200ZM5.99257%2022.8288C5.95733%2022.9084%205.83227%2022.9322%205.71834%2022.8776C5.60229%2022.8253%205.53711%2022.7168%205.57474%2022.6369C5.60918%2022.5549%205.7345%2022.5321%205.85029%2022.587C5.9666%2022.6393%206.03284%2022.7489%205.99257%2022.8288ZM6.7796%2023.5321C6.70329%2023.603%206.55412%2023.5701%206.45291%2023.4581C6.34825%2023.3464%206.32864%2023.197%206.40601%2023.125C6.4847%2023.0542%206.62937%2023.0874%206.73429%2023.1991C6.83895%2023.3121%206.85935%2023.4605%206.7796%2023.5321ZM7.31953%2024.4321C7.2215%2024.5003%207.0612%2024.4363%206.96211%2024.2938C6.86407%2024.1513%206.86407%2023.9804%206.96422%2023.9119C7.06358%2023.8435%207.2215%2023.905%207.32191%2024.0465C7.41968%2024.1914%207.41968%2024.3623%207.31953%2024.4321ZM8.23267%2025.4743C8.14497%2025.5712%207.95818%2025.5452%207.82146%2025.413C7.68156%2025.2838%207.64261%2025.1004%207.73058%2025.0035C7.81934%2024.9064%208.00719%2024.9337%208.14497%2025.0648C8.28381%2025.1938%208.3262%2025.3785%208.23267%2025.4743ZM9.41281%2025.8262C9.37413%2025.9517%209.19423%2026.0088%209.013%2025.9554C8.83203%2025.9005%208.7136%2025.7535%208.75016%2025.6266C8.78778%2025.5003%208.96848%2025.4408%209.15104%2025.4979C9.33174%2025.5526%209.45044%2025.6985%209.41281%2025.8262ZM10.7559%2025.9754C10.7604%2026.1076%2010.6067%2026.2172%2010.4165%2026.2196C10.2252%2026.2238%2010.0704%2026.1169%2010.0683%2025.9868C10.0683%2025.8534%2010.2185%2025.7448%2010.4098%2025.7416C10.6001%2025.7379%2010.7559%2025.8441%2010.7559%2025.9754ZM12.0753%2025.9248C12.0981%2026.0537%2011.9658%2026.1862%2011.7769%2026.2215C11.5912%2026.2554%2011.4192%2026.1758%2011.3957%2026.0479C11.3726%2025.9157%2011.5072%2025.7833%2011.6927%2025.7491C11.8819%2025.7162%2012.0512%2025.7937%2012.0753%2025.9248Z'%20fill='%23161614'/%3e%3c/svg%3e`,a=`data:image/svg+xml,%3csvg%20width='33'%20height='32'%20viewBox='0%200%2033%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_10031_177575)'%3e%3cmask%20id='mask0_10031_177575'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='4'%20width='33'%20height='25'%3e%3cpath%20d='M32.5034%204.00195H0.503906V28.7758H32.5034V4.00195Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_10031_177575)'%3e%3cpath%20d='M27.5928%206.20817C25.5533%205.27289%2023.3662%204.58382%2021.0794%204.18916C21.0378%204.18154%2020.9962%204.20057%2020.9747%204.23864C20.6935%204.73863%2020.3819%205.3909%2020.1637%205.90358C17.7042%205.53558%2015.2573%205.53558%2012.8481%205.90358C12.6299%205.37951%2012.307%204.73863%2012.0245%204.23864C12.003%204.20184%2011.9614%204.18281%2011.9198%204.18916C9.63431%204.58255%207.44721%205.27163%205.40641%206.20817C5.38874%206.21578%205.3736%206.22848%205.36355%206.24497C1.21508%2012.439%200.078646%2018.4809%200.636144%2024.4478C0.638667%2024.477%200.655064%2024.5049%200.677768%2024.5227C3.41481%2026.5315%206.06609%2027.7511%208.66815%2028.5594C8.70979%2028.5721%208.75392%2028.5569%208.78042%2028.5226C9.39594%2027.6826%209.94461%2026.7968%2010.4151%2025.8653C10.4428%2025.8107%2010.4163%2025.746%2010.3596%2025.7244C9.48927%2025.3945%208.66058%2024.9922%207.86343%2024.5354C7.80038%2024.4986%207.79533%2024.4084%207.85333%2024.3653C8.02108%2024.2397%208.18888%2024.109%208.34906%2023.977C8.37804%2023.9529%208.41842%2023.9478%208.45249%2023.963C13.6894%2026.3526%2019.359%2026.3526%2024.5341%2023.963C24.5682%2023.9465%2024.6086%2023.9516%2024.6388%2023.9757C24.799%2024.1077%2024.9668%2024.2397%2025.1358%2024.3653C25.1938%2024.4084%2025.19%2024.4986%2025.127%2024.5354C24.3298%2025.0011%2023.5011%2025.3945%2022.6296%2025.7232C22.5728%2025.7447%2022.5476%2025.8107%2022.5754%2025.8653C23.0559%2026.7955%2023.6046%2027.6812%2024.2087%2028.5213C24.234%2028.5569%2024.2794%2028.5721%2024.321%2028.5594C26.9357%2027.7511%2029.5869%2026.5315%2032.324%2024.5227C32.348%2024.5049%2032.3631%2024.4783%2032.3656%2024.4491C33.0328%2017.5506%2031.2481%2011.5584%2027.6344%206.24623C27.6256%206.22848%2027.6105%206.21578%2027.5928%206.20817ZM11.1971%2020.8146C9.62043%2020.8146%208.32129%2019.3679%208.32129%2017.5913C8.32129%2015.8146%209.59523%2014.368%2011.1971%2014.368C12.8115%2014.368%2014.0981%2015.8273%2014.0729%2017.5913C14.0729%2019.3679%2012.7989%2020.8146%2011.1971%2020.8146ZM21.8299%2020.8146C20.2533%2020.8146%2018.9541%2019.3679%2018.9541%2017.5913C18.9541%2015.8146%2020.228%2014.368%2021.8299%2014.368C23.4444%2014.368%2024.7309%2015.8273%2024.7057%2017.5913C24.7057%2019.3679%2023.4444%2020.8146%2021.8299%2020.8146Z'%20fill='%235865F2'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_10031_177575'%3e%3crect%20width='31.9995'%20height='32'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e`,o=`data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.3313%208.44657C30.9633%207.08998%2029.8791%206.02172%2028.5022%205.65916C26.0067%205.00026%2016%205.00026%2016%205.00026C16%205.00026%205.99333%205.00026%203.4978%205.65916C2.12102%206.02172%201.03665%207.08998%200.668678%208.44657C0%2010.9053%200%2016.0353%200%2016.0353C0%2016.0353%200%2021.1652%200.668678%2023.6242C1.03665%2024.9806%202.12102%2026.0489%203.4978%2026.4116C5.99333%2027.0703%2016%2027.0703%2016%2027.0703C16%2027.0703%2026.0067%2027.0703%2028.5022%2026.4116C29.8791%2026.0489%2030.9633%2024.9806%2031.3313%2023.6242C32%2021.1652%2032%2016.0353%2032%2016.0353C32%2016.0353%2032%2010.9053%2031.3313%208.44657Z'%20fill='%23ED1D24'/%3e%3cpath%20d='M12.7266%2020.6934L21.0902%2016.036L12.7266%2011.3781V20.6934Z'%20fill='white'/%3e%3c/svg%3e`,s=`data:image/svg+xml,%3csvg%20width='33'%20height='32'%20viewBox='0%200%2033%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_10031_177597)'%3e%3cpath%20opacity='0.7'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17%207.87059C17%206.48214%2017.9812%205.28722%2019.3431%205.01709L29.5249%202.99755C31.3238%202.64076%2033%204.01717%2033%205.85105V22.1344C33%2023.5229%2032.0188%2024.7178%2030.6569%2024.9879L20.4751%2027.0074C18.6762%2027.3642%2017%2025.9878%2017%2024.1539L17%207.87059Z'%20fill='%23B7F0EF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%205.85245C1%204.01857%202.67623%202.64215%204.47507%202.99895L14.6569%205.01848C16.0188%205.28861%2017%206.48354%2017%207.87198V24.1553C17%2025.9892%2015.3238%2027.3656%2013.5249%2027.0088L3.34311%2024.9893C1.98119%2024.7192%201%2023.5242%201%2022.1358V5.85245Z'%20fill='%2387E6E5'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.543%205.71289C15.543%205.71289%2016.8157%205.96289%2017.4002%206.57653C17.9847%207.19016%2018.4521%209.03107%2018.4521%209.03107C18.4521%209.03107%2018.4521%2025.1106%2018.4521%2026.9629C18.4521%2028.8152%2019.3775%2031.4174%2019.3775%2031.4174L17.4002%2028.8947L16.2575%2031.4174C16.2575%2031.4174%2015.543%2029.0765%2015.543%2027.122C15.543%2025.1674%2015.543%205.71289%2015.543%205.71289Z'%20fill='%2361C1FD'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_10031_177597'%3e%3crect%20width='32'%20height='32'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e`,c=``+new URL(`styling-Bk6zjRzU.png`,import.meta.url).href,l=``+new URL(`context-C0qIqeS4.png`,import.meta.url).href,u=`data:image/png;base64,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`,d=``+new URL(`docs---vsFbMi.png`,import.meta.url).href,f=``+new URL(`share-DGA-UcQf.png`,import.meta.url).href,p=``+new URL(`figma-plugin-CH2hELiO.png`,import.meta.url).href,m=``+new URL(`testing-cbzR9l9r.png`,import.meta.url).href,h=``+new URL(`accessibility-W_h2acOZ.png`,import.meta.url).href,g=``+new URL(`theming-D6WJLNoW.png`,import.meta.url).href,_=``+new URL(`addon-library-BWUCAmyN.png`,import.meta.url).href;const v=()=>(0,r.jsx)(`svg`,{viewBox:`0 0 14 14`,width:`8px`,height:`14px`,style:{marginLeft:`4px`,display:`inline-block`,shapeRendering:`inherit`,verticalAlign:`middle`,fill:`currentColor`,"path fill":`currentColor`},children:(0,r.jsx)(`path`,{d:`m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z`})});function y(t){let y={a:`a`,code:`code`,h1:`h1`,li:`li`,p:`p`,ul:`ul`,...e(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n,{title:`UIKit/Introduction`}),`
|
|
2
|
+
`,(0,r.jsx)(y.h1,{id:`welcome-to-uikits-storybook`,children:`Welcome to UIKit’s Storybook`}),`
|
|
3
|
+
`,(0,r.jsxs)(y.p,{children:[(0,r.jsx)(y.a,{href:`https://github.com/acusti/uikit`,rel:`nofollow`,children:`UIKit`}),` provides a collection of UI
|
|
4
|
+
components and tools for building modern web and mobile applications. To
|
|
5
|
+
see what the components look like and how to use them, explore everything
|
|
6
|
+
under the “Controls” folder in the sidebar. The four components currently
|
|
7
|
+
documented here are:`]}),`
|
|
8
|
+
`,(0,r.jsxs)(y.ul,{children:[`
|
|
9
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-inputtext--docs`,children:`InputText`})}),`
|
|
10
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-CSSValueInput--docs`,children:`CSSValueInput`})}),`
|
|
11
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-Dropdown--docs`,children:`Dropdown`})}),`
|
|
12
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-datepicker-datepicker--docs`,children:`DatePicker`})}),`
|
|
13
|
+
`]}),`
|
|
14
|
+
`,(0,r.jsx)(y.p,{children:`There are also two custom React hooks available under the “Hooks” folder:`}),`
|
|
15
|
+
`,(0,r.jsxs)(y.ul,{children:[`
|
|
16
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-hooks-useisoutofbounds--docs`,children:`useIsOutOfBounds`})}),`
|
|
17
|
+
`,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-hooks-usekeyboardevents--docs`,children:`useKeyboardEvents`})}),`
|
|
18
|
+
`]}),`
|
|
19
|
+
`,(0,r.jsx)(y.p,{children:`See below for more about Storybook and how it works.`}),`
|
|
20
|
+
`,`
|
|
21
|
+
`,(0,r.jsxs)(`div`,{className:`sb-container`,children:[(0,r.jsxs)(`div`,{className:`sb-section-title`,children:[(0,r.jsx)(y.h1,{id:`configure-your-project`,children:`Configure your project`}),(0,r.jsx)(y.p,{children:`Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.`})]}),(0,r.jsxs)(`div`,{className:`sb-section`,children:[(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:c,alt:`A wall of logos representing different styling technologies`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Add styling and CSS`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/styling-and-css`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:l,alt:`An abstraction representing the composition of data for a component`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Provide context and mocking`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:u,alt:`A representation of typography and image assets`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Load assets and resources`}),(0,r.jsxs)(`p`,{className:`sb-section-item-paragraph`,children:[`To link static files (like fonts) to your projects and stories, use the
|
|
22
|
+
`,(0,r.jsx)(y.code,{children:`staticDirs`}),` configuration option to specify folders to load when
|
|
23
|
+
starting Storybook.`]}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/images-and-assets`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]})]})]})]}),`
|
|
24
|
+
`,(0,r.jsxs)(`div`,{className:`sb-container`,children:[(0,r.jsxs)(`div`,{className:`sb-section-title`,children:[(0,r.jsx)(y.h1,{id:`do-more-with-storybook`,children:`Do more with Storybook`}),(0,r.jsx)(y.p,{children:`Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.`})]}),(0,r.jsx)(`div`,{className:`sb-section`,children:(0,r.jsxs)(`div`,{className:`sb-features-grid`,children:[(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:d,alt:`A screenshot showing the autodocs tag being set, pointing a docs page being generated`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Autodocs`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Auto-generate living,
|
|
25
|
+
interactive reference documentation from your components and stories.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-docs/autodocs`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:f,alt:`A browser window showing a Storybook being published to a chromatic.com URL`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Publish to Chromatic`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Publish your Storybook to review and collaborate with your entire team.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:p,alt:`Windows showing the Storybook plugin in Figma`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Figma Plugin`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Embed your stories into Figma to cross-reference the design and live
|
|
26
|
+
implementation in one place.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:m,alt:`Screenshot of tests passing and failing`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Testing`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Use stories to test a component in all its variations, no matter how
|
|
27
|
+
complex.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-tests/introduction`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:h,alt:`Screenshot of accessibility tests passing and failing`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Accessibility`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Automatically test your components for a11y issues as you develop.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-tests/accessibility-testing`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:g,alt:`Screenshot of Storybook in light and dark mode`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Theming`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Theme Storybook's UI to personalize it to your project.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/theming`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]})]})})]}),`
|
|
28
|
+
`,(0,r.jsxs)(`div`,{className:`sb-addon`,children:[(0,r.jsxs)(`div`,{className:`sb-addon-text`,children:[(0,r.jsx)(`h4`,{children:`Addons`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Integrate your tools with Storybook to connect workflows.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/integrations/`,target:`_blank`,children:[`Discover all addons`,(0,r.jsx)(v,{})]})]}),(0,r.jsx)(`div`,{className:`sb-addon-img`,children:(0,r.jsx)(`img`,{src:_,alt:`Integrate your tools with Storybook to connect workflows.`})})]}),`
|
|
29
|
+
`,(0,r.jsxs)(`div`,{className:`sb-section sb-socials`,children:[(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:i,alt:`Github logo`,className:`sb-explore-image`}),(0,r.jsx)(y.p,{children:`Join our contributors building the future of UI development.`}),(0,r.jsxs)(`a`,{href:`https://github.com/storybookjs/storybook`,target:`_blank`,children:[`Star on GitHub`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:a,alt:`Discord logo`,className:`sb-explore-image`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(y.p,{children:`Get support and chat with frontend developers.`}),(0,r.jsxs)(`a`,{href:`https://discord.gg/storybook`,target:`_blank`,children:[`Join Discord server`,(0,r.jsx)(v,{})]})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:o,alt:`Youtube logo`,className:`sb-explore-image`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(y.p,{children:`Watch tutorials, feature previews and interviews.`}),(0,r.jsxs)(`a`,{href:`https://www.youtube.com/@chromaticui`,target:`_blank`,children:[`Watch on YouTube`,(0,r.jsx)(v,{})]})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:s,alt:`A book`,className:`sb-explore-image`}),(0,r.jsx)(`p`,{children:`Follow guided walkthroughs on for key workflows.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/tutorials/`,target:`_blank`,children:[`Discover tutorials`,(0,r.jsx)(v,{})]})]})]}),`
|
|
30
|
+
`,(0,r.jsx)(`style`,{children:`
|
|
31
|
+
.sb-container {
|
|
32
|
+
margin-bottom: 48px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.sb-section {
|
|
36
|
+
width: 100%;
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: row;
|
|
39
|
+
gap: 20px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
img {
|
|
43
|
+
object-fit: cover;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sb-section-title {
|
|
47
|
+
margin-bottom: 32px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sb-section a:not(h1 a, h2 a, h3 a) {
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sb-section-item, .sb-grid-item {
|
|
55
|
+
flex: 1;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sb-section-item-heading {
|
|
61
|
+
padding-top: 20px !important;
|
|
62
|
+
padding-bottom: 5px !important;
|
|
63
|
+
margin: 0 !important;
|
|
64
|
+
}
|
|
65
|
+
.sb-section-item-paragraph {
|
|
66
|
+
margin: 0;
|
|
67
|
+
padding-bottom: 10px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.sb-chevron {
|
|
71
|
+
margin-left: 5px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.sb-features-grid {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: repeat(2, 1fr);
|
|
77
|
+
grid-gap: 32px 20px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.sb-socials {
|
|
81
|
+
display: grid;
|
|
82
|
+
grid-template-columns: repeat(4, 1fr);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sb-socials p {
|
|
86
|
+
margin-bottom: 10px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sb-explore-image {
|
|
90
|
+
max-height: 32px;
|
|
91
|
+
align-self: flex-start;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.sb-addon {
|
|
95
|
+
width: 100%;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
position: relative;
|
|
99
|
+
background-color: #EEF3F8;
|
|
100
|
+
border-radius: 5px;
|
|
101
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
102
|
+
background: #EEF3F8;
|
|
103
|
+
height: 180px;
|
|
104
|
+
margin-bottom: 48px;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sb-addon-text {
|
|
109
|
+
padding-left: 48px;
|
|
110
|
+
max-width: 240px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.sb-addon-text h4 {
|
|
114
|
+
padding-top: 0px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.sb-addon-img {
|
|
118
|
+
position: absolute;
|
|
119
|
+
left: 345px;
|
|
120
|
+
top: 0;
|
|
121
|
+
height: 100%;
|
|
122
|
+
width: 200%;
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.sb-addon-img img {
|
|
127
|
+
width: 650px;
|
|
128
|
+
transform: rotate(-15deg);
|
|
129
|
+
margin-left: 40px;
|
|
130
|
+
margin-top: -72px;
|
|
131
|
+
box-shadow: 0 0 1px rgba(255, 255, 255, 0);
|
|
132
|
+
backface-visibility: hidden;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@media screen and (max-width: 800px) {
|
|
136
|
+
.sb-addon-img {
|
|
137
|
+
left: 300px;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media screen and (max-width: 600px) {
|
|
142
|
+
.sb-section {
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.sb-features-grid {
|
|
147
|
+
grid-template-columns: repeat(1, 1fr);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.sb-socials {
|
|
151
|
+
grid-template-columns: repeat(2, 1fr);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sb-addon {
|
|
155
|
+
height: 280px;
|
|
156
|
+
align-items: flex-start;
|
|
157
|
+
padding-top: 32px;
|
|
158
|
+
overflow: hidden;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.sb-addon-text {
|
|
162
|
+
padding-left: 24px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sb-addon-img {
|
|
166
|
+
right: 0;
|
|
167
|
+
left: 0;
|
|
168
|
+
top: 130px;
|
|
169
|
+
bottom: 0;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
height: auto;
|
|
172
|
+
width: 124%;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.sb-addon-img img {
|
|
176
|
+
width: 1200px;
|
|
177
|
+
transform: rotate(-12deg);
|
|
178
|
+
margin-left: 0;
|
|
179
|
+
margin-top: 48px;
|
|
180
|
+
margin-bottom: -40px;
|
|
181
|
+
margin-left: -24px;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
`})]})}function b(t={}){let{wrapper:n}={...e(),...t.components};return n?(0,r.jsx)(n,{...t,children:(0,r.jsx)(y,{...t})}):y(t)}export{v as RightArrow,b as default};
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";import{t as i}from"./clsx-Bdud1Ih_.js";import{n as a}from"./dist-BreUZhw6.js";const o=`uktmonthcalendar`,s=`
|
|
2
|
+
.${o} {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
flex: 1 1 auto;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
max-width: 325px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.${o}-month-title {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
flex: 0 0 auto;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
padding-bottom: 25px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
h3.${o}-month-title-text {
|
|
20
|
+
font-size: 18px;
|
|
21
|
+
line-height: 23px;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
color: #000;
|
|
24
|
+
margin: 0px;
|
|
25
|
+
text-align: center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.${o}-month-week {
|
|
29
|
+
flex: 0 0 auto;
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-column-gap: 0px;
|
|
32
|
+
grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
|
|
33
|
+
grid-auto-flow: dense;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
padding-bottom: 12px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.${o}-month-week .week-day-item {
|
|
39
|
+
flex: 1 1 auto;
|
|
40
|
+
display: flex;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
align-items: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.${o}-month-week span.week-day-item-text {
|
|
46
|
+
text-align: center;
|
|
47
|
+
font-size: 13px;
|
|
48
|
+
line-height: 21px;
|
|
49
|
+
margin: 0px;
|
|
50
|
+
color: #9a9a9a;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.${o}-month-days {
|
|
54
|
+
flex: 1 1 auto;
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.${o}-month-row {
|
|
60
|
+
flex: 1 1 auto;
|
|
61
|
+
display: grid;
|
|
62
|
+
grid-column-gap: 0px;
|
|
63
|
+
grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
|
|
64
|
+
grid-auto-flow: dense;
|
|
65
|
+
margin-bottom: 1px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.${o}-month-day-item {
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
position: relative;
|
|
73
|
+
height: 46px;
|
|
74
|
+
width: 46px;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
border: none;
|
|
77
|
+
background-color: transparent;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.${o}-month-day-item:disabled {
|
|
81
|
+
cursor: auto;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.${o}-month-day-item.is-today span.month-day-item-text {
|
|
85
|
+
color: #eb4e3d;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.${o}.is-range .${o}-month-day-item.is-selected {
|
|
89
|
+
background-color: #f6f6f6;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.${o}.is-range .${o}-month-day-item.start-date {
|
|
93
|
+
background-color: #f6f6f6;
|
|
94
|
+
border-top-left-radius: 50%;
|
|
95
|
+
border-bottom-left-radius: 50%;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.${o}-month-day-item.start-date:after {
|
|
99
|
+
background-color: #000;
|
|
100
|
+
opacity: 1;
|
|
101
|
+
visibility: visible;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.${o}-month-day-item.start-date span.month-day-item-text {
|
|
105
|
+
color: #fff;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.${o}.is-range .${o}-month-day-item.end-date {
|
|
109
|
+
background-color: #f6f6f6;
|
|
110
|
+
border-top-right-radius: 50%;
|
|
111
|
+
border-bottom-right-radius: 50%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.${o}-month-day-item.end-date:after {
|
|
115
|
+
background-color: #000;
|
|
116
|
+
opacity: 1;
|
|
117
|
+
visibility: visible;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.${o}-month-day-item.end-date span.month-day-item-text {
|
|
121
|
+
color: #fff;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.${o}-month-day-item:hover:after,
|
|
125
|
+
.${o}-month-day-item.is-today:hover:after {
|
|
126
|
+
border-color: #000;
|
|
127
|
+
opacity: 1;
|
|
128
|
+
visibility: visible;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.${o}-month-day-item:after {
|
|
132
|
+
content: "";
|
|
133
|
+
position: absolute;
|
|
134
|
+
left: 50%;
|
|
135
|
+
top: 50%;
|
|
136
|
+
transform: translate(-50%, -50%);
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
border-radius: 50%;
|
|
139
|
+
border: 1px solid #000;
|
|
140
|
+
width: 43px;
|
|
141
|
+
height: 43px;
|
|
142
|
+
transition: opacity 0.25s ease-in-out;
|
|
143
|
+
opacity: 0;
|
|
144
|
+
visibility: hidden;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.${o}-month-day-item.is-empty:after {
|
|
148
|
+
content: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.${o}-month-day-item span.month-day-item-text {
|
|
152
|
+
text-align: center;
|
|
153
|
+
font-size: 13px;
|
|
154
|
+
line-height: 21px;
|
|
155
|
+
margin: 0px;
|
|
156
|
+
color: #000;
|
|
157
|
+
position: relative;
|
|
158
|
+
z-index: 1;
|
|
159
|
+
}
|
|
160
|
+
`;var c=1970,l=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],u=(e,t)=>(t?e.getUTCFullYear():e.getFullYear())-c;const d=(e,t)=>u(e,t)*12+(t?e.getUTCMonth():e.getMonth()),f=e=>Math.floor(e/12)+c,p=e=>{let t=e%12;return Number.isNaN(t)?``:(t<0&&(t=12+t),l[t])},m=(e,t,n)=>{let r=e<0?(12-Math.abs(e%12))%12:e%12,i=f(e);return n?new Date(Date.UTC(i,r,t)):new Date(i,r,t)},h=(e,t)=>m(e+1,0,t);var g=r(),_=e(t(),1),v=n(),y=Array(7).fill(null);function b(e){let t=(0,g.c)(47),{className:n,dateEnd:r,dateEndPreview:c,dateStart:l,isRange:u,month:b,onChange:x,onChangeEndPreview:S,title:C}=e,w,T,E,D,O,k,A;if(t[0]!==b||t[1]!==n||t[2]!==r||t[3]!==c||t[4]!==l||t[5]!==u||t[6]!==x||t[7]!==S||t[8]!==C){let e=new Date,g=Number.isFinite(b)?Math.max(-(2**53-1),Math.min(2**53-1,b)):d(e),j=f(g);C??=`${p(g)} ${j}`;let M=m(g,1),N=h(g),P=N.getDate(),F=M.getDay(),I=7-N.getDay()%7,L=P+F+I,[R,z,B]=[l,r,c].reduce((e,t,n)=>{if(t!=null&&!(t instanceof Date)&&(t=new Date(t)),t==null||Number.isNaN(t.getTime()))return e;let r=d(t);if(r<g?e[n]=-1:r>g?e[n]=P+1:e[n]=t.getDate(),n===1){let t=e[n-1],r=e[n];t!=null&&r!=null&&t>r&&(e[n-1]=r,e[n]=t)}return e},[null,null,null]),V;t[17]===x?V=t[18]:(V=e=>{let{date:t}=e.currentTarget.dataset;t&&x&&x(t)},t[17]=x,t[18]=V);let H=V,U;t[19]!==u||t[20]!==S?(U=e=>{if(u&&S){let{date:t}=e.currentTarget.dataset;t&&S(t)}},t[19]=u,t[20]=S,t[21]=U):U=t[21];let W=U;w=_.Fragment,t[22]===Symbol.for(`react.memo_cache_sentinel`)?(A=(0,v.jsx)(a,{href:`@acusti/date-picker/MonthCalendar`,children:s}),t[22]=A):A=t[22],t[23]!==n||t[24]!==u?(D=i(o,n,{"is-range":u}),t[23]=n,t[24]=u,t[25]=D):D=t[25],t[26]===C?O=t[27]:(O=(0,v.jsx)(`div`,{className:`${o}-month-title`,children:(0,v.jsx)(`h3`,{className:`${o}-month-title-text`,children:C})}),t[26]=C,t[27]=O);let G;t[28]===Symbol.for(`react.memo_cache_sentinel`)?(G=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Su`})}),t[28]=G):G=t[28];let K;t[29]===Symbol.for(`react.memo_cache_sentinel`)?(K=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Mo`})}),t[29]=K):K=t[29];let q;t[30]===Symbol.for(`react.memo_cache_sentinel`)?(q=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Tu`})}),t[30]=q):q=t[30];let J;t[31]===Symbol.for(`react.memo_cache_sentinel`)?(J=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`We`})}),t[31]=J):J=t[31];let Y;t[32]===Symbol.for(`react.memo_cache_sentinel`)?(Y=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Th`})}),t[32]=Y):Y=t[32];let X;t[33]===Symbol.for(`react.memo_cache_sentinel`)?(X=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Fr`})}),t[33]=X):X=t[33],t[34]===Symbol.for(`react.memo_cache_sentinel`)?(k=(0,v.jsxs)(`div`,{className:`${o}-month-week`,children:[G,K,q,J,Y,X,(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Sa`})})]}),t[34]=k):k=t[34],T=`${o}-month-days`,E=Array(Math.floor(L/7)).fill(null).map((t,n)=>(0,v.jsx)(`div`,{className:`${o}-month-row`,children:y.map((t,r)=>{r+=n*7;let a=r-F+1,s=a<1||a>P,c=s?null:m(g,a),l=R!=null&&a>R,u=z==null&&B!=null&&a<B||z!=null&&a<z;return(0,v.jsx)(`button`,{className:i(`${o}-month-day-item`,{"end-date":!s&&a===z,"is-empty":s,"is-selected":!s&&l&&u,"is-today":!s&&g===d(e)&&a===e.getDate(),"start-date":!s&&a===R}),"data-date":c?.toISOString(),disabled:s,onClick:H,onMouseEnter:W,type:`button`,children:s?null:(0,v.jsx)(`span`,{className:`month-day-item-text`,children:a})},`MonthDayItem-${a}`)})},`MonthRow-${n}`)),t[0]=b,t[1]=n,t[2]=r,t[3]=c,t[4]=l,t[5]=u,t[6]=x,t[7]=S,t[8]=C,t[9]=w,t[10]=T,t[11]=E,t[12]=D,t[13]=O,t[14]=k,t[15]=A,t[16]=C}else w=t[9],T=t[10],E=t[11],D=t[12],O=t[13],k=t[14],A=t[15],C=t[16];let j;t[35]!==T||t[36]!==E?(j=(0,v.jsx)(`div`,{className:T,children:E}),t[35]=T,t[36]=E,t[37]=j):j=t[37];let M;t[38]!==D||t[39]!==O||t[40]!==k||t[41]!==j?(M=(0,v.jsxs)(`div`,{className:D,children:[O,k,j]}),t[38]=D,t[39]=O,t[40]=k,t[41]=j,t[42]=M):M=t[42];let N;return t[43]!==w||t[44]!==A||t[45]!==M?(N=(0,v.jsxs)(w,{children:[A,M]}),t[43]=w,t[44]=A,t[45]=M,t[46]=N):N=t[46],N}b.__docgenInfo={description:``,methods:[],displayName:`MonthCalendar`,props:{className:{required:!1,tsType:{name:`string`},description:``},dateEnd:{required:!1,tsType:{name:`union`,raw:`Date | null | number | string`,elements:[{name:`Date`},{name:`null`},{name:`number`},{name:`string`}]},description:``},dateEndPreview:{required:!1,tsType:{name:`union`,raw:`null | string`,elements:[{name:`null`},{name:`string`}]},description:``},dateStart:{required:!1,tsType:{name:`union`,raw:`Date | null | number | string`,elements:[{name:`Date`},{name:`null`},{name:`number`},{name:`string`}]},description:``},isRange:{required:!1,tsType:{name:`boolean`},description:``},month:{required:!0,tsType:{name:`number`},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(date: string) => void`,signature:{arguments:[{type:{name:`string`},name:`date`}],return:{name:`void`}}},description:``},onChangeEndPreview:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(date: string) => void`,signature:{arguments:[{type:{name:`string`},name:`date`}],return:{name:`void`}}},description:``},title:{required:!1,tsType:{name:`string`},description:``}}};var x={argTypes:{dateEnd:{control:`date`,description:`(optional) end date of current date range`},dateStart:{control:`date`,description:`(optional) start date of current date range`}},component:b,parameters:{docs:{description:{component:"`MonthCalendar` is a React component that renders a calendar UI for the given month."}}},tags:[`autodocs`],title:`UIKit/Controls/DatePicker/MonthCalendar`};const S={args:{className:`month-calendar-story`,month:d(new Date)}},C={args:{className:`february-month-calendar-story`,month:181}},w={args:{className:`date-range-month-calendar-story`,dateEnd:new Date(2023,10,14),dateStart:new Date(2023,10,9),month:d(new Date(2023,10,1))}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
|
|
161
|
+
args: {
|
|
162
|
+
className: 'month-calendar-story',
|
|
163
|
+
month: getMonthFromDate(new Date())
|
|
164
|
+
}
|
|
165
|
+
}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
|
|
166
|
+
args: {
|
|
167
|
+
className: 'february-month-calendar-story',
|
|
168
|
+
month: 181
|
|
169
|
+
}
|
|
170
|
+
}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
|
|
171
|
+
args: {
|
|
172
|
+
className: 'date-range-month-calendar-story',
|
|
173
|
+
dateEnd: new Date(2023, 10, 14),
|
|
174
|
+
dateStart: new Date(2023, 10, 9),
|
|
175
|
+
month: getMonthFromDate(new Date(2023, 10, 1))
|
|
176
|
+
}
|
|
177
|
+
}`,...w.parameters?.docs?.source}}};const T=[`ThisMonthsCalendar`,`February1985Calendar`,`DateRangeDiwaliCalendar`];export{w as DateRangeDiwaliCalendar,C as February1985Calendar,S as ThisMonthsCalendar,T as __namedExportsOrder,x as default};
|