@designcrowd/fe-shared-lib 1.5.22 → 1.5.24-upgradepkg
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/.claude/settings.local.json +53 -0
- package/.storybook/main.ts +5 -2
- package/.storybook-static/assets/Auth-DT64t5h-.css +1 -0
- package/.storybook-static/assets/Auth.stories-C6eXcTSu.js +490 -0
- package/.storybook-static/assets/AuthCrazyDomains.stories-DGvEoWCa.js +73 -0
- package/.storybook-static/assets/Button-5UzSGUF6.css +1 -0
- package/.storybook-static/assets/Button-DKdQT6Fq.js +1 -0
- package/.storybook-static/assets/ButtonGroup-DDPXuhxR.css +1 -0
- package/.storybook-static/assets/ButtonGroup.stories-DlrYMRSk.js +504 -0
- package/.storybook-static/assets/ButtonPrimary-Bu6bXb_c.css +1 -0
- package/.storybook-static/assets/ButtonPrimary-BvWW6Duz.js +1 -0
- package/.storybook-static/assets/Buttons.stories-CKmd6hkZ.js +761 -0
- package/.storybook-static/assets/ButtonsCrazyDomains.stories-DdEuOUrn.js +199 -0
- package/.storybook-static/assets/Checkbox.mixin-DkHpdvGa.js +1 -0
- package/.storybook-static/assets/Checkbox.stories-DPBUC2Mx.js +246 -0
- package/.storybook-static/assets/Checktile.stories-ByaFwplD.js +88 -0
- package/.storybook-static/assets/CollapsiblePanel.stories-Y6q3gP9j.js +56 -0
- package/.storybook-static/assets/ColorPicker.stories-DdxPUB_R.js +73 -0
- package/.storybook-static/assets/CopyToClipboardText.stories-J9qndWxd.js +32 -0
- package/.storybook-static/assets/Dropdown.stories-1zKPATii.js +159 -0
- package/.storybook-static/assets/DropdownItem-BV-BdThU.css +1 -0
- package/.storybook-static/assets/DropdownItem-DA6TdpDb.js +1 -0
- package/.storybook-static/assets/FormControl.mixin-DcEBwrV3.js +1 -0
- package/.storybook-static/assets/HashRouteModal.stories-BGxvqE22.js +60 -0
- package/.storybook-static/assets/HelloBar-CYEZR2kQ.js +1 -0
- package/.storybook-static/assets/HelloBar.stories-597Kxj0W.js +342 -0
- package/.storybook-static/assets/Icon-C17LFvsP.js +145 -0
- package/.storybook-static/assets/Icon.stories-B9iAmcTU.js +151 -0
- package/.storybook-static/assets/Icon.stories-CR5vT9H7.js +791 -0
- package/.storybook-static/assets/Loader-BWGoT_xC.js +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours-CExzox1Z.js +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours-CeAaMKke.css +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours.stories-kuxAH8B8.js +36 -0
- package/.storybook-static/assets/Masonry-C2MNiGg0.css +1 -0
- package/.storybook-static/assets/Masonry.stories-CTXJLQ_i.js +71 -0
- package/.storybook-static/assets/Modal-CGwEIF5R.css +1 -0
- package/.storybook-static/assets/Modal-CydTNprT.js +1 -0
- package/.storybook-static/assets/Modal.stories-DZiG5NGM.js +345 -0
- package/.storybook-static/assets/Notice.stories-ChOj8CWm.js +222 -0
- package/.storybook-static/assets/NumberStepper-Blffv09R.css +1 -0
- package/.storybook-static/assets/NumberStepper.stories-CVbKJ_oJ.js +64 -0
- package/.storybook-static/assets/PaymentConfigList-BpUMV6cp.css +1 -0
- package/.storybook-static/assets/PaymentConfigList.stories-DUD7OZBS.js +130 -0
- package/.storybook-static/assets/Picture-B8m1I9xN.js +1 -0
- package/.storybook-static/assets/Picture.stories-MMzybhJ6.js +119 -0
- package/.storybook-static/assets/Pill-DLXZ_TL8.js +1 -0
- package/.storybook-static/assets/Pill.stories-DCP7szJm.js +18 -0
- package/.storybook-static/assets/PillBar-os4mJV3M.css +1 -0
- package/.storybook-static/assets/PillBar.stories-Bry-zQ6f.js +41 -0
- package/.storybook-static/assets/Price-C4GZbDSa.js +1 -0
- package/.storybook-static/assets/Price.stories-CMHly9V0.js +337 -0
- package/.storybook-static/assets/PromoCard.stories-xsbFtADE.js +299 -0
- package/.storybook-static/assets/PublishBrandPageModal-Q9-mNG1q.css +1 -0
- package/.storybook-static/assets/PublishBrandPageModal.stories-C9XzW_1m.js +324 -0
- package/.storybook-static/assets/SearchBar.stories-DaIneOSz.js +12 -0
- package/.storybook-static/assets/Select-DnioWQmi.css +1 -0
- package/.storybook-static/assets/Select.stories-BmGYB4pw.js +108 -0
- package/.storybook-static/assets/SellDomainNameList.fixtures-LC6fjr_b.js +1 -0
- package/.storybook-static/assets/SellDomainNameListModal-DH6khE10.css +1 -0
- package/.storybook-static/assets/SellDomainNameListModal-ymtVclFP.js +1 -0
- package/.storybook-static/assets/SellDomainNameListModal.stories-DvGvylgx.js +71 -0
- package/.storybook-static/assets/SellDomainNameListSearchResult-Cpxq0jDA.css +1 -0
- package/.storybook-static/assets/SellDomainNameListSearchResult-D-1CrQyf.js +1 -0
- package/.storybook-static/assets/SellDomainNameSearchWithResults-bX--zu97.js +1 -0
- package/.storybook-static/assets/SellDomainNameSearchWithResults.stories-DRUJjSdH.js +37 -0
- package/.storybook-static/assets/SellDomainNameWidget.stories-CC3LX10s.js +36 -0
- package/.storybook-static/assets/SignIn-CPjf8_2O.css +1 -0
- package/.storybook-static/assets/SignIn-DI0DSDFe.js +1 -0
- package/.storybook-static/assets/Slider-Cog2FFdj.css +1 -0
- package/.storybook-static/assets/Slider.stories-B2KGwnJy.js +141 -0
- package/.storybook-static/assets/SparkleIcon.stories-Dk904hVE.js +547 -0
- package/.storybook-static/assets/StarRating-BtKh7pzm.css +1 -0
- package/.storybook-static/assets/StarRating.stories-d2mgOuo2.js +45 -0
- package/.storybook-static/assets/TabMenu.stories-Cg2yenqj.js +47 -0
- package/.storybook-static/assets/TextCopyField-B66NKTk_.js +1 -0
- package/.storybook-static/assets/TextCopyField.stories-B4_ZlfLU.js +47 -0
- package/.storybook-static/assets/TextInput-CMoUjT_5.js +1 -0
- package/.storybook-static/assets/TextInput.stories-oyyxxf3j.js +233 -0
- package/.storybook-static/assets/Textarea.stories-BvhZR6K2.js +207 -0
- package/.storybook-static/assets/Toggle.stories-yT5-rL2k.js +161 -0
- package/.storybook-static/assets/Tooltip-DyXIgFQH.css +1 -0
- package/.storybook-static/assets/Tooltip-ZukyujG5.js +1 -0
- package/.storybook-static/assets/Tooltip.stories-sJFylRS_.js +953 -0
- package/.storybook-static/assets/UploadYourLogoApplication-Dmw8QcH3.css +1 -0
- package/.storybook-static/assets/UploadYourLogoApplication.stories-C9AvzHO_.js +186 -0
- package/.storybook-static/assets/UploadYourLogoDropzone-B1ffcicv.js +24 -0
- package/.storybook-static/assets/UploadYourLogoDropzone-DQqACf-e.css +1 -0
- package/.storybook-static/assets/UploadYourLogoDropzone.stories-D1Dt2ord.js +55 -0
- package/.storybook-static/assets/UploadedLogoSearchResultCard.stories-D8oF1Yrx.js +79 -0
- package/.storybook-static/assets/WebsiteContextualUpgradeModal-8u1zOZrW.css +1 -0
- package/.storybook-static/assets/WebsiteContextualUpgradeModal.stories-mtcvWOAg.js +211 -0
- package/.storybook-static/assets/_commonjsHelpers-CE1G-McA.js +1 -0
- package/.storybook-static/assets/_plugin-vue_export-helper-DlAUqK2U.js +1 -0
- package/.storybook-static/assets/api-lSJGRrF2.js +1 -0
- package/.storybook-static/assets/axe-DrS73Vi2.js +20 -0
- package/.storybook-static/assets/brand-crowd-api.client-D45NKshX.js +1 -0
- package/.storybook-static/assets/bundled-translations-BoWhEDU_.js +1 -0
- package/.storybook-static/assets/bundled-translations.de-DE-C4lqla4O.js +1 -0
- package/.storybook-static/assets/bundled-translations.es-ES-BxMIllUH.js +1 -0
- package/.storybook-static/assets/bundled-translations.fr-CA-MxZpyz0w.js +1 -0
- package/.storybook-static/assets/bundled-translations.fr-FR-N7UPCZVr.js +1 -0
- package/.storybook-static/assets/bundled-translations.pt-BR-C8tscYuG.js +1 -0
- package/.storybook-static/assets/bundled-translations.pt-PT-Dszj5Xfa.js +1 -0
- package/.storybook-static/assets/carousel-BelyIYOK.css +1 -0
- package/.storybook-static/assets/carousel.stories-CJw3-Iy6.js +668 -0
- package/.storybook-static/assets/event-constants-CMO9VQVu.js +1 -0
- package/.storybook-static/assets/iframe-B3A6OXQU.js +1104 -0
- package/.storybook-static/assets/index-B-eiLVzF.js +7 -0
- package/.storybook-static/assets/index-QquxUozE.js +6 -0
- package/.storybook-static/assets/matchers-5TDFFDYO-HJu_DfWo.js +14 -0
- package/.storybook-static/assets/mediaQueryMixin-CISNqd93.js +1 -0
- package/.storybook-static/assets/preload-helper-PPVm8Dsz.js +1 -0
- package/.storybook-static/assets/tracking-ATsLLehC.js +1 -0
- package/.storybook-static/css/tailwind-brandCrowd.css +2508 -0
- package/.storybook-static/css/tailwind-brandPage.css +2188 -0
- package/.storybook-static/css/tailwind-crazyDomains.css +2508 -0
- package/.storybook-static/css/tailwind-designCom.css +2508 -0
- package/.storybook-static/css/tailwind-designCrowd.css +2508 -0
- package/.storybook-static/favicon-wrapper.svg +46 -0
- package/.storybook-static/favicon.svg +1 -0
- package/.storybook-static/iframe.html +713 -0
- package/.storybook-static/index.html +148 -0
- package/.storybook-static/index.json +1 -0
- 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 +1 -0
- package/.storybook-static/sb-addons/a11y-1/manager-bundle.js +57 -0
- package/.storybook-static/sb-addons/links-2/manager-bundle.js +3 -0
- package/.storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +628 -0
- package/.storybook-static/sb-addons/themes-3/manager-bundle.js +3 -0
- package/.storybook-static/sb-common-assets/favicon-wrapper.svg +46 -0
- package/.storybook-static/sb-common-assets/favicon.svg +1 -0
- 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-runtime.js +77935 -0
- package/.storybook-static/sb-manager/globals.js +24 -0
- package/.storybook-static/sb-manager/manager-stores.js +23 -0
- package/.storybook-static/sb-manager/runtime.js +20404 -0
- package/.storybook-static/vite-inject-mocker-entry.js +2 -0
- package/dist/css/tailwind-brandCrowd.css +109 -6
- package/dist/css/tailwind-brandPage.css +105 -6
- package/dist/css/tailwind-crazyDomains.css +109 -6
- package/dist/css/tailwind-designCom.css +109 -6
- package/dist/css/tailwind-designCrowd.css +109 -6
- package/docs/plans/2026-01-30-upgrade-vite7-storybook10-design.md +177 -0
- package/docs/plans/2026-01-30-upgrade-vite7-storybook10.md +388 -0
- package/package.json +32 -36
- package/src/atoms/components/Icon/Icon.vue +38 -0
- package/src/atoms/components/Icon/icons/annotate-heart.vue +7 -0
- package/src/atoms/components/Icon/icons/award.vue +7 -0
- package/src/atoms/components/Icon/icons/bezier-curve-outline.vue +7 -0
- package/src/atoms/components/Icon/icons/bezier-curve.vue +7 -0
- package/src/atoms/components/Icon/icons/browser.vue +7 -0
- package/src/atoms/components/Icon/icons/card-vertical.vue +7 -0
- package/src/atoms/components/Icon/icons/file-empty.vue +7 -0
- package/src/atoms/components/Icon/icons/font.vue +7 -0
- package/src/atoms/components/Icon/icons/headphones.vue +7 -0
- package/src/atoms/components/Icon/icons/image.vue +7 -0
- package/src/atoms/components/Icon/icons/lightning.vue +7 -0
- package/src/atoms/components/Icon/icons/logo.vue +7 -0
- package/src/atoms/components/Icon/icons/palette-outline.vue +7 -0
- package/src/atoms/components/Icon/icons/pen-outline.vue +7 -0
- package/src/atoms/components/Icon/icons/pen-sparkle.vue +17 -0
- package/src/atoms/components/Icon/icons/pen.vue +7 -0
- package/src/atoms/components/Icon/icons/sparkle-square.vue +22 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue +2 -2
- package/vite.config.ts +0 -4
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import{I as v}from"./Icon-C17LFvsP.js";import{c as m,F as S,r as h,a as y,o as a,y as d}from"./iframe-B3A6OXQU.js";import{_}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-PPVm8Dsz.js";const p={components:{Icon:v},props:{maxRating:{type:Number,required:!1,default:5},rating:{type:Number,required:!1,default:0},size:{type:String,required:!1,default:"sm"},color:{type:String,required:!1,default:"warning-500"},isInteractive:{type:Boolean,required:!1,default:!1}},data(){return{currentRating:this.rating,hoverRating:void 0}},methods:{shouldShowFilledOnHover(e){return this.isInteractive&&this.hoverRating&&this.hoverRating>=e},onRate(e){this.isInteractive&&(this.currentRating=e,this.$emit("on-rated",e))},applyHoverEffect(e){this.isInteractive&&(this.hoverRating=e)},removeHoverEffect(){this.hoverRating=void 0}}},x={class:"tw-flex tw-justify-center"},z=["onClick","onMouseover"];function I(e,f,t,k,R,o){const u=y("Icon");return a(),m("ul",x,[(a(!0),m(S,null,h(t.maxRating,n=>(a(),m("li",{key:n,class:"tw-list-none",onClick:g=>o.onRate(n),onMouseover:g=>o.applyHoverEffect(n),onMouseleave:f[0]||(f[0]=g=>o.removeHoverEffect())},[n<=R.currentRating?(a(),d(u,{key:0,name:"star-filled",size:t.size,color:t.color},null,8,["size","color"])):o.shouldShowFilledOnHover(n)?(a(),d(u,{key:1,name:"star-filled",size:t.size,color:t.color},null,8,["size","color"])):(a(),d(u,{key:2,name:"star-hollow",size:t.size,color:t.color},null,8,["size","color"]))],40,z))),128))])}const r=_(p,[["render",I],["__scopeId","data-v-3c4d624f"]]);p.__docgenInfo={exportName:"default",displayName:"StarRating",description:"",tags:{},props:[{name:"maxRating",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"5"}},{name:"rating",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"0"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}},{name:"color",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'warning-500'"}},{name:"isInteractive",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"on-rated",type:{names:["undefined"]}}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/StarRating/StarRating.vue"]};const E={title:"Components/Star Rating",component:r},s=()=>({components:{StarRating:r},template:`
|
|
2
|
+
<StarRating :maxRating="5" />
|
|
3
|
+
`}),i=()=>({components:{StarRating:r},template:`
|
|
4
|
+
<StarRating :maxRating="8" :rating="1" :is-interactive="true"/>
|
|
5
|
+
`}),l=()=>({components:{StarRating:r},template:`
|
|
6
|
+
<StarRating :maxRating="10" :rating="6"/>
|
|
7
|
+
`}),c=()=>({components:{StarRating:r},template:`
|
|
8
|
+
<StarRating :maxRating="5" :rating="5" :is-interactive="true"/>
|
|
9
|
+
`});s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
|
|
10
|
+
return {
|
|
11
|
+
components: {
|
|
12
|
+
StarRating
|
|
13
|
+
},
|
|
14
|
+
template: \`
|
|
15
|
+
<StarRating :maxRating="5" />
|
|
16
|
+
\`
|
|
17
|
+
};
|
|
18
|
+
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
|
|
19
|
+
return {
|
|
20
|
+
components: {
|
|
21
|
+
StarRating
|
|
22
|
+
},
|
|
23
|
+
template: \`
|
|
24
|
+
<StarRating :maxRating="8" :rating="1" :is-interactive="true"/>
|
|
25
|
+
\`
|
|
26
|
+
};
|
|
27
|
+
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
|
|
28
|
+
return {
|
|
29
|
+
components: {
|
|
30
|
+
StarRating
|
|
31
|
+
},
|
|
32
|
+
template: \`
|
|
33
|
+
<StarRating :maxRating="10" :rating="6"/>
|
|
34
|
+
\`
|
|
35
|
+
};
|
|
36
|
+
}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
|
|
37
|
+
return {
|
|
38
|
+
components: {
|
|
39
|
+
StarRating
|
|
40
|
+
},
|
|
41
|
+
template: \`
|
|
42
|
+
<StarRating :maxRating="5" :rating="5" :is-interactive="true"/>
|
|
43
|
+
\`
|
|
44
|
+
};
|
|
45
|
+
}`,...c.parameters?.docs?.source}}};const H=["NoStar","OneStar","Middle","Full"];export{c as Full,l as Middle,s as NoStar,i as OneStar,H as __namedExportsOrder,E as default};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import{c as r,F as b,r as u,o,b as i,t as p}from"./iframe-B3A6OXQU.js";import{_ as T}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-PPVm8Dsz.js";const l={props:{tabNames:{type:Array,required:!0},selectedTabName:{type:String,required:!0},classes:{type:[String,Object],required:!1,default:""}},methods:{onTabSelected(e){this.$emit("on-tab-selected",e)}}},N={class:"tw-flex tw-w-full tw-overflow-x-auto"},w=["onClick"];function f(e,g,t,h,y,m){return o(),r("div",N,[(o(!0),r(b,null,u(t.tabNames,(a,d)=>(o(),r("div",{key:d,class:i(["tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid",[{"tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1":t.selectedTabName!==a,"tw-text-primary-500 tw-border-primary-500 tw-border-b-4":t.selectedTabName===a},t.classes]]),onClick:_=>m.onTabSelected(a)},p(a),11,w))),128))])}const c=T(l,[["render",f]]);l.__docgenInfo={exportName:"default",displayName:"TabMenu",description:"",tags:{},props:[{name:"tabNames",type:{name:"array"},required:!0},{name:"selectedTabName",type:{name:"string"},required:!0},{name:"classes",type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"on-tab-selected",type:{names:["undefined"]}}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/TabMenu/TabMenu.vue"]};const k={title:"Components/Tab Menu",component:c},s=()=>({components:{TabMenu:c},data(){return{checked:!0,tabNames:["all","categories"],selectedTabName:"all"}},methods:{selectTab(e){this.selectedTabName=e}},template:`
|
|
2
|
+
<TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
|
|
3
|
+
`}),n=()=>({components:{TabMenu:c},data(){return{checked:!0,tabNames:["home","gaming","food","nature","beauty","tax","legal"],selectedTabName:"gaming"}},methods:{selectTab(e){this.selectedTabName=e}},template:`
|
|
4
|
+
<TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
|
|
5
|
+
`});s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
|
|
6
|
+
return {
|
|
7
|
+
components: {
|
|
8
|
+
TabMenu
|
|
9
|
+
},
|
|
10
|
+
data() {
|
|
11
|
+
return {
|
|
12
|
+
checked: true,
|
|
13
|
+
tabNames: ['all', 'categories'],
|
|
14
|
+
selectedTabName: 'all'
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
methods: {
|
|
18
|
+
selectTab(tabName) {
|
|
19
|
+
this.selectedTabName = tabName;
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
template: \`
|
|
23
|
+
<TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
|
|
24
|
+
\`
|
|
25
|
+
};
|
|
26
|
+
}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`() => {
|
|
27
|
+
return {
|
|
28
|
+
components: {
|
|
29
|
+
TabMenu
|
|
30
|
+
},
|
|
31
|
+
data() {
|
|
32
|
+
return {
|
|
33
|
+
checked: true,
|
|
34
|
+
tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
|
|
35
|
+
selectedTabName: 'gaming'
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
methods: {
|
|
39
|
+
selectTab(tabName) {
|
|
40
|
+
this.selectedTabName = tabName;
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
template: \`
|
|
44
|
+
<TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
|
|
45
|
+
\`
|
|
46
|
+
};
|
|
47
|
+
}`,...n.parameters?.docs?.source}}};const v=["Sample","SampleMoreTabs"];export{s as Sample,n as SampleMoreTabs,v as __namedExportsOrder,k as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{T as p}from"./TextInput-CMoUjT_5.js";import{B as d}from"./Button-DKdQT6Fq.js";import{c,h as a,a as n,o as f}from"./iframe-B3A6OXQU.js";import{_ as m}from"./_plugin-vue_export-helper-DlAUqK2U.js";const l={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,r,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:r.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(l,[["render",x]]);l.__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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/TextCopyField/TextCopyField.vue"]};export{g as T};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import{T as n}from"./TextCopyField-B66NKTk_.js";import{B as s}from"./Button-DKdQT6Fq.js";import"./TextInput-CMoUjT_5.js";import"./FormControl.mixin-DcEBwrV3.js";import"./Icon-C17LFvsP.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BvWW6Duz.js";const v={title:"Components/Text Copy Field",component:n},a={components:{TextCopyField:n,Button:s},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
|
+
`});t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
|
|
15
|
+
return {
|
|
16
|
+
...data,
|
|
17
|
+
template: \`
|
|
18
|
+
<TextCopyField button-variant="primary" :text="value" />
|
|
19
|
+
\`
|
|
20
|
+
};
|
|
21
|
+
}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`() => {
|
|
22
|
+
return {
|
|
23
|
+
...data,
|
|
24
|
+
template: \`
|
|
25
|
+
<TextCopyField button-variant="secondary" :text="value" />
|
|
26
|
+
\`
|
|
27
|
+
};
|
|
28
|
+
}`,...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.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
|
+
}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.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
|
+
}`,...o.parameters?.docs?.source}}};const T=["Primary","Secondary","CustomText","ResetButton"];export{r as CustomText,t as Primary,o as ResetButton,e as Secondary,T as __namedExportsOrder,v as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{F as w}from"./FormControl.mixin-DcEBwrV3.js";import{c as t,b as i,z as y,t as f,g as m,e as s,h as p,m as x,C as u,G as b,a as F,o as l}from"./iframe-B3A6OXQU.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,r,n,k,I,o){const d=F("Icon");return l(),t("div",h,[e.label?(l(),t("label",{key:0,for:`scl-input-${e.id}`,class:i(["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,"*")):m("",!0)],10,c)):m("",!0),s("div",{class:i({"tw-flex":!!n.prefixText})},[n.prefixText?(l(),t("span",q,f(n.prefixText),1)):m("",!0),s("div",{class:i({"tw-relative":e.icon||o.enableInput,"tw-grow":!!n.prefixText,"tw-w-full":!n.prefixText})},[e.icon?(l(),t("div",{key:0,class:i(["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)):m("",!0),s("input",x({id:e.id?`scl-input-${e.id}`:null},e.attrs,{type:n.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:[[n.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":n.enableClear,"tw-py-2":e.size==="sm","tw-py-3.5":e.size!=="sm","tw-rounded-r":n.borderRight,"tw-rounded-l":n.borderLeft&&!n.prefixText,"tw-border-l-0":!n.borderLeft,"tw-border-r-0":!n.borderRight,"!tw-rounded-l-none":n.borderRight&&!n.borderLeft,"!tw-rounded-r-none":n.borderLeft&&!n.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:r[0]||(r[0]=(...a)=>o.setValidationMessage&&o.setValidationMessage(...a)),onInput:r[1]||(r[1]=u(a=>e.input(a.target.value,a),["stop"])),onKeyup:[r[2]||(r[2]=u(a=>e.keyup(a.target.value),["stop"])),r[6]||(r[6]=b(a=>e.enterKeyUp(a.target.value),["enter"]))],onKeydown:r[3]||(r[3]=u(a=>e.keydown(a.target.value,a),["stop"])),onFocus:r[4]||(r[4]=a=>e.focus(a.target.value)),onBlur:r[5]||(r[5]=a=>e.blur(a.target.value))}),null,16,V),o.enableInput&&e.modelValue!==""?(l(),t("div",{key:1,class:i(["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:r[7]||(r[7]=(...a)=>o.onClearInput&&o.onClearInput(...a))},[p(d,{name:"close",size:"md"})],2)):m("",!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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js","/home/zknowles/repos/fe-shared-lib/src/atoms/components/TextInput/TextInput.vue"]};export{L as T};
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import{T as g}from"./TextInput-CMoUjT_5.js";import"./FormControl.mixin-DcEBwrV3.js";import"./Icon-C17LFvsP.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const k={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}}});t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
|
|
61
|
+
return {
|
|
62
|
+
...data,
|
|
63
|
+
template: \`
|
|
64
|
+
<TextInput v-model="value" :attrs="attrs" />
|
|
65
|
+
\`
|
|
66
|
+
};
|
|
67
|
+
}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`() => {
|
|
68
|
+
return {
|
|
69
|
+
...data,
|
|
70
|
+
template: \`
|
|
71
|
+
<TextInput v-model="value" size="sm" :attrs="attrs" />
|
|
72
|
+
\`
|
|
73
|
+
};
|
|
74
|
+
}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`() => {
|
|
75
|
+
return {
|
|
76
|
+
...data,
|
|
77
|
+
template: \`
|
|
78
|
+
<TextInput v-model="value" size="sm" icon="message" :attrs="attrs" />
|
|
79
|
+
\`
|
|
80
|
+
};
|
|
81
|
+
}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`() => {
|
|
82
|
+
return {
|
|
83
|
+
...data,
|
|
84
|
+
template: \`
|
|
85
|
+
<TextInput v-model="value" icon="message" :attrs="attrs" />
|
|
86
|
+
\`
|
|
87
|
+
};
|
|
88
|
+
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
|
|
89
|
+
return {
|
|
90
|
+
...data,
|
|
91
|
+
template: \`
|
|
92
|
+
<TextInput v-model="value" label="Your Name" :attrs="attrs" />
|
|
93
|
+
\`
|
|
94
|
+
};
|
|
95
|
+
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`() => {
|
|
96
|
+
return {
|
|
97
|
+
...data,
|
|
98
|
+
template: \`
|
|
99
|
+
<TextInput v-model="value" label="Your Name" :required="true" :attrs="attrs" />
|
|
100
|
+
\`
|
|
101
|
+
};
|
|
102
|
+
}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
|
|
103
|
+
return {
|
|
104
|
+
...data,
|
|
105
|
+
template: \`
|
|
106
|
+
<TextInput v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
107
|
+
\`
|
|
108
|
+
};
|
|
109
|
+
}`,...l.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => {
|
|
110
|
+
return {
|
|
111
|
+
...data,
|
|
112
|
+
template: \`
|
|
113
|
+
<TextInput v-model="value" :warning="true" :attrs="attrs" />
|
|
114
|
+
\`
|
|
115
|
+
};
|
|
116
|
+
}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => {
|
|
117
|
+
return {
|
|
118
|
+
...data,
|
|
119
|
+
template: \`
|
|
120
|
+
<TextInput v-model="value" :error="true" :attrs="attrs" />
|
|
121
|
+
\`
|
|
122
|
+
};
|
|
123
|
+
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => {
|
|
124
|
+
return {
|
|
125
|
+
...data,
|
|
126
|
+
template: \`
|
|
127
|
+
<TextInput v-model="value" :success="true" :attrs="attrs" />
|
|
128
|
+
\`
|
|
129
|
+
};
|
|
130
|
+
}`,...p.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
|
|
131
|
+
return {
|
|
132
|
+
...data,
|
|
133
|
+
template: \`
|
|
134
|
+
<TextInput v-model="value" :disabled="true" :attrs="attrs" />
|
|
135
|
+
\`
|
|
136
|
+
};
|
|
137
|
+
}`,...c.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => {
|
|
138
|
+
return {
|
|
139
|
+
...data,
|
|
140
|
+
template: \`
|
|
141
|
+
<TextInput v-model="value" :readonly="true" :attrs="attrs" />
|
|
142
|
+
\`
|
|
143
|
+
};
|
|
144
|
+
}`,...m.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
|
|
145
|
+
return {
|
|
146
|
+
...data,
|
|
147
|
+
template: \`
|
|
148
|
+
<TextInput placeholder="Start typing..." :attrs="attrs" />
|
|
149
|
+
\`
|
|
150
|
+
};
|
|
151
|
+
}`,...i.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.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
|
+
}`,...v.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.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
|
+
}`,...x.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`() => {
|
|
169
|
+
return {
|
|
170
|
+
...data,
|
|
171
|
+
template: \`
|
|
172
|
+
<TextInput v-model="value" :border-left="false" :attrs="attrs" />
|
|
173
|
+
\`
|
|
174
|
+
};
|
|
175
|
+
}`,...T.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`() => {
|
|
176
|
+
return {
|
|
177
|
+
...data,
|
|
178
|
+
template: \`
|
|
179
|
+
<TextInput v-model="value" :border-right="false" :attrs="attrs" />
|
|
180
|
+
\`
|
|
181
|
+
};
|
|
182
|
+
}`,...I.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.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
|
+
}`,...b.parameters?.docs?.source}}};const D=["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,D as __namedExportsOrder,k as default};
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import{F as S}from"./FormControl.mixin-DcEBwrV3.js";import{c as n,b as q,z,t as D,g as h,e as k,h as I,m as U,C as b,a as B,o}from"./iframe-B3A6OXQU.js";import{_ as R}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-C17LFvsP.js";import"./preload-helper-PPVm8Dsz.js";const V={mixins:[S],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=typeof document<"u"&&typeof window<"u"&&document.getElementById(`scl-input-${this.id}`);e&&(e.style.height="auto",e.style.height=`${e.scrollHeight}px`)},1e3)}}},K={class:"tw-box-border"},L=["for"],N={key:0,class:"tw-text-error-500"},M={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"},E=["id","value","required","placeholder","disabled","readonly","minlength","maxlength"];function $(e,t,T,P,A,O){const j=B("Icon");return o(),n("div",K,[e.label?(o(),n("label",{key:0,for:`scl-input-${e.id}`,class:q(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly}])},[z(D(e.label)+" ",1),e.required?(o(),n("span",N,"*")):h("",!0)],10,L)):h("",!0),k("div",{class:q({"tw-relative":e.icon})},[e.icon?(o(),n("div",M,[I(j,{name:e.icon,size:"md"},null,8,["name"])])):h("",!0),k("textarea",U({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]=b(r=>e.input(r.target.value),["stop"])),onKeyup:t[1]||(t[1]=b(r=>e.keyup(r.target.value),["stop"])),onKeydown:t[2]||(t[2]=b(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,E)],2)])}const g=R(V,[["render",$]]);V.__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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js","/home/zknowles/repos/fe-shared-lib/src/atoms/components/Textarea/Textarea.vue"]};const Q={title:"Components/Textarea",component:g},a={components:{Textarea:g},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:g},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
|
+
`}),w=()=>({components:{Textarea:g},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}}});l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
|
|
52
|
+
return {
|
|
53
|
+
...data,
|
|
54
|
+
template: \`
|
|
55
|
+
<Textarea v-model="value" :attrs="attrs" />
|
|
56
|
+
\`
|
|
57
|
+
};
|
|
58
|
+
}`,...l.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
|
|
59
|
+
return {
|
|
60
|
+
...data,
|
|
61
|
+
template: \`
|
|
62
|
+
<Textarea v-model="value" size="md" :attrs="attrs" />
|
|
63
|
+
\`
|
|
64
|
+
};
|
|
65
|
+
}`,...s.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => {
|
|
66
|
+
return {
|
|
67
|
+
...data,
|
|
68
|
+
template: \`
|
|
69
|
+
<Textarea v-model="value" size="lg" :attrs="attrs" />
|
|
70
|
+
\`
|
|
71
|
+
};
|
|
72
|
+
}`,...m.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
|
|
73
|
+
return {
|
|
74
|
+
...data,
|
|
75
|
+
template: \`
|
|
76
|
+
<Textarea v-model="value" icon="message" :attrs="attrs" />
|
|
77
|
+
\`
|
|
78
|
+
};
|
|
79
|
+
}`,...i.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.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
|
+
}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => {
|
|
94
|
+
return {
|
|
95
|
+
...data,
|
|
96
|
+
template: \`
|
|
97
|
+
<Textarea v-model="value" :disabled="true" :attrs="attrs" />
|
|
98
|
+
\`
|
|
99
|
+
};
|
|
100
|
+
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => {
|
|
101
|
+
return {
|
|
102
|
+
...data,
|
|
103
|
+
template: \`
|
|
104
|
+
<Textarea v-model="value" :readonly="true" :attrs="attrs" />
|
|
105
|
+
\`
|
|
106
|
+
};
|
|
107
|
+
}`,...p.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
|
|
108
|
+
return {
|
|
109
|
+
...data,
|
|
110
|
+
template: \`
|
|
111
|
+
<Textarea v-model="value" label="Message" :attrs="attrs" />
|
|
112
|
+
\`
|
|
113
|
+
};
|
|
114
|
+
}`,...c.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => {
|
|
115
|
+
return {
|
|
116
|
+
...data,
|
|
117
|
+
template: \`
|
|
118
|
+
<Textarea v-model="value" label="Message" :required="true" :attrs="attrs" />
|
|
119
|
+
\`
|
|
120
|
+
};
|
|
121
|
+
}`,...f.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`() => {
|
|
122
|
+
return {
|
|
123
|
+
...data,
|
|
124
|
+
template: \`
|
|
125
|
+
<Textarea v-model="value" label="Your Name" icon="message" :attrs="attrs" />
|
|
126
|
+
\`
|
|
127
|
+
};
|
|
128
|
+
}`,...C.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`() => {
|
|
129
|
+
return {
|
|
130
|
+
...data,
|
|
131
|
+
template: \`
|
|
132
|
+
<Textarea v-model="value" :warning="true" :attrs="attrs" />
|
|
133
|
+
\`
|
|
134
|
+
};
|
|
135
|
+
}`,...x.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`() => {
|
|
136
|
+
return {
|
|
137
|
+
...data,
|
|
138
|
+
template: \`
|
|
139
|
+
<Textarea v-model="value" :error="true" :attrs="attrs" />
|
|
140
|
+
\`
|
|
141
|
+
};
|
|
142
|
+
}`,...v.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => {
|
|
143
|
+
return {
|
|
144
|
+
...data,
|
|
145
|
+
template: \`
|
|
146
|
+
<Textarea v-model="value" :success="true" :attrs="attrs" />
|
|
147
|
+
\`
|
|
148
|
+
};
|
|
149
|
+
}`,...y.parameters?.docs?.source}}};F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`() => {
|
|
150
|
+
return {
|
|
151
|
+
...data,
|
|
152
|
+
template: \`
|
|
153
|
+
<Textarea v-model="value" :resize="false" :attrs="attrs" />
|
|
154
|
+
\`
|
|
155
|
+
};
|
|
156
|
+
}`,...F.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.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
|
+
}`,...w.parameters?.docs?.source}}};const X=["Small","Medium","Large","Icon","Placeholder","Disabled","Readonly","Label","LabelRequired","LabelIcon","Warning","Error","Success","NoResize","Events"];export{d as Disabled,v as Error,w 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,X as __namedExportsOrder,Q as default};
|