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

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

@@ -0,0 +1 @@
+import{I as w}from"./Icon-B8lXgcc0.js";import{c as h,a as f,r as d,n as o,b as s,e as c,g as p,o as l}from"./vue.esm-bundler-C7QvyiW1.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/brooke.couchman/Projects/fe-shared-lib/src/atoms/components/Tooltip/Tooltip.vue"]};export{_ as T};