@designcrowd/fe-shared-lib 1.5.21 → 1.5.22
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/dist/css/tailwind-brandCrowd.css +80 -3
- package/dist/css/tailwind-brandPage.css +76 -3
- package/dist/css/tailwind-crazyDomains.css +80 -3
- package/dist/css/tailwind-designCom.css +80 -3
- package/dist/css/tailwind-designCrowd.css +80 -3
- package/package.json +1 -1
- package/src/atoms/components/Icon/Icon.stories.js +2 -0
- package/src/atoms/components/Icon/Icon.vue +4 -0
- package/src/atoms/components/Icon/icons/digital-business-card-filled.vue +8 -0
- package/src/atoms/components/Icon/icons/link-in-bio-filled.vue +8 -0
- package/.storybook-static/assets/Auth-CV5AmoX8.css +0 -1
- package/.storybook-static/assets/Auth.stories-CX3sjxh5.js +0 -490
- package/.storybook-static/assets/AuthCrazyDomains.stories-Didj_VFa.js +0 -73
- package/.storybook-static/assets/Button-5UzSGUF6.css +0 -1
- package/.storybook-static/assets/Button-DtVlr_q3.js +0 -1
- package/.storybook-static/assets/ButtonGroup-Dfr7bNL2.css +0 -1
- package/.storybook-static/assets/ButtonGroup.stories-4EQk-ktb.js +0 -503
- package/.storybook-static/assets/ButtonPrimary-Bu6bXb_c.css +0 -1
- package/.storybook-static/assets/ButtonPrimary-DG9wNod9.js +0 -1
- package/.storybook-static/assets/Buttons.stories-B_KpeCzt.js +0 -761
- package/.storybook-static/assets/ButtonsCrazyDomains.stories-oZtahAmR.js +0 -199
- package/.storybook-static/assets/Checkbox.mixin-DkHpdvGa.js +0 -1
- package/.storybook-static/assets/Checkbox.stories-C67RL0ut.js +0 -203
- package/.storybook-static/assets/Checktile.stories-DN2wfzd6.js +0 -88
- package/.storybook-static/assets/CollapsiblePanel.stories-BkzrqfVG.js +0 -39
- package/.storybook-static/assets/ColorPicker.stories-85BQwpyF.js +0 -73
- package/.storybook-static/assets/CopyToClipboardText.stories-Csh5nVRs.js +0 -32
- package/.storybook-static/assets/Dropdown.stories-NNlxNopk.js +0 -159
- package/.storybook-static/assets/DropdownItem-CDX_V6Mi.js +0 -1
- package/.storybook-static/assets/DropdownItem-CLNmWtKh.css +0 -1
- package/.storybook-static/assets/FormControl.mixin-_gXRExB7.js +0 -1
- package/.storybook-static/assets/HashRouteModal.stories-Dy1_nLTJ.js +0 -64
- package/.storybook-static/assets/HelloBar-z54fob0q.js +0 -1
- package/.storybook-static/assets/HelloBar.stories-ClJ9_KRK.js +0 -342
- package/.storybook-static/assets/Icon-8mZGP41G.js +0 -144
- package/.storybook-static/assets/Icon.stories-BcXMvpuh.js +0 -126
- package/.storybook-static/assets/Icon.stories-D6ECVMta.js +0 -751
- package/.storybook-static/assets/Loader-D61Ki9P1.js +0 -1
- package/.storybook-static/assets/LogoBusinessBrandColours-B1_8hw0H.js +0 -1
- package/.storybook-static/assets/LogoBusinessBrandColours-DEFhAyxR.css +0 -1
- package/.storybook-static/assets/LogoBusinessBrandColours.stories-CIWe9ndn.js +0 -36
- package/.storybook-static/assets/Masonry-C2MNiGg0.css +0 -1
- package/.storybook-static/assets/Masonry.stories-CDT8kZCv.js +0 -71
- package/.storybook-static/assets/Modal-BQrpXSGA.js +0 -1
- package/.storybook-static/assets/Modal-BvVMN71n.css +0 -1
- package/.storybook-static/assets/Modal.stories-BycF7YL6.js +0 -345
- package/.storybook-static/assets/Notice.stories-BufkrC1b.js +0 -222
- package/.storybook-static/assets/NumberStepper-Blffv09R.css +0 -1
- package/.storybook-static/assets/NumberStepper.stories-6_y_lEgC.js +0 -64
- package/.storybook-static/assets/PaymentConfigList-wI1eTv5x.css +0 -1
- package/.storybook-static/assets/PaymentConfigList.stories-BlzzKrzz.js +0 -126
- package/.storybook-static/assets/Picture-Cq76CaoK.js +0 -1
- package/.storybook-static/assets/Picture.stories-BDqRm9_g.js +0 -119
- package/.storybook-static/assets/Pill-BsMeJhV9.js +0 -1
- package/.storybook-static/assets/Pill.stories-DUvzbtnS.js +0 -18
- package/.storybook-static/assets/PillBar-os4mJV3M.css +0 -1
- package/.storybook-static/assets/PillBar.stories-BUMLXBij.js +0 -41
- package/.storybook-static/assets/Price-DKOwLeD0.js +0 -1
- package/.storybook-static/assets/Price.stories-DlqrNUWI.js +0 -221
- package/.storybook-static/assets/PublishBrandPageModal-CLU8-If3.css +0 -1
- package/.storybook-static/assets/PublishBrandPageModal.stories-Dqobvq-n.js +0 -273
- package/.storybook-static/assets/SearchBar.stories-_wPX3-Rl.js +0 -12
- package/.storybook-static/assets/Select-Dw-zvSUg.css +0 -1
- package/.storybook-static/assets/Select.stories-BWINGxdY.js +0 -108
- package/.storybook-static/assets/SellDomainNameList.fixtures-LC6fjr_b.js +0 -1
- package/.storybook-static/assets/SellDomainNameListModal-ByK_ak0A.js +0 -1
- package/.storybook-static/assets/SellDomainNameListModal-CdfyEX1a.css +0 -1
- package/.storybook-static/assets/SellDomainNameListModal.stories-DrL8w2AY.js +0 -71
- package/.storybook-static/assets/SellDomainNameListSearchResult-1WuAKfzI.css +0 -1
- package/.storybook-static/assets/SellDomainNameListSearchResult-By0IpIM_.js +0 -1
- package/.storybook-static/assets/SellDomainNameSearchWithResults-BttjI4PH.js +0 -1
- package/.storybook-static/assets/SellDomainNameSearchWithResults.stories-Dm1Q8Cza.js +0 -37
- package/.storybook-static/assets/SellDomainNameWidget.stories-CKoz3WnZ.js +0 -36
- package/.storybook-static/assets/SignIn-DNYeJu86.css +0 -1
- package/.storybook-static/assets/SignIn-Dt8OJr0J.js +0 -1
- package/.storybook-static/assets/Slider-Cog2FFdj.css +0 -1
- package/.storybook-static/assets/Slider.stories-08DN2SFB.js +0 -141
- package/.storybook-static/assets/StarRating-BtKh7pzm.css +0 -1
- package/.storybook-static/assets/StarRating.stories-BEIj9ufA.js +0 -45
- package/.storybook-static/assets/TabMenu.stories-D9f0pyZI.js +0 -47
- package/.storybook-static/assets/TextCopyField-B04vTGbG.js +0 -1
- package/.storybook-static/assets/TextCopyField.stories-KD0WUWzA.js +0 -47
- package/.storybook-static/assets/TextInput-JK1M0hv6.js +0 -1
- package/.storybook-static/assets/TextInput.stories-BO0eQqBY.js +0 -233
- package/.storybook-static/assets/Textarea.stories-Bcn4sCkV.js +0 -207
- package/.storybook-static/assets/Toggle.stories-CuTFLoNh.js +0 -161
- package/.storybook-static/assets/Tooltip-DcSbUh5f.js +0 -1
- package/.storybook-static/assets/Tooltip-DyXIgFQH.css +0 -1
- package/.storybook-static/assets/Tooltip.stories-B0I_PBGG.js +0 -953
- package/.storybook-static/assets/UploadYourLogoApplication-EyTEQx-x.css +0 -9
- package/.storybook-static/assets/UploadYourLogoApplication.stories-Dixp1ynI.js +0 -194
- package/.storybook-static/assets/UploadYourLogoDropzone-DQqACf-e.css +0 -1
- package/.storybook-static/assets/UploadYourLogoDropzone-DouZtNvi.js +0 -24
- package/.storybook-static/assets/UploadYourLogoDropzone.stories-BHYeu4gz.js +0 -55
- package/.storybook-static/assets/UploadedLogoSearchResultCard.stories-D1KR63O4.js +0 -79
- package/.storybook-static/assets/_commonjsHelpers-D6-XlEtG.js +0 -1
- package/.storybook-static/assets/_plugin-vue_export-helper-DlAUqK2U.js +0 -1
- package/.storybook-static/assets/api-lSJGRrF2.js +0 -1
- package/.storybook-static/assets/axe-nGVJxRof.js +0 -30
- package/.storybook-static/assets/brand-crowd-api.client-DiPM1Wo-.js +0 -1
- package/.storybook-static/assets/bundled-translations-BZ57czTo.js +0 -1
- package/.storybook-static/assets/bundled-translations.de-DE-DXggTXB2.js +0 -1
- package/.storybook-static/assets/bundled-translations.es-ES-DtMmvicd.js +0 -1
- package/.storybook-static/assets/bundled-translations.fr-FR-BrQqbieG.js +0 -1
- package/.storybook-static/assets/bundled-translations.pt-PT-CpiWEAtr.js +0 -1
- package/.storybook-static/assets/carousel-CMMZ5MZ-.css +0 -1
- package/.storybook-static/assets/carousel.stories-o3eu2Qyc.js +0 -374
- package/.storybook-static/assets/event-constants-CMO9VQVu.js +0 -1
- package/.storybook-static/assets/iframe-C86bI_2U.js +0 -1126
- package/.storybook-static/assets/index-Bw-gCGc_.js +0 -6
- package/.storybook-static/assets/index-DhkYCT1V.js +0 -29
- package/.storybook-static/assets/matchers-7Z3WT2CE-T3xScrR7.js +0 -14
- package/.storybook-static/assets/tracking-ATsLLehC.js +0 -1
- package/.storybook-static/css/tailwind-brandCrowd.css +0 -2404
- package/.storybook-static/css/tailwind-brandPage.css +0 -2088
- package/.storybook-static/css/tailwind-crazyDomains.css +0 -2404
- package/.storybook-static/css/tailwind-designCom.css +0 -2404
- package/.storybook-static/css/tailwind-designCrowd.css +0 -2404
- package/.storybook-static/favicon.svg +0 -1
- package/.storybook-static/iframe.html +0 -694
- package/.storybook-static/index.html +0 -156
- package/.storybook-static/index.json +0 -1
- package/.storybook-static/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/project.json +0 -1
- package/.storybook-static/sb-addons/a11y-1/manager-bundle.js +0 -5
- package/.storybook-static/sb-addons/links-2/manager-bundle.js +0 -3
- package/.storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -188
- package/.storybook-static/sb-addons/themes-3/manager-bundle.js +0 -3
- package/.storybook-static/sb-common-assets/favicon.svg +0 -1
- package/.storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/sb-manager/globals-module-info.js +0 -797
- package/.storybook-static/sb-manager/globals-runtime.js +0 -72062
- package/.storybook-static/sb-manager/globals.js +0 -34
- package/.storybook-static/sb-manager/runtime.js +0 -13002
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{T as p}from"./TextInput-JK1M0hv6.js";import{B as d}from"./Button-DtVlr_q3.js";import{c,h as a,a as n,o as f}from"./iframe-C86bI_2U.js";import{_ as m}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={components:{TextInput:p,Button:d},props:{text:{type:String,required:!0},buttonVariant:{type:String,required:!1,default:"primary"},defaultCopyButtonText:{type:String,required:!1,default:"Copy"},copiedButtonText:{type:String,required:!1,default:"Copied!"},reset:{type:Boolean,required:!1,default:!1}},data(){return{copyButtonText:this.defaultCopyButtonText}},watch:{reset(e,t){e!==t&&(this.copyButtonText=this.defaultCopyButtonText)}},methods:{onClick(){this.$emit("on-click"),this.copyToClipboard()},copyToClipboard(){this.copyButtonText=this.copiedButtonText,navigator.clipboard.writeText(this.text)}}},y={class:"tw-flex tw-w-full"};function x(e,t,o,T,l,u){const s=n("TextInput"),i=n("Button");return f(),c("div",y,[a(s,{"model-value":o.text,readonly:!0,"border-right":!1,"element-classes":"tw-m-0",class:"tw-w-full"},null,8,["model-value"]),a(i,{label:l.copyButtonText,variant:o.buttonVariant,rounded:!1,"rounded-right":!0,"full-height":!0,size:"small-wide",onOnClick:u.onClick},null,8,["label","variant","onOnClick"])])}const g=m(r,[["render",x]]);r.__docgenInfo={exportName:"default",displayName:"TextCopyField",description:"",tags:{},props:[{name:"text",type:{name:"string"},required:!0},{name:"buttonVariant",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'primary'"}},{name:"defaultCopyButtonText",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Copy'"}},{name:"copiedButtonText",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Copied!'"}},{name:"reset",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"on-click"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/TextCopyField/TextCopyField.vue"]};export{g as T};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import{T}from"./TextCopyField-B04vTGbG.js";import{B as C}from"./Button-DtVlr_q3.js";import"./TextInput-JK1M0hv6.js";import"./FormControl.mixin-_gXRExB7.js";import"./Icon-8mZGP41G.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-DG9wNod9.js";const _={title:"Components/Text Copy Field",component:T},a={components:{TextCopyField:T,Button:C},data(){return{value:"Hello world",copyButtonText:"Hello!",copiedButtonText:"Goodbye!",reset:!0}},methods:{resetCopy(){this.reset=!this.reset}}},t=()=>({...a,template:`
|
|
2
|
-
<TextCopyField button-variant="primary" :text="value" />
|
|
3
|
-
`}),e=()=>({...a,template:`
|
|
4
|
-
<TextCopyField button-variant="secondary" :text="value" />
|
|
5
|
-
`}),r=()=>({...a,template:`
|
|
6
|
-
<div>
|
|
7
|
-
<TextCopyField button-variant="primary" :text="value" :defaultCopyButtonText="copyButtonText" :copiedButtonText="copiedButtonText" />
|
|
8
|
-
</div>
|
|
9
|
-
`}),o=()=>({...a,template:`
|
|
10
|
-
<div>
|
|
11
|
-
<TextCopyField button-variant="primary" :text="value" :reset="reset" />
|
|
12
|
-
<Button label="Reset" variant="primary" size="large" @on-click="resetCopy()" />
|
|
13
|
-
</div>
|
|
14
|
-
`});var n,s,p;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
|
|
15
|
-
return {
|
|
16
|
-
...data,
|
|
17
|
-
template: \`
|
|
18
|
-
<TextCopyField button-variant="primary" :text="value" />
|
|
19
|
-
\`
|
|
20
|
-
};
|
|
21
|
-
}`,...(p=(s=t.parameters)==null?void 0:s.docs)==null?void 0:p.source}}};var i,u,d;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
|
|
22
|
-
return {
|
|
23
|
-
...data,
|
|
24
|
-
template: \`
|
|
25
|
-
<TextCopyField button-variant="secondary" :text="value" />
|
|
26
|
-
\`
|
|
27
|
-
};
|
|
28
|
-
}`,...(d=(u=e.parameters)==null?void 0:u.docs)==null?void 0:d.source}}};var m,c,l;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
|
|
29
|
-
return {
|
|
30
|
-
...data,
|
|
31
|
-
template: \`
|
|
32
|
-
<div>
|
|
33
|
-
<TextCopyField button-variant="primary" :text="value" :defaultCopyButtonText="copyButtonText" :copiedButtonText="copiedButtonText" />
|
|
34
|
-
</div>
|
|
35
|
-
\`
|
|
36
|
-
};
|
|
37
|
-
}`,...(l=(c=r.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var y,x,v;o.parameters={...o.parameters,docs:{...(y=o.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
|
|
38
|
-
return {
|
|
39
|
-
...data,
|
|
40
|
-
template: \`
|
|
41
|
-
<div>
|
|
42
|
-
<TextCopyField button-variant="primary" :text="value" :reset="reset" />
|
|
43
|
-
<Button label="Reset" variant="primary" size="large" @on-click="resetCopy()" />
|
|
44
|
-
</div>
|
|
45
|
-
\`
|
|
46
|
-
};
|
|
47
|
-
}`,...(v=(x=o.parameters)==null?void 0:x.docs)==null?void 0:v.source}}};const k=["Primary","Secondary","CustomText","ResetButton"];export{r as CustomText,t as Primary,o as ResetButton,e as Secondary,k as __namedExportsOrder,_ as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{F as w}from"./FormControl.mixin-_gXRExB7.js";import{c as t,f as i,e as s,b as m,z as y,t as f,h as p,m as b,C as u,G as F,a as x,o as l}from"./iframe-C86bI_2U.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const C={mixins:[w],props:{type:{type:String,required:!1,default:"text"},enableClear:{type:Boolean,required:!1,default:!1},enableClearConfirmation:{type:Boolean,required:!1,default:!1},borderLeft:{type:Boolean,required:!1,default:!0},borderRight:{type:Boolean,required:!1,default:!0},prefixText:{type:String,required:!1,default:void 0},elementClasses:{type:String,required:!1,default:""}},computed:{enableInput(){return this.enableClear||this.enableClearConfirmation}},methods:{onClearInput(){this.enableClear?(this.$emit("on-clear"),this.input("")):this.enableClearConfirmation&&this.$emit("on-clear-confirmation")},setValidationMessage(e){e.target.setCustomValidity(this.requiredMessage)}}},h={class:"tw-box-border"},c=["for"],v={key:0,class:"tw-text-error-500"},q={key:0,class:"tw-font-sans tw-bg-grayscale-200 tw-text-grayscale-600 tw-text-sm tw-px-2 tw-inline-flex tw-items-center tw-border tw-border-solid tw-shadow-inner tw-border-grayscale-500 tw-rounded-l tw-border-r-0"},V=["id","type","value","name","required","placeholder","disabled","readonly","minlength","maxlength"];function j(e,a,r,I,k,o){const d=x("Icon");return l(),t("div",h,[e.label?(l(),t("label",{key:0,for:`scl-input-${e.id}`,class:m(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly}])},[y(f(e.label)+" ",1),e.required?(l(),t("span",v,"*")):i("",!0)],10,c)):i("",!0),s("div",{class:m({"tw-flex":!!r.prefixText})},[r.prefixText?(l(),t("span",q,f(r.prefixText),1)):i("",!0),s("div",{class:m([{"tw-relative":e.icon||o.enableInput},"tw-w-full"])},[e.icon?(l(),t("div",{key:0,class:m(["tw-absolute tw-top-0 tw-left-0 tw-transform tw-translate-x-4 tw-text-grayscale-500",{"tw-translate-y-2.5":e.size==="sm","tw-translate-y-1/2":e.size!=="sm"}])},[p(d,{name:e.icon,size:"md"},null,8,["name"])],2)):i("",!0),s("input",b({id:e.id?`scl-input-${e.id}`:null},e.attrs,{type:r.type,value:e.modelValue,name:e.name,required:e.required,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,minlength:e.minlength,maxlength:e.maxlength,class:[[r.elementClasses,{"tw-bg-white":!e.readonly,"tw-bg-grayscale-200":e.readonly,"tw-border-error-500 focus:tw-border-error-600":e.error,"tw-border-warning-500 focus:tw-border-warning-600":e.warning,"tw-border-success-500 focus:tw-border-success-600":e.success,"tw-border-grayscale-500 focus:tw-border-grayscale-600":!e.error&&!e.warning&&!e.success,"tw-opacity-50":e.disabled,"tw-pl-12":e.icon,"tw-pr-12":r.enableClear,"tw-py-2":e.size==="sm","tw-py-3.5":e.size!=="sm","tw-rounded-r":r.borderRight,"tw-rounded-l":r.borderLeft&&!r.prefixText,"tw-border-l-0":!r.borderLeft,"tw-border-r-0":!r.borderRight,"!tw-rounded-l-none":r.borderRight&&!r.borderLeft,"!tw-rounded-r-none":r.borderLeft&&!r.borderRight}],"tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"],onInvalid:a[0]||(a[0]=(...n)=>o.setValidationMessage&&o.setValidationMessage(...n)),onInput:a[1]||(a[1]=u(n=>e.input(n.target.value,n),["stop"])),onKeyup:[a[2]||(a[2]=u(n=>e.keyup(n.target.value),["stop"])),a[6]||(a[6]=F(n=>e.enterKeyUp(n.target.value),["enter"]))],onKeydown:a[3]||(a[3]=u(n=>e.keydown(n.target.value,n),["stop"])),onFocus:a[4]||(a[4]=n=>e.focus(n.target.value)),onBlur:a[5]||(a[5]=n=>e.blur(n.target.value))}),null,16,V),o.enableInput&&e.modelValue!==""?(l(),t("div",{key:1,class:m(["tw-absolute tw-top-0 tw-right-0 tw-transform tw--translate-x-4 tw-text-grayscale-500 tw-cursor-pointer",{"tw-translate-y-2.5":e.size==="sm","tw-translate-y-1/2":e.size!=="sm"}]),onClick:a[7]||(a[7]=(...n)=>o.onClearInput&&o.onClearInput(...n))},[p(d,{name:"close",size:"md"})],2)):i("",!0)],2)],2)])}const L=g(C,[["render",j]]);C.__docgenInfo={exportName:"default",displayName:"TextInput",description:"",tags:{},props:[{name:"attrs",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"object"},required:!1,defaultValue:{func:!0,value:"() => {}"}},{name:"modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string|number"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"id",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"placeholder",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"size",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}},{name:"label",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showLabelScreenReaderOnly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"icon",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"required",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"error",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"warning",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"success",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"readonly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"name",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"maxlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"minlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"isSpaceDisabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"requiredMessage",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Please fill in this field.'"}},{name:"type",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'text'"}},{name:"enableClear",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"enableClearConfirmation",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"borderLeft",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"borderRight",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"prefixText",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"elementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"update:modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"input",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keyup",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keydown",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"focus",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"blur",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"enter-key-up",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"on-clear"},{name:"on-clear-confirmation"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/TextInput/TextInput.vue"]};export{L as T};
|
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
import{T as g}from"./TextInput-JK1M0hv6.js";import"./FormControl.mixin-_gXRExB7.js";import"./Icon-8mZGP41G.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const he={title:"Components/Text Input",component:g},e={components:{TextInput:g},data(){return{value:"Hello world",attrs:{"data-test-tag":"test"}}}},t=()=>({...e,template:`
|
|
2
|
-
<TextInput v-model="value" :attrs="attrs" />
|
|
3
|
-
`}),r=()=>({...e,template:`
|
|
4
|
-
<TextInput v-model="value" size="sm" :attrs="attrs" />
|
|
5
|
-
`}),a=()=>({...e,template:`
|
|
6
|
-
<TextInput v-model="value" size="sm" icon="message" :attrs="attrs" />
|
|
7
|
-
`}),n=()=>({...e,template:`
|
|
8
|
-
<TextInput v-model="value" icon="message" :attrs="attrs" />
|
|
9
|
-
`}),s=()=>({...e,template:`
|
|
10
|
-
<TextInput v-model="value" label="Your Name" :attrs="attrs" />
|
|
11
|
-
`}),o=()=>({...e,template:`
|
|
12
|
-
<TextInput v-model="value" label="Your Name" :required="true" :attrs="attrs" />
|
|
13
|
-
`}),l=()=>({...e,template:`
|
|
14
|
-
<TextInput v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
15
|
-
`}),u=()=>({...e,template:`
|
|
16
|
-
<TextInput v-model="value" :warning="true" :attrs="attrs" />
|
|
17
|
-
`}),d=()=>({...e,template:`
|
|
18
|
-
<TextInput v-model="value" :error="true" :attrs="attrs" />
|
|
19
|
-
`}),p=()=>({...e,template:`
|
|
20
|
-
<TextInput v-model="value" :success="true" :attrs="attrs" />
|
|
21
|
-
`}),c=()=>({...e,template:`
|
|
22
|
-
<TextInput v-model="value" :disabled="true" :attrs="attrs" />
|
|
23
|
-
`}),m=()=>({...e,template:`
|
|
24
|
-
<TextInput v-model="value" :readonly="true" :attrs="attrs" />
|
|
25
|
-
`}),i=()=>({...e,template:`
|
|
26
|
-
<TextInput placeholder="Start typing..." :attrs="attrs" />
|
|
27
|
-
`}),v=()=>({...e,template:`
|
|
28
|
-
<div>
|
|
29
|
-
<TextInput v-model="value" :enable-clear="true" @on-clear="value = ''" :attrs="attrs" />
|
|
30
|
-
<span>Current Text Value: {{value}}</span>
|
|
31
|
-
</div>
|
|
32
|
-
`}),x=()=>({...e,template:`
|
|
33
|
-
<TextInput placeholder="your-brand-name" prefix-text="https://www.brand.page/" :attrs="attrs" />
|
|
34
|
-
`}),T=()=>({...e,template:`
|
|
35
|
-
<TextInput v-model="value" :border-left="false" :attrs="attrs" />
|
|
36
|
-
`}),I=()=>({...e,template:`
|
|
37
|
-
<TextInput v-model="value" :border-right="false" :attrs="attrs" />
|
|
38
|
-
`}),b=()=>({components:{TextInput:g},data(){return{blurCalled:0,focusCalled:0,keyDownCalled:0,keyUpCalled:0}},template:`
|
|
39
|
-
<div>
|
|
40
|
-
<TextInput placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
|
|
41
|
-
<table border="1" class="tw-font-sans tw-mt-8">
|
|
42
|
-
<tr>
|
|
43
|
-
<td>blurCalled</td>
|
|
44
|
-
<td>{{ blurCalled }}</td>
|
|
45
|
-
</tr>
|
|
46
|
-
<tr>
|
|
47
|
-
<td>focusCalled</td>
|
|
48
|
-
<td>{{ focusCalled }}</td>
|
|
49
|
-
</tr>
|
|
50
|
-
<tr>
|
|
51
|
-
<td>keyDownCalled</td>
|
|
52
|
-
<td>{{ keyDownCalled }}</td>
|
|
53
|
-
</tr>
|
|
54
|
-
<tr>
|
|
55
|
-
<td>keyUpCalled</td>
|
|
56
|
-
<td>{{ keyUpCalled }}</td>
|
|
57
|
-
</tr>
|
|
58
|
-
</table>
|
|
59
|
-
</div>
|
|
60
|
-
`,methods:{onBlur(){this.blurCalled+=1},onFocus(){this.focusCalled+=1},onKeyDown(){this.keyDownCalled+=1},onKeyUp(){this.keyUpCalled+=1}}});var y,C,S;t.parameters={...t.parameters,docs:{...(y=t.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
|
|
61
|
-
return {
|
|
62
|
-
...data,
|
|
63
|
-
template: \`
|
|
64
|
-
<TextInput v-model="value" :attrs="attrs" />
|
|
65
|
-
\`
|
|
66
|
-
};
|
|
67
|
-
}`,...(S=(C=t.parameters)==null?void 0:C.docs)==null?void 0:S.source}}};var w,f,h;r.parameters={...r.parameters,docs:{...(w=r.parameters)==null?void 0:w.docs,source:{originalSource:`() => {
|
|
68
|
-
return {
|
|
69
|
-
...data,
|
|
70
|
-
template: \`
|
|
71
|
-
<TextInput v-model="value" size="sm" :attrs="attrs" />
|
|
72
|
-
\`
|
|
73
|
-
};
|
|
74
|
-
}`,...(h=(f=r.parameters)==null?void 0:f.docs)==null?void 0:h.source}}};var k,D,U;a.parameters={...a.parameters,docs:{...(k=a.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
|
|
75
|
-
return {
|
|
76
|
-
...data,
|
|
77
|
-
template: \`
|
|
78
|
-
<TextInput v-model="value" size="sm" icon="message" :attrs="attrs" />
|
|
79
|
-
\`
|
|
80
|
-
};
|
|
81
|
-
}`,...(U=(D=a.parameters)==null?void 0:D.docs)==null?void 0:U.source}}};var B,N,K;n.parameters={...n.parameters,docs:{...(B=n.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
|
|
82
|
-
return {
|
|
83
|
-
...data,
|
|
84
|
-
template: \`
|
|
85
|
-
<TextInput v-model="value" icon="message" :attrs="attrs" />
|
|
86
|
-
\`
|
|
87
|
-
};
|
|
88
|
-
}`,...(K=(N=n.parameters)==null?void 0:N.docs)==null?void 0:K.source}}};var L,R,Y;s.parameters={...s.parameters,docs:{...(L=s.parameters)==null?void 0:L.docs,source:{originalSource:`() => {
|
|
89
|
-
return {
|
|
90
|
-
...data,
|
|
91
|
-
template: \`
|
|
92
|
-
<TextInput v-model="value" label="Your Name" :attrs="attrs" />
|
|
93
|
-
\`
|
|
94
|
-
};
|
|
95
|
-
}`,...(Y=(R=s.parameters)==null?void 0:R.docs)==null?void 0:Y.source}}};var E,q,z;o.parameters={...o.parameters,docs:{...(E=o.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
|
|
96
|
-
return {
|
|
97
|
-
...data,
|
|
98
|
-
template: \`
|
|
99
|
-
<TextInput v-model="value" label="Your Name" :required="true" :attrs="attrs" />
|
|
100
|
-
\`
|
|
101
|
-
};
|
|
102
|
-
}`,...(z=(q=o.parameters)==null?void 0:q.docs)==null?void 0:z.source}}};var F,P,W;l.parameters={...l.parameters,docs:{...(F=l.parameters)==null?void 0:F.docs,source:{originalSource:`() => {
|
|
103
|
-
return {
|
|
104
|
-
...data,
|
|
105
|
-
template: \`
|
|
106
|
-
<TextInput v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
107
|
-
\`
|
|
108
|
-
};
|
|
109
|
-
}`,...(W=(P=l.parameters)==null?void 0:P.docs)==null?void 0:W.source}}};var _,V,H;u.parameters={...u.parameters,docs:{...(_=u.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
110
|
-
return {
|
|
111
|
-
...data,
|
|
112
|
-
template: \`
|
|
113
|
-
<TextInput v-model="value" :warning="true" :attrs="attrs" />
|
|
114
|
-
\`
|
|
115
|
-
};
|
|
116
|
-
}`,...(H=(V=u.parameters)==null?void 0:V.docs)==null?void 0:H.source}}};var O,j,A;d.parameters={...d.parameters,docs:{...(O=d.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
|
|
117
|
-
return {
|
|
118
|
-
...data,
|
|
119
|
-
template: \`
|
|
120
|
-
<TextInput v-model="value" :error="true" :attrs="attrs" />
|
|
121
|
-
\`
|
|
122
|
-
};
|
|
123
|
-
}`,...(A=(j=d.parameters)==null?void 0:j.docs)==null?void 0:A.source}}};var G,J,M;p.parameters={...p.parameters,docs:{...(G=p.parameters)==null?void 0:G.docs,source:{originalSource:`() => {
|
|
124
|
-
return {
|
|
125
|
-
...data,
|
|
126
|
-
template: \`
|
|
127
|
-
<TextInput v-model="value" :success="true" :attrs="attrs" />
|
|
128
|
-
\`
|
|
129
|
-
};
|
|
130
|
-
}`,...(M=(J=p.parameters)==null?void 0:J.docs)==null?void 0:M.source}}};var Q,X,Z;c.parameters={...c.parameters,docs:{...(Q=c.parameters)==null?void 0:Q.docs,source:{originalSource:`() => {
|
|
131
|
-
return {
|
|
132
|
-
...data,
|
|
133
|
-
template: \`
|
|
134
|
-
<TextInput v-model="value" :disabled="true" :attrs="attrs" />
|
|
135
|
-
\`
|
|
136
|
-
};
|
|
137
|
-
}`,...(Z=(X=c.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,ee,te;m.parameters={...m.parameters,docs:{...($=m.parameters)==null?void 0:$.docs,source:{originalSource:`() => {
|
|
138
|
-
return {
|
|
139
|
-
...data,
|
|
140
|
-
template: \`
|
|
141
|
-
<TextInput v-model="value" :readonly="true" :attrs="attrs" />
|
|
142
|
-
\`
|
|
143
|
-
};
|
|
144
|
-
}`,...(te=(ee=m.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var re,ae,ne;i.parameters={...i.parameters,docs:{...(re=i.parameters)==null?void 0:re.docs,source:{originalSource:`() => {
|
|
145
|
-
return {
|
|
146
|
-
...data,
|
|
147
|
-
template: \`
|
|
148
|
-
<TextInput placeholder="Start typing..." :attrs="attrs" />
|
|
149
|
-
\`
|
|
150
|
-
};
|
|
151
|
-
}`,...(ne=(ae=i.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var se,oe,le;v.parameters={...v.parameters,docs:{...(se=v.parameters)==null?void 0:se.docs,source:{originalSource:`() => {
|
|
152
|
-
return {
|
|
153
|
-
...data,
|
|
154
|
-
template: \`
|
|
155
|
-
<div>
|
|
156
|
-
<TextInput v-model="value" :enable-clear="true" @on-clear="value = ''" :attrs="attrs" />
|
|
157
|
-
<span>Current Text Value: {{value}}</span>
|
|
158
|
-
</div>
|
|
159
|
-
\`
|
|
160
|
-
};
|
|
161
|
-
}`,...(le=(oe=v.parameters)==null?void 0:oe.docs)==null?void 0:le.source}}};var ue,de,pe;x.parameters={...x.parameters,docs:{...(ue=x.parameters)==null?void 0:ue.docs,source:{originalSource:`() => {
|
|
162
|
-
return {
|
|
163
|
-
...data,
|
|
164
|
-
template: \`
|
|
165
|
-
<TextInput placeholder="your-brand-name" prefix-text="https://www.brand.page/" :attrs="attrs" />
|
|
166
|
-
\`
|
|
167
|
-
};
|
|
168
|
-
}`,...(pe=(de=x.parameters)==null?void 0:de.docs)==null?void 0:pe.source}}};var ce,me,ie;T.parameters={...T.parameters,docs:{...(ce=T.parameters)==null?void 0:ce.docs,source:{originalSource:`() => {
|
|
169
|
-
return {
|
|
170
|
-
...data,
|
|
171
|
-
template: \`
|
|
172
|
-
<TextInput v-model="value" :border-left="false" :attrs="attrs" />
|
|
173
|
-
\`
|
|
174
|
-
};
|
|
175
|
-
}`,...(ie=(me=T.parameters)==null?void 0:me.docs)==null?void 0:ie.source}}};var ve,xe,Te;I.parameters={...I.parameters,docs:{...(ve=I.parameters)==null?void 0:ve.docs,source:{originalSource:`() => {
|
|
176
|
-
return {
|
|
177
|
-
...data,
|
|
178
|
-
template: \`
|
|
179
|
-
<TextInput v-model="value" :border-right="false" :attrs="attrs" />
|
|
180
|
-
\`
|
|
181
|
-
};
|
|
182
|
-
}`,...(Te=(xe=I.parameters)==null?void 0:xe.docs)==null?void 0:Te.source}}};var Ie,be,ge;b.parameters={...b.parameters,docs:{...(Ie=b.parameters)==null?void 0:Ie.docs,source:{originalSource:`() => {
|
|
183
|
-
return {
|
|
184
|
-
components: {
|
|
185
|
-
TextInput
|
|
186
|
-
},
|
|
187
|
-
data() {
|
|
188
|
-
return {
|
|
189
|
-
blurCalled: 0,
|
|
190
|
-
focusCalled: 0,
|
|
191
|
-
keyDownCalled: 0,
|
|
192
|
-
keyUpCalled: 0
|
|
193
|
-
};
|
|
194
|
-
},
|
|
195
|
-
template: \`
|
|
196
|
-
<div>
|
|
197
|
-
<TextInput placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
|
|
198
|
-
<table border="1" class="tw-font-sans tw-mt-8">
|
|
199
|
-
<tr>
|
|
200
|
-
<td>blurCalled</td>
|
|
201
|
-
<td>{{ blurCalled }}</td>
|
|
202
|
-
</tr>
|
|
203
|
-
<tr>
|
|
204
|
-
<td>focusCalled</td>
|
|
205
|
-
<td>{{ focusCalled }}</td>
|
|
206
|
-
</tr>
|
|
207
|
-
<tr>
|
|
208
|
-
<td>keyDownCalled</td>
|
|
209
|
-
<td>{{ keyDownCalled }}</td>
|
|
210
|
-
</tr>
|
|
211
|
-
<tr>
|
|
212
|
-
<td>keyUpCalled</td>
|
|
213
|
-
<td>{{ keyUpCalled }}</td>
|
|
214
|
-
</tr>
|
|
215
|
-
</table>
|
|
216
|
-
</div>
|
|
217
|
-
\`,
|
|
218
|
-
methods: {
|
|
219
|
-
onBlur() {
|
|
220
|
-
this.blurCalled += 1;
|
|
221
|
-
},
|
|
222
|
-
onFocus() {
|
|
223
|
-
this.focusCalled += 1;
|
|
224
|
-
},
|
|
225
|
-
onKeyDown() {
|
|
226
|
-
this.keyDownCalled += 1;
|
|
227
|
-
},
|
|
228
|
-
onKeyUp() {
|
|
229
|
-
this.keyUpCalled += 1;
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
};
|
|
233
|
-
}`,...(ge=(be=b.parameters)==null?void 0:be.docs)==null?void 0:ge.source}}};const ke=["Sample","Small","SmallWithIcon","Icon","Label","LabelRequired","LabelIcon","Warning","Error","Success","Disabled","Readonly","Placeholder","TextClearButton","PrefixText","NoLeftBorder","NoRightBorder","Events"];export{c as Disabled,d as Error,b as Events,n as Icon,s as Label,l as LabelIcon,o as LabelRequired,T as NoLeftBorder,I as NoRightBorder,i as Placeholder,x as PrefixText,m as Readonly,t as Sample,r as Small,a as SmallWithIcon,p as Success,v as TextClearButton,u as Warning,ke as __namedExportsOrder,he as default};
|
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
import{F as ge}from"./FormControl.mixin-_gXRExB7.js";import{c as n,f as w,e as q,b as j,z as be,t as we,h as he,m as Te,C as h,a as qe,o}from"./iframe-C86bI_2U.js";import{_ as je}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-8mZGP41G.js";const ye={mixins:[ge],props:{resize:{type:Boolean,required:!1,default:!0},shouldAutoFitContent:{type:Boolean,default:!1},elementClasses:{type:String,required:!1,default:""}},watch:{modelValue(){this.$emit("value-changed"),this.resizeIfRequired()}},mounted(){this.$emit("value-changed"),this.resizeIfRequired()},methods:{resizeIfRequired(){this.shouldAutoFitContent&&this.autoFitToContent()},autoFitToContent(){setTimeout(()=>{const e=document.getElementById(`scl-input-${this.id}`);e&&(e.style.height="auto",e.style.height=`${e.scrollHeight}px`)},1e3)}}},ke={class:"tw-box-border"},Ve=["for"],Se={key:0,class:"tw-text-error-500"},ze={key:0,class:"tw-absolute tw-top-0 tw-left-0 tw-transform tw-translate-y-4 tw-translate-x-4 tw-text-grayscale-500"},De=["id","value","required","placeholder","disabled","readonly","minlength","maxlength"];function Ue(e,t,T,Ie,Be,Re){const Fe=qe("Icon");return o(),n("div",ke,[e.label?(o(),n("label",{key:0,for:`scl-input-${e.id}`,class:j(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly}])},[be(we(e.label)+" ",1),e.required?(o(),n("span",Se,"*")):w("",!0)],10,Ve)):w("",!0),q("div",{class:j({"tw-relative":e.icon})},[e.icon?(o(),n("div",ze,[he(Fe,{name:e.icon,size:"md"},null,8,["name"])])):w("",!0),q("textarea",Te({id:e.id?`scl-input-${e.id}`:null},e.attrs,{type:"text",value:e.modelValue,required:e.required,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,minlength:e.minlength,maxlength:e.maxlength,class:[[T.elementClasses,{"tw-border-error-500 focus:tw-border-error-600":e.error,"tw-border-warning-500 focus:tw-border-warning-600":e.warning,"tw-border-success-500 focus:tw-border-success-600":e.success,"tw-border-grayscale-500 focus:tw-border-grayscale-600":!e.error&&!e.warning&&!e.success,"tw-opacity-50":e.disabled,"tw-pl-12":e.icon,"tw-h-20":e.size==="sm","tw-h-40":e.size==="md","tw-h-80":e.size==="lg","tw-resize-none":T.resize===!1}],"tw-font-sans tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-py-3.5 tw-text-base tw-px-4 tw-rounded tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"],onInput:t[0]||(t[0]=h(r=>e.input(r.target.value),["stop"])),onKeyup:t[1]||(t[1]=h(r=>e.keyup(r.target.value),["stop"])),onKeydown:t[2]||(t[2]=h(r=>e.keydown(r.target.value,r),["stop"])),onFocus:t[3]||(t[3]=r=>e.focus(r.target.value)),onBlur:t[4]||(t[4]=r=>e.blur(r.target.value))}),null,16,De)],2)])}const b=je(ye,[["render",Ue]]);ye.__docgenInfo={exportName:"default",displayName:"Textarea",description:"",tags:{},props:[{name:"attrs",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"object"},required:!1,defaultValue:{func:!0,value:"() => {}"}},{name:"modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string|number"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"id",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"placeholder",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"size",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}},{name:"label",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showLabelScreenReaderOnly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"icon",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"required",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"error",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"warning",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"success",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"readonly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"name",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"maxlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"minlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"isSpaceDisabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"requiredMessage",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Please fill in this field.'"}},{name:"resize",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"shouldAutoFitContent",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"elementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"update:modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"input",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keyup",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keydown",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"focus",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"blur",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"enter-key-up",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"value-changed"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Textarea/Textarea.vue"]};const Ee={title:"Components/Textarea",component:b},a={components:{Textarea:b},data(){return{value:"Hello world",attrs:{"data-test-tag":"test"}}}},l=()=>({...a,template:`
|
|
2
|
-
<Textarea v-model="value" :attrs="attrs" />
|
|
3
|
-
`}),s=()=>({...a,template:`
|
|
4
|
-
<Textarea v-model="value" size="md" :attrs="attrs" />
|
|
5
|
-
`}),m=()=>({...a,template:`
|
|
6
|
-
<Textarea v-model="value" size="lg" :attrs="attrs" />
|
|
7
|
-
`}),i=()=>({...a,template:`
|
|
8
|
-
<Textarea v-model="value" icon="message" :attrs="attrs" />
|
|
9
|
-
`}),u=()=>({components:{Textarea:b},data(){return{value:""}},template:`
|
|
10
|
-
<Textarea v-model="value" placeholder="Start typing..." :attrs="attrs"/>
|
|
11
|
-
`}),d=()=>({...a,template:`
|
|
12
|
-
<Textarea v-model="value" :disabled="true" :attrs="attrs" />
|
|
13
|
-
`}),p=()=>({...a,template:`
|
|
14
|
-
<Textarea v-model="value" :readonly="true" :attrs="attrs" />
|
|
15
|
-
`}),c=()=>({...a,template:`
|
|
16
|
-
<Textarea v-model="value" label="Message" :attrs="attrs" />
|
|
17
|
-
`}),f=()=>({...a,template:`
|
|
18
|
-
<Textarea v-model="value" label="Message" :required="true" :attrs="attrs" />
|
|
19
|
-
`}),C=()=>({...a,template:`
|
|
20
|
-
<Textarea v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
21
|
-
`}),x=()=>({...a,template:`
|
|
22
|
-
<Textarea v-model="value" :warning="true" :attrs="attrs" />
|
|
23
|
-
`}),v=()=>({...a,template:`
|
|
24
|
-
<Textarea v-model="value" :error="true" :attrs="attrs" />
|
|
25
|
-
`}),y=()=>({...a,template:`
|
|
26
|
-
<Textarea v-model="value" :success="true" :attrs="attrs" />
|
|
27
|
-
`}),F=()=>({...a,template:`
|
|
28
|
-
<Textarea v-model="value" :resize="false" :attrs="attrs" />
|
|
29
|
-
`}),g=()=>({components:{Textarea:b},data(){return{blurCalled:0,focusCalled:0,keyDownCalled:0,keyUpCalled:0}},template:`
|
|
30
|
-
<div>
|
|
31
|
-
<Textarea placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
|
|
32
|
-
<table border="1" class="tw-font-sans tw-mt-8">
|
|
33
|
-
<tr>
|
|
34
|
-
<td>blurCalled</td>
|
|
35
|
-
<td>{{ blurCalled }}</td>
|
|
36
|
-
</tr>
|
|
37
|
-
<tr>
|
|
38
|
-
<td>focusCalled</td>
|
|
39
|
-
<td>{{ focusCalled }}</td>
|
|
40
|
-
</tr>
|
|
41
|
-
<tr>
|
|
42
|
-
<td>keyDownCalled</td>
|
|
43
|
-
<td>{{ keyDownCalled }}</td>
|
|
44
|
-
</tr>
|
|
45
|
-
<tr>
|
|
46
|
-
<td>keyUpCalled</td>
|
|
47
|
-
<td>{{ keyUpCalled }}</td>
|
|
48
|
-
</tr>
|
|
49
|
-
</table>
|
|
50
|
-
</div>
|
|
51
|
-
`,methods:{onBlur(){this.blurCalled+=1},onFocus(){this.focusCalled+=1},onKeyDown(){this.keyDownCalled+=1},onKeyUp(){this.keyUpCalled+=1}}});var k,V,S;l.parameters={...l.parameters,docs:{...(k=l.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
|
|
52
|
-
return {
|
|
53
|
-
...data,
|
|
54
|
-
template: \`
|
|
55
|
-
<Textarea v-model="value" :attrs="attrs" />
|
|
56
|
-
\`
|
|
57
|
-
};
|
|
58
|
-
}`,...(S=(V=l.parameters)==null?void 0:V.docs)==null?void 0:S.source}}};var z,D,U;s.parameters={...s.parameters,docs:{...(z=s.parameters)==null?void 0:z.docs,source:{originalSource:`() => {
|
|
59
|
-
return {
|
|
60
|
-
...data,
|
|
61
|
-
template: \`
|
|
62
|
-
<Textarea v-model="value" size="md" :attrs="attrs" />
|
|
63
|
-
\`
|
|
64
|
-
};
|
|
65
|
-
}`,...(U=(D=s.parameters)==null?void 0:D.docs)==null?void 0:U.source}}};var I,B,R;m.parameters={...m.parameters,docs:{...(I=m.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
|
|
66
|
-
return {
|
|
67
|
-
...data,
|
|
68
|
-
template: \`
|
|
69
|
-
<Textarea v-model="value" size="lg" :attrs="attrs" />
|
|
70
|
-
\`
|
|
71
|
-
};
|
|
72
|
-
}`,...(R=(B=m.parameters)==null?void 0:B.docs)==null?void 0:R.source}}};var K,L,N;i.parameters={...i.parameters,docs:{...(K=i.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
|
|
73
|
-
return {
|
|
74
|
-
...data,
|
|
75
|
-
template: \`
|
|
76
|
-
<Textarea v-model="value" icon="message" :attrs="attrs" />
|
|
77
|
-
\`
|
|
78
|
-
};
|
|
79
|
-
}`,...(N=(L=i.parameters)==null?void 0:L.docs)==null?void 0:N.source}}};var M,E,$;u.parameters={...u.parameters,docs:{...(M=u.parameters)==null?void 0:M.docs,source:{originalSource:`() => {
|
|
80
|
-
return {
|
|
81
|
-
components: {
|
|
82
|
-
Textarea
|
|
83
|
-
},
|
|
84
|
-
data() {
|
|
85
|
-
return {
|
|
86
|
-
value: ''
|
|
87
|
-
};
|
|
88
|
-
},
|
|
89
|
-
template: \`
|
|
90
|
-
<Textarea v-model="value" placeholder="Start typing..." :attrs="attrs"/>
|
|
91
|
-
\`
|
|
92
|
-
};
|
|
93
|
-
}`,...($=(E=u.parameters)==null?void 0:E.docs)==null?void 0:$.source}}};var P,A,O;d.parameters={...d.parameters,docs:{...(P=d.parameters)==null?void 0:P.docs,source:{originalSource:`() => {
|
|
94
|
-
return {
|
|
95
|
-
...data,
|
|
96
|
-
template: \`
|
|
97
|
-
<Textarea v-model="value" :disabled="true" :attrs="attrs" />
|
|
98
|
-
\`
|
|
99
|
-
};
|
|
100
|
-
}`,...(O=(A=d.parameters)==null?void 0:A.docs)==null?void 0:O.source}}};var H,W,Y;p.parameters={...p.parameters,docs:{...(H=p.parameters)==null?void 0:H.docs,source:{originalSource:`() => {
|
|
101
|
-
return {
|
|
102
|
-
...data,
|
|
103
|
-
template: \`
|
|
104
|
-
<Textarea v-model="value" :readonly="true" :attrs="attrs" />
|
|
105
|
-
\`
|
|
106
|
-
};
|
|
107
|
-
}`,...(Y=(W=p.parameters)==null?void 0:W.docs)==null?void 0:Y.source}}};var G,J,Q;c.parameters={...c.parameters,docs:{...(G=c.parameters)==null?void 0:G.docs,source:{originalSource:`() => {
|
|
108
|
-
return {
|
|
109
|
-
...data,
|
|
110
|
-
template: \`
|
|
111
|
-
<Textarea v-model="value" label="Message" :attrs="attrs" />
|
|
112
|
-
\`
|
|
113
|
-
};
|
|
114
|
-
}`,...(Q=(J=c.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,_;f.parameters={...f.parameters,docs:{...(X=f.parameters)==null?void 0:X.docs,source:{originalSource:`() => {
|
|
115
|
-
return {
|
|
116
|
-
...data,
|
|
117
|
-
template: \`
|
|
118
|
-
<Textarea v-model="value" label="Message" :required="true" :attrs="attrs" />
|
|
119
|
-
\`
|
|
120
|
-
};
|
|
121
|
-
}`,...(_=(Z=f.parameters)==null?void 0:Z.docs)==null?void 0:_.source}}};var ee,ae,te;C.parameters={...C.parameters,docs:{...(ee=C.parameters)==null?void 0:ee.docs,source:{originalSource:`() => {
|
|
122
|
-
return {
|
|
123
|
-
...data,
|
|
124
|
-
template: \`
|
|
125
|
-
<Textarea v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
126
|
-
\`
|
|
127
|
-
};
|
|
128
|
-
}`,...(te=(ae=C.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};var re,ne,oe;x.parameters={...x.parameters,docs:{...(re=x.parameters)==null?void 0:re.docs,source:{originalSource:`() => {
|
|
129
|
-
return {
|
|
130
|
-
...data,
|
|
131
|
-
template: \`
|
|
132
|
-
<Textarea v-model="value" :warning="true" :attrs="attrs" />
|
|
133
|
-
\`
|
|
134
|
-
};
|
|
135
|
-
}`,...(oe=(ne=x.parameters)==null?void 0:ne.docs)==null?void 0:oe.source}}};var le,se,me;v.parameters={...v.parameters,docs:{...(le=v.parameters)==null?void 0:le.docs,source:{originalSource:`() => {
|
|
136
|
-
return {
|
|
137
|
-
...data,
|
|
138
|
-
template: \`
|
|
139
|
-
<Textarea v-model="value" :error="true" :attrs="attrs" />
|
|
140
|
-
\`
|
|
141
|
-
};
|
|
142
|
-
}`,...(me=(se=v.parameters)==null?void 0:se.docs)==null?void 0:me.source}}};var ie,ue,de;y.parameters={...y.parameters,docs:{...(ie=y.parameters)==null?void 0:ie.docs,source:{originalSource:`() => {
|
|
143
|
-
return {
|
|
144
|
-
...data,
|
|
145
|
-
template: \`
|
|
146
|
-
<Textarea v-model="value" :success="true" :attrs="attrs" />
|
|
147
|
-
\`
|
|
148
|
-
};
|
|
149
|
-
}`,...(de=(ue=y.parameters)==null?void 0:ue.docs)==null?void 0:de.source}}};var pe,ce,fe;F.parameters={...F.parameters,docs:{...(pe=F.parameters)==null?void 0:pe.docs,source:{originalSource:`() => {
|
|
150
|
-
return {
|
|
151
|
-
...data,
|
|
152
|
-
template: \`
|
|
153
|
-
<Textarea v-model="value" :resize="false" :attrs="attrs" />
|
|
154
|
-
\`
|
|
155
|
-
};
|
|
156
|
-
}`,...(fe=(ce=F.parameters)==null?void 0:ce.docs)==null?void 0:fe.source}}};var Ce,xe,ve;g.parameters={...g.parameters,docs:{...(Ce=g.parameters)==null?void 0:Ce.docs,source:{originalSource:`() => {
|
|
157
|
-
return {
|
|
158
|
-
components: {
|
|
159
|
-
Textarea
|
|
160
|
-
},
|
|
161
|
-
data() {
|
|
162
|
-
return {
|
|
163
|
-
blurCalled: 0,
|
|
164
|
-
focusCalled: 0,
|
|
165
|
-
keyDownCalled: 0,
|
|
166
|
-
keyUpCalled: 0
|
|
167
|
-
};
|
|
168
|
-
},
|
|
169
|
-
template: \`
|
|
170
|
-
<div>
|
|
171
|
-
<Textarea placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
|
|
172
|
-
<table border="1" class="tw-font-sans tw-mt-8">
|
|
173
|
-
<tr>
|
|
174
|
-
<td>blurCalled</td>
|
|
175
|
-
<td>{{ blurCalled }}</td>
|
|
176
|
-
</tr>
|
|
177
|
-
<tr>
|
|
178
|
-
<td>focusCalled</td>
|
|
179
|
-
<td>{{ focusCalled }}</td>
|
|
180
|
-
</tr>
|
|
181
|
-
<tr>
|
|
182
|
-
<td>keyDownCalled</td>
|
|
183
|
-
<td>{{ keyDownCalled }}</td>
|
|
184
|
-
</tr>
|
|
185
|
-
<tr>
|
|
186
|
-
<td>keyUpCalled</td>
|
|
187
|
-
<td>{{ keyUpCalled }}</td>
|
|
188
|
-
</tr>
|
|
189
|
-
</table>
|
|
190
|
-
</div>
|
|
191
|
-
\`,
|
|
192
|
-
methods: {
|
|
193
|
-
onBlur() {
|
|
194
|
-
this.blurCalled += 1;
|
|
195
|
-
},
|
|
196
|
-
onFocus() {
|
|
197
|
-
this.focusCalled += 1;
|
|
198
|
-
},
|
|
199
|
-
onKeyDown() {
|
|
200
|
-
this.keyDownCalled += 1;
|
|
201
|
-
},
|
|
202
|
-
onKeyUp() {
|
|
203
|
-
this.keyUpCalled += 1;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
}`,...(ve=(xe=g.parameters)==null?void 0:xe.docs)==null?void 0:ve.source}}};const $e=["Small","Medium","Large","Icon","Placeholder","Disabled","Readonly","Label","LabelRequired","LabelIcon","Warning","Error","Success","NoResize","Events"];export{d as Disabled,v as Error,g as Events,i as Icon,c as Label,C as LabelIcon,f as LabelRequired,m as Large,s as Medium,F as NoResize,u as Placeholder,p as Readonly,l as Small,y as Success,x as Warning,$e as __namedExportsOrder,Ee as default};
|