@designcrowd/fe-shared-lib 1.5.23 → 1.5.24-upgradepkg

package/.storybook-static/assets/Toggle.stories-yT5-rL2k.js

@@ -0,0 +1,161 @@
+import{C as x}from"./Checkbox.mixin-DkHpdvGa.js";import{c as h,e as t,b as o,z as v,t as C,g as k,o as g}from"./iframe-B3A6OXQU.js";import{_ as T}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-PPVm8Dsz.js";const w={mixins:[x]},y=["for"],V={key:0,class:"tw-text-error-500"},S={class:"tw-flex tw-justify-between tw-items-center"},q=["id","checked","disabled"];function j(e,b,z,D,$,L){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}])},[v(C(e.label)+" ",1),e.required?(g(),h("span",V,"*")):k("",!0)],2)):k("",!0),t("div",S,[t("input",{id:`scl-input-${e.id}`,checked:e.modelValue,type:"checkbox",class:"tw-sr-only",disabled:e.disabled,onChange:b[0]||(b[0]=f=>e.$emit("update:modelValue",f.target.checked))},null,40,q),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,y)],2)}const n=T(w,[["render",j]]);w.__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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Checkbox/Checkbox.mixin.js","/home/zknowles/repos/fe-shared-lib/src/atoms/components/Toggle/Toggle.vue"]};const R={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" />
+    `});r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" />
+    \`
+  };
+}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" />
+    \`
+  };
+}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.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.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :required="true" />
+    \`
+  };
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="success" />
+    \`
+  };
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="error" />
+    \`
+  };
+}`,...d.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="info" />
+    \`
+  };
+}`,...i.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" color="warning" />
+    \`
+  };
+}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" :disabled="true" />
+    \`
+  };
+}`,...u.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Toggle
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Toggle v-model="checked" id="test" size="sm" />
+    \`
+  };
+}`,...p.parameters?.docs?.source}}};const O=["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,O as __namedExportsOrder,R as default};

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}

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

@@ -0,0 +1 @@
+import{I as w}from"./Icon-C17LFvsP.js";import{c as h,e as f,f as a,b as o,y as s,g as c,a as p,o as l}from"./iframe-B3A6OXQU.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]=(...d)=>u.getTooltipDirection&&u.getTooltipDirection(...d)),onMouseleave:n[1]||(n[1]=d=>e.tooltipDirection=t.direction)},[a(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})},[a(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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Tooltip/Tooltip.vue"]};export{_ as T};