@designcrowd/fe-shared-lib 1.2.0 → 1.2.1-ml-input-changes

package/.storybook-static/assets/ColorPicker.stories-DriJaUqB.js

@@ -0,0 +1,73 @@
+import{F as H}from"./FormControl.mixin-BIPKWa5J.js";import{c as n,n as a,j as J,t as K,e as F,a as t,h as Q,w as v,o as l}from"./vue.esm-bundler-C7QvyiW1.js";import{_ as X}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-B8lXgcc0.js";const A={mixins:[H],props:{modelValue:{type:String,required:!0},mode:{type:String,default:"color-and-text"}},data(){return{color:this.modelValue}},watch:{color(e){this.$emit("update:modelValue",e)},value(e){this.color=e}},methods:{onColorChange(e){this.color=e,this.$emit("input",e)}}},Z=["for"],$={key:0,class:"tw-text-error-500"},ee=["id","value","disabled"],re={key:0,class:"tw-w-full tw-h-full"},oe=["value","disabled"];function ne(e,o,C,ae,x,b){return l(),n("div",{class:a(["tw-box-border",{"tw-w-32":C.mode==="color-and-text","tw-w-10":C.mode==="color-only"}])},[e.label?(l(),n("label",{key:0,for:`scl-input-${e.id}`,class:a(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly}])},[J(K(e.label)+" ",1),e.required?(l(),n("span",$,"*")):F("",!0)],10,Z)):F("",!0),t("div",{class:a([{"tw-opacity-50":e.disabled},"tw-cursor-pointer tw-flex tw-overflow-hidden tw-h-10 tw-items-center tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-rounded tw-border tw-border-solid tw-border-grayscale-500"])},[t("div",{style:Q({backgroundColor:x.color}),class:"tw-flex-none tw-h-full tw-w-10 tw-border-t-0 tw-border-l-0 tw-border-b-0 tw-border-r tw-border-solid tw-border-grayscale-500 tw-relative"},[t("input",{id:e.id?`scl-input-${e.id}`:null,ref:"input",value:x.color,type:"color",class:"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",disabled:e.disabled,onInput:o[0]||(o[0]=v(w=>b.onColorChange(w.target.value),["stop"]))},null,40,ee)],4),C.mode==="color-and-text"?(l(),n("div",re,[t("input",{value:x.color,type:"text",disabled:e.disabled,maxlength:"7",minlength:"4",class:a(["tw-w-full tw-h-full tw-px-3 tw-uppercase tw-border-0 tw-p-0 tw-font-sans focus:tw-outline-none",{"tw-bg-error-100 tw-text-error-700 ":e.error,"tw-bg-warning-100 tw-text-warning-700 ":e.warning,"tw-bg-success-100 tw-text-success-700 ":e.success,"tw-bg-white tw-text-secondary-500 ":!e.error&&!e.warning&&!e.success}]),onInput:o[1]||(o[1]=v(w=>b.onColorChange(w.target.value),["stop"]))},null,42,oe)])):F("",!0)],2)],2)}const G=X(A,[["render",ne]]);A.__docgenInfo={exportName:"default",displayName:"ColorPicker",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"},required:!0,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:"mode",type:{name:"string"},defaultValue:{func:!1,value:"'color-and-text'"}}],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"]}}],sourceFiles:["/Users/brooke.couchman/Projects/fe-shared-lib/src/atoms/components/ColorPicker/ColorPicker.vue","/Users/brooke.couchman/Projects/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js"]};const se={title:"Components/Color Picker",component:G},r={components:{ColorPicker:G},data(){return{value:"#ff0000"}}},m=()=>({...r,template:`
+      <ColorPicker v-model="value" />
+    `}),i=()=>({...r,template:`
+      <ColorPicker v-model="value" mode="color-only" />
+    `}),s=()=>({...r,template:`
+      <ColorPicker v-model="value" label="Your Name" />
+    `}),u=()=>({...r,template:`
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    `}),d=()=>({...r,template:`
+      <ColorPicker v-model="value" :warning="true" />
+    `}),c=()=>({...r,template:`
+      <ColorPicker v-model="value" :error="true" />
+    `}),p=()=>({...r,template:`
+      <ColorPicker v-model="value" :success="true" />
+    `}),f=()=>({...r,template:`
+      <ColorPicker v-model="value" :disabled="true" />
+    `});var h,y,g;m.parameters={...m.parameters,docs:{...(h=m.parameters)==null?void 0:h.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" />
+    \`
+  };
+}`,...(g=(y=m.parameters)==null?void 0:y.docs)==null?void 0:g.source}}};var k,j,V;i.parameters={...i.parameters,docs:{...(k=i.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" mode="color-only" />
+    \`
+  };
+}`,...(V=(j=i.parameters)==null?void 0:j.docs)==null?void 0:V.source}}};var q,P,S;s.parameters={...s.parameters,docs:{...(q=s.parameters)==null?void 0:q.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" />
+    \`
+  };
+}`,...(S=(P=s.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};var N,L,O;u.parameters={...u.parameters,docs:{...(N=u.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    \`
+  };
+}`,...(O=(L=u.parameters)==null?void 0:L.docs)==null?void 0:O.source}}};var D,E,R;d.parameters={...d.parameters,docs:{...(D=d.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :warning="true" />
+    \`
+  };
+}`,...(R=(E=d.parameters)==null?void 0:E.docs)==null?void 0:R.source}}};var Y,_,z;c.parameters={...c.parameters,docs:{...(Y=c.parameters)==null?void 0:Y.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :error="true" />
+    \`
+  };
+}`,...(z=(_=c.parameters)==null?void 0:_.docs)==null?void 0:z.source}}};var B,I,M;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :success="true" />
+    \`
+  };
+}`,...(M=(I=p.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};var U,W,T;f.parameters={...f.parameters,docs:{...(U=f.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :disabled="true" />
+    \`
+  };
+}`,...(T=(W=f.parameters)==null?void 0:W.docs)==null?void 0:T.source}}};const ue=["Sample","SampleColorOnly","Label","LabelRequired","Warning","Error","Success","Disabled"];export{f as Disabled,c as Error,s as Label,u as LabelRequired,m as Sample,i as SampleColorOnly,p as Success,d as Warning,ue as __namedExportsOrder,se as default};

package/.storybook-static/assets/CopyToClipboardText.stories-r9YFXGiX.js

@@ -0,0 +1,32 @@
+import{z as v,c as S,a as p,t as c,i as d,A as u,o as z}from"./vue.esm-bundler-C7QvyiW1.js";import{T as V}from"./Tooltip-BQfusa53.js";import{I as _}from"./Icon-B8lXgcc0.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const k={class:"tw-flex tw-w-full tw-items-center tw-gap-2"},B=["title"],N={class:"tw-flex tw-z-50 tw-text-grayscale-600 tw-font-normal tw-text-sm tw-justify-center tw-whitespace-nowrap tw-select-none"},l={__name:"CopyToClipboardText",props:{text:{type:String,required:!0},tooltipText:{type:String,default:"Copy to clipboard"},tooltipCopiedText:{type:String,default:"Copied!"},shouldShowTooltip:{type:Boolean,default:!0},iconSize:{type:String,default:"sm"}},setup(e){const s=e,t=v(s.tooltipText),g=()=>{t.value=s.tooltipCopiedText,navigator.clipboard.writeText(s.text)};return(I,i)=>(z(),S("div",k,[p("p",{class:"tw-overflow-x-hidden tw-truncate",title:e.text},c(e.text),9,B),d(V,{class:"tw-items-center",direction:"top",alignment:"center",color:"grayscale-700","should-show-icon":!1,"should-show-tooltip":e.shouldShowTooltip&&t.value,"full-width":"","is-rounded-corner":""},{open:u(()=>[d(_,{name:"duplicate",alt:"Duplicate icon",size:e.iconSize,class:"tw-p-1 tw-rounded tw-cursor-pointer tw-text-grayscale-600 hover:tw-bg-grayscale-400","should-display-title":!1,onClick:g,onMouseleave:i[0]||(i[0]=j=>t.value=e.tooltipText)},null,8,["size"])]),content:u(()=>[p("p",N,c(t.value),1)]),_:1},8,["should-show-tooltip"])]))}};l.__docgenInfo={exportName:"default",displayName:"CopyToClipboardText",description:"",tags:{},props:[{name:"text",type:{name:"string"},required:!0},{name:"tooltipText",type:{name:"string"},defaultValue:{func:!1,value:"'Copy to clipboard'"}},{name:"tooltipCopiedText",type:{name:"string"},defaultValue:{func:!1,value:"'Copied!'"}},{name:"shouldShowTooltip",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"iconSize",type:{name:"string"},defaultValue:{func:!1,value:"'sm'"}}],sourceFiles:["/Users/brooke.couchman/Projects/fe-shared-lib/src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue"]};const A={title:"Components/CopyToClipboardText",component:l},n={components:{CopyToClipboardText:l}},o=()=>({...n,template:`
+      <CopyToClipboardText text="Copy me!"/>
+    `}),a=()=>({...n,template:`
+      <CopyToClipboardText text="Copy me!" :should-show-tooltip="false"/>
+    `}),r=()=>({...n,template:`
+      <div style="width: 200px; border: solid blue 1px">
+        <CopyToClipboardText text="This sentence is too large to fit" />
+      </div>
+    `});var m,x,T;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CopyToClipboardText text="Copy me!"/>
+    \`
+  };
+}`,...(T=(x=o.parameters)==null?void 0:x.docs)==null?void 0:T.source}}};var C,y,f;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CopyToClipboardText text="Copy me!" :should-show-tooltip="false"/>
+    \`
+  };
+}`,...(f=(y=a.parameters)==null?void 0:y.docs)==null?void 0:f.source}}};var w,h,b;r.parameters={...r.parameters,docs:{...(w=r.parameters)==null?void 0:w.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <div style="width: 200px; border: solid blue 1px">
+        <CopyToClipboardText text="This sentence is too large to fit" />
+      </div>
+    \`
+  };
+}`,...(b=(h=r.parameters)==null?void 0:h.docs)==null?void 0:b.source}}};const F=["Sample","WithoutTooltip","Truncated"];export{o as Sample,r as Truncated,a as WithoutTooltip,F as __namedExportsOrder,A as default};