@designcrowd/fe-shared-lib 1.5.20 → 1.5.21

package/.storybook-static/assets/Toggle.stories-CuTFLoNh.js

@@ -0,0 +1,161 @@
+import{C as X}from"./Checkbox.mixin-DkHpdvGa.js";import{c as h,e as t,f as k,b as o,z as Y,t as Z,o as g}from"./iframe-C86bI_2U.js";import{_}from"./_plugin-vue_export-helper-DlAUqK2U.js";const P={mixins:[X]},ee=["for"],ne={key:0,class:"tw-text-error-500"},te={class:"tw-flex tw-justify-between tw-items-center"},oe=["id","checked","disabled"];function re(e,b,ae,se,le,ce){return g(),h("div",{class:o(["tw-box-border",{"tw-cursor-pointer tw-pointer-events-none tw-opacity-30":e.disabled}])},[t("label",{for:`scl-input-${e.id}`,class:o(["tw-cursor-pointer",{"tw-flex tw-items-center":e.inline}])},[e.label?(g(),h("span",{key:0,class:o(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly,"tw-mb-2":!e.inline,"tw-ml-2 tw-order-last":e.inline}])},[Y(Z(e.label)+" ",1),e.required?(g(),h("span",ne,"*")):k("",!0)],2)):k("",!0),t("div",te,[t("input",{id:`scl-input-${e.id}`,checked:e.modelValue,type:"checkbox",class:"tw-sr-only",disabled:e.disabled,onChange:b[0]||(b[0]=Q=>e.$emit("update:modelValue",Q.target.checked))},null,40,oe),t("div",{class:o(["tw-flex tw-items-center tw-rounded-full tw-p-1 tw-duration-300 tw-ease-in-out tw-box-border",{"tw-bg-primary-500":e.modelValue&&e.color==="primary","tw-bg-success-500":e.modelValue&&e.color==="success","tw-bg-error-500":e.modelValue&&e.color==="error","tw-bg-info-500":e.modelValue&&e.color==="info","tw-bg-warning-500":e.modelValue&&e.color==="warning","tw-bg-grayscale-500":!e.modelValue,"tw-w-10 tw-h-5":e.size==="sm","tw-w-12 tw-h-6":e.size==="md"}])},[t("div",{class:o(["tw-bg-white tw-rounded-full tw-shadow-sm tw-transform tw-duration-300 tw-ease-in-out",{"tw-w-3 tw-h-3":e.size==="sm","tw-w-4 tw-h-4":e.size==="md","tw-translate-x-5":e.size==="sm"&&e.modelValue,"tw-translate-x-6":e.size==="md"&&e.modelValue}])},null,2)],2)])],10,ee)],2)}const n=_(P,[["render",re]]);P.__docgenInfo={exportName:"default",displayName:"Toggle",description:"",tags:{},props:[{name:"modelValue",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},required:!0},{name:"id",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"string"},required:!0},{name:"label",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showLabelScreenReaderOnly",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"inline",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"required",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"color",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'success'"}},{name:"size",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'md'"}},{name:"showBorder",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"classes",mixin:{name:"Checkbox.mixin",path:"../Checkbox/Checkbox.mixin.js"},type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"update:modelValue"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Checkbox/Checkbox.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Toggle/Toggle.vue"]};const ue={title:"Components/Toggle",component:n},r=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" />
+    `}),a=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" />
+    `}),s=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :inline="true" />
+    `}),l=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :required="true" />
+    `}),c=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" color="success" />
+    `}),d=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" color="error" />
+    `}),i=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" color="info" />
+    `}),m=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" color="warning" />
+    `}),u=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" :disabled="true" />
+    `}),p=()=>({components:{Toggle:n},data(){return{checked:!0}},template:`
+      <Toggle v-model="checked" id="test" size="sm" />
+    `});var f,w,x;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" />
+    \`
+  };
+}`,...(x=(w=r.parameters)==null?void 0:w.docs)==null?void 0:x.source}}};var v,C,T;a.parameters={...a.parameters,docs:{...(v=a.parameters)==null?void 0:v.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" />
+    \`
+  };
+}`,...(T=(C=a.parameters)==null?void 0:C.docs)==null?void 0:T.source}}};var y,V,S;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :inline="true" />
+    \`
+  };
+}`,...(S=(V=s.parameters)==null?void 0:V.docs)==null?void 0:S.source}}};var j,q,z;l.parameters={...l.parameters,docs:{...(j=l.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :required="true" />
+    \`
+  };
+}`,...(z=(q=l.parameters)==null?void 0:q.docs)==null?void 0:z.source}}};var D,$,L;c.parameters={...c.parameters,docs:{...(D=c.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="success" />
+    \`
+  };
+}`,...(L=($=c.parameters)==null?void 0:$.docs)==null?void 0:L.source}}};var I,N,B;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="error" />
+    \`
+  };
+}`,...(B=(N=d.parameters)==null?void 0:N.docs)==null?void 0:B.source}}};var E,R,O;i.parameters={...i.parameters,docs:{...(E=i.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="info" />
+    \`
+  };
+}`,...(O=(R=i.parameters)==null?void 0:R.docs)==null?void 0:O.source}}};var U,W,F;m.parameters={...m.parameters,docs:{...(U=m.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="warning" />
+    \`
+  };
+}`,...(F=(W=m.parameters)==null?void 0:W.docs)==null?void 0:F.source}}};var M,A,G;u.parameters={...u.parameters,docs:{...(M=u.parameters)==null?void 0:M.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" :disabled="true" />
+    \`
+  };
+}`,...(G=(A=u.parameters)==null?void 0:A.docs)==null?void 0:G.source}}};var H,J,K;p.parameters={...p.parameters,docs:{...(H=p.parameters)==null?void 0:H.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" size="sm" />
+    \`
+  };
+}`,...(K=(J=p.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};const pe=["Sample","Label","LabelInline","Required","Success","Error","Info","Warning","Disabled","Small"];export{u as Disabled,d as Error,i as Info,a as Label,s as LabelInline,l as Required,r as Sample,p as Small,c as Success,m as Warning,pe as __namedExportsOrder,ue as default};

package/.storybook-static/assets/Tooltip-DcSbUh5f.js

@@ -0,0 +1 @@
+import{I as w}from"./Icon-8mZGP41G.js";import{c as h,e as f,g as d,b as o,y as s,f as c,a as p,o as l}from"./iframe-C86bI_2U.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const m={components:{Icon:w},props:{color:{type:String,required:!1,default:"info-500"},direction:{type:String,required:!1,default:"top"},alignment:{type:String,required:!1,default:"left"},hasExtendedWidth:{type:Boolean,required:!1,default:!1},fullWidth:{type:Boolean,default:!1},isRoundedCorner:{type:Boolean,default:!1},shouldShowIcon:{type:Boolean,default:!0}},data(){return{tooltipDirection:null,tooltipBodyRef:"js-tooltip-body"}},mounted(){this.tooltipDirection=this.direction},methods:{getTooltipDirection(){const i=this.$refs[this.tooltipBodyRef].getBoundingClientRect();this.direction==="top"&&(i.top<0?this.tooltipDirection="bottom":this.tooltipDirection="top"),this.direction==="right"&&(i.right>window.innerWidth?this.tooltipDirection="left":this.tooltipDirection="right"),this.direction==="bottom"&&(i.bottom>window.innerHeight?this.tooltipDirection="top":this.tooltipDirection="bottom"),this.direction==="left"&&(i.left<0?this.tooltipDirection="right":this.tooltipDirection="left")}}};function D(i,n,t,y,e,u){const r=p("Icon");return l(),h("div",{class:o({"tw-inline-flex tw-relative":!0,"tw-justify-center":t.alignment==="center"&&(e.tooltipDirection==="top"||e.tooltipDirection==="bottom"),"tw-justify-end":t.alignment==="right"&&(e.tooltipDirection==="top"||e.tooltipDirection==="bottom"),"tw-items-center":t.alignment==="middle"&&(e.tooltipDirection==="right"||e.tooltipDirection==="left"),"tw-items-end":t.alignment==="top"&&(e.tooltipDirection==="right"||e.tooltipDirection==="left")})},[f("span",{class:o(["shared-tooltip__open",{"tw-w-full":t.fullWidth}]),onMouseover:n[0]||(n[0]=(...a)=>u.getTooltipDirection&&u.getTooltipDirection(...a)),onMouseleave:n[1]||(n[1]=a=>e.tooltipDirection=t.direction)},[d(i.$slots,"open",{},void 0,!0)],34),f("div",{class:o({"shared-tooltip__content tw-absolute tw-hidden":!0,"tw-m-3":!t.shouldShowIcon,"tw-bottom-full tw-flex-col-reverse":e.tooltipDirection==="top","tw-left-full tw-flex-row":e.tooltipDirection==="right","tw-top-full tw-flex-col":e.tooltipDirection==="bottom","tw-right-full tw-flex-row-reverse":e.tooltipDirection==="left"})},[t.shouldShowIcon&&e.tooltipDirection==="top"?(l(),s(r,{key:0,class:o({"tw-flex tw-z-20 tw--mt-px":!0,"tw-justify-end":t.alignment==="right","tw-justify-center":t.alignment==="center"}),name:"tooltip-bottom",color:t.color},null,8,["class","color"])):c("",!0),t.shouldShowIcon&&e.tooltipDirection==="right"?(l(),s(r,{key:1,class:o({"tw-flex tw-z-20 tw--mr-1.5":!0,"tw-items-end":t.alignment==="top","tw-items-center":t.alignment==="middle"}),name:"tooltip-left",color:t.color},null,8,["class","color"])):c("",!0),t.shouldShowIcon&&e.tooltipDirection==="bottom"?(l(),s(r,{key:2,class:o({"tw-flex tw-z-20 tw--mb-1.5":!0,"tw-justify-end":t.alignment==="right","tw-justify-center":t.alignment==="center"}),name:"tooltip-top",color:t.color},null,8,["class","color"])):c("",!0),t.shouldShowIcon&&e.tooltipDirection==="left"?(l(),s(r,{key:3,class:o({"tw-flex tw-z-20 tw--ml-px":!0,"tw-items-end":t.alignment==="top","tw-items-center":t.alignment==="middle"}),name:"tooltip-right",color:t.color},null,8,["class","color"])):c("",!0),f("div",{ref:e.tooltipBodyRef,class:o({[`tw-border-${t.color} tw-bg-white tw-border tw-border-solid tw-shadow tw-p-3 tw-z-10 tw-text-left`]:!0,"tw-w-60":!t.fullWidth,"tw-w-full":t.fullWidth,"shared-tooltip__body":!t.hasExtendedWidth,"shared-tooltip__extended-body":t.hasExtendedWidth,"tw-bottom-full":e.tooltipDirection==="top","tw-left-full tw--ml-px":e.tooltipDirection==="right","tw-top-full tw--mt-px":e.tooltipDirection==="bottom","tw-right-full":e.tooltipDirection==="left","tw-rounded":t.isRoundedCorner})},[d(i.$slots,"content",{},void 0,!0)],2)],2)],2)}const _=g(m,[["render",D],["__scopeId","data-v-dd32b50d"]]);m.__docgenInfo={exportName:"default",displayName:"Tooltip",description:"",tags:{},props:[{name:"color",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'info-500'"}},{name:"direction",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'top'"}},{name:"alignment",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'left'"}},{name:"hasExtendedWidth",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"fullWidth",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isRoundedCorner",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldShowIcon",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}}],slots:[{name:"open"},{name:"content"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Tooltip/Tooltip.vue"]};export{_ as T};

package/.storybook-static/assets/Tooltip-DyXIgFQH.css

@@ -0,0 +1 @@
+.shared-tooltip__body[data-v-dd32b50d]{max-width:15rem}.shared-tooltip__extended-body[data-v-dd32b50d]{max-width:27rem;width:27rem}.shared-tooltip__open[data-v-dd32b50d]:hover{cursor:help}.shared-tooltip__open:hover+.shared-tooltip__content[data-v-dd32b50d]{display:flex}