@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

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

@@ -0,0 +1,73 @@
+import{F as g}from"./FormControl.mixin-DcEBwrV3.js";import{c as n,b as a,z as k,t as j,g as F,e as t,n as V,C as v,o as l}from"./iframe-B3A6OXQU.js";import{_ as q}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-C17LFvsP.js";import"./preload-helper-PPVm8Dsz.js";const h={mixins:[g],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)}}},P=["for"],S={key:0,class:"tw-text-error-500"},N=["id","value","disabled"],z={key:0,class:"tw-w-full tw-h-full"},L=["value","disabled"];function O(e,o,C,D,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}])},[k(j(e.label)+" ",1),e.required?(l(),n("span",S,"*")):F("",!0)],10,P)):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:V({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,N)],4),C.mode==="color-and-text"?(l(),n("div",z,[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,L)])):F("",!0)],2)],2)}const y=q(h,[["render",O]]);h.__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:"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:"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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/ColorPicker/ColorPicker.vue","/home/zknowles/repos/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js"]};const I={title:"Components/Color Picker",component:y},r={components:{ColorPicker:y},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" />
+    `});m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" />
+    \`
+  };
+}`,...m.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" mode="color-only" />
+    \`
+  };
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" />
+    \`
+  };
+}`,...s.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    \`
+  };
+}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :warning="true" />
+    \`
+  };
+}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :error="true" />
+    \`
+  };
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :success="true" />
+    \`
+  };
+}`,...p.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :disabled="true" />
+    \`
+  };
+}`,...f.parameters?.docs?.source}}};const M=["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,M as __namedExportsOrder,I as default};

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

@@ -0,0 +1,32 @@
+import{q as x,c as T,e as p,t as d,h as c,x as u,o as C}from"./iframe-B3A6OXQU.js";import{T as y}from"./Tooltip-ZukyujG5.js";import{I as f}from"./Icon-C17LFvsP.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const w={class:"tw-flex tw-w-full tw-items-center tw-gap-2"},h=["title"],g={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"},s={__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 l=e,t=x(l.tooltipText),m=()=>{t.value=l.tooltipCopiedText,navigator.clipboard.writeText(l.text)};return(b,i)=>(C(),T("div",w,[p("p",{class:"tw-overflow-x-hidden tw-truncate",title:e.text},d(e.text),9,h),c(y,{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(()=>[c(f,{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:m,onMouseleave:i[0]||(i[0]=v=>t.value=e.tooltipText)},null,8,["size"])]),content:u(()=>[p("p",g,d(t.value),1)]),_:1},8,["should-show-tooltip"])]))}};s.__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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue"]};const B={title:"Components/CopyToClipboardText",component:s},n={components:{CopyToClipboardText:s}},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>
+    `});o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CopyToClipboardText text="Copy me!"/>
+    \`
+  };
+}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CopyToClipboardText text="Copy me!" :should-show-tooltip="false"/>
+    \`
+  };
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <div style="width: 200px; border: solid blue 1px">
+        <CopyToClipboardText text="This sentence is too large to fit" />
+      </div>
+    \`
+  };
+}`,...r.parameters?.docs?.source}}};const N=["Sample","WithoutTooltip","Truncated"];export{o as Sample,r as Truncated,a as WithoutTooltip,N as __namedExportsOrder,B as default};

package/.storybook-static/assets/Dropdown.stories-1zKPATii.js

@@ -0,0 +1,159 @@
+import{D as n,a as l}from"./DropdownItem-DA6TdpDb.js";import{P as a}from"./Pill-DLXZ_TL8.js";import{B as r}from"./Button-DKdQT6Fq.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./Icon-C17LFvsP.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BvWW6Duz.js";const g={title:"Components/Dropdown",component:n},e=()=>({components:{Dropdown:n,DropdownItem:l,Pill:a},data(){return{show:!0}},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
+          <DropdownItem @click="() => show = false">
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `}),t=()=>({components:{Dropdown:n,DropdownItem:l},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `}),s=()=>({components:{Dropdown:n,DropdownItem:l,Pill:a},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,setup(){return{items:[{display:"Menu 1"},{display:"Menu 2"},{display:"Menu 3"},{display:"Menu 4"},{display:"Menu 5"},{display:"Menu 6"},{display:"Menu 7"},{display:"Menu 8"},{display:"Menu 9"},{display:"Menu 10"}]}}}),o=()=>({components:{Dropdown:n,DropdownItem:l,Button:r,Pill:a},template:`
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    `});e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill
+    },
+    data() {
+      return {
+        show: true
+      };
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
+          <DropdownItem @click="() => show = false">
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`
+  };
+}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`
+  };
+}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`,
+    setup() {
+      return {
+        items: [{
+          display: 'Menu 1'
+        }, {
+          display: 'Menu 2'
+        }, {
+          display: 'Menu 3'
+        }, {
+          display: 'Menu 4'
+        }, {
+          display: 'Menu 5'
+        }, {
+          display: 'Menu 6'
+        }, {
+          display: 'Menu 7'
+        }, {
+          display: 'Menu 8'
+        }, {
+          display: 'Menu 9'
+        }, {
+          display: 'Menu 10'
+        }]
+      };
+    }
+  };
+}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Button,
+      Pill
+    },
+    template: \`
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    \`
+  };
+}`,...o.parameters?.docs?.source}}};const y=["Sample","Disabled","LongListFixedHeight","SampleElementClasses"];export{t as Disabled,s as LongListFixedHeight,e as Sample,o as SampleElementClasses,y as __namedExportsOrder,g as default};

package/.storybook-static/assets/DropdownItem-BV-BdThU.css

@@ -0,0 +1 @@
+.dropdown-item-hover[data-v-dce50d20]:hover{background-color:#eee}

package/.storybook-static/assets/DropdownItem-DA6TdpDb.js

@@ -0,0 +1 @@
+import{c as r,e as n,f as i,h as p,b as o,A as h,B as g,a as b,o as u,z as v,t as y,C as V}from"./iframe-B3A6OXQU.js";import{I as _}from"./Icon-C17LFvsP.js";import{_ as d}from"./_plugin-vue_export-helper-DlAUqK2U.js";const f={components:{Icon:_},props:{menuAlign:{type:String,default:"right"},title:{type:String,required:!1,default:void 0},elementClasses:{type:String,required:!1,default:""},menuElementClasses:{type:String,required:!1,default:""},disabled:{type:Boolean,required:!1,default:!1},show:{type:Boolean,required:!1,default:!1},iconSize:{type:String,required:!1,default:"sm"},tooltip:{type:String,required:!1}},data:()=>({isMenuVisible:!1}),computed:{menuItems(){return(this.$slots.default||[]).filter(t=>t.tag)}},watch:{show(){this.isMenuVisible=this.show}},mounted(){this.isMenuVisible=this.show},methods:{onToggleMenu(){this.isMenuVisible=!this.isMenuVisible,this.$emit("update:show",this.isMenuVisible)},hideMenu(){this.isMenuVisible=!1,this.$emit("update:show",!1)},showMenu(){this.isMenuVisible=!0,this.$emit("update:show",!0)}}},M={class:"tw-relative tw-inline-block tw-w-full"},k=["title"],q={class:"tw-text-left tw-flex-auto tw-pl-3 tw-truncate"},C={class:"tw-py-1"};function S(t,s,e,c,w,a){const l=b("Icon");return u(),r("div",M,[n("div",{class:o(["tw-bg-white tw-border tw-border-solid tw-h-10 tw-flex tw-items-center tw-rounded tw-text-md tw-w-full",[e.elementClasses,e.disabled&&"tw-opacity-40 tw-cursor-not-allowed",!t.isMenuVisible&&"tw-border-grayscale-500",t.isMenuVisible&&"tw-border-grayscale-700"]]),onClick:s[0]||(s[0]=()=>!e.disabled&&a.onToggleMenu()),title:e.tooltip},[n("div",q,[i(t.$slots,"title",{},()=>[v(y(e.title),1)])]),p(l,{name:t.isMenuVisible?"chevron-up":"chevron-down",class:"tw-pt-1 tw-pr-2 tw-flex-none",color:"secondary-500",size:e.iconSize},null,8,["name","size"])],10,k),h(n("div",{class:o(["tw-origin-top-right tw-absolute tw-mt-2 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20",[e.menuElementClasses,{"tw-right-0":e.menuAlign==="right","tw-left-0":e.menuAlign!=="right"}]])},[n("div",C,[i(t.$slots,"default")])],2),[[g,t.isMenuVisible]])])}const B=d(f,[["render",S]]);f.__docgenInfo={exportName:"default",displayName:"Dropdown",description:"",tags:{},props:[{name:"menuAlign",type:{name:"string"},defaultValue:{func:!1,value:"'right'"}},{name:"title",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"elementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"menuElementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"disabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"show",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"iconSize",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}},{name:"tooltip",type:{name:"string"},required:!1}],events:[{name:"update:show",type:{names:["undefined"]}}],slots:[{name:"title"},{name:"default"}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Dropdown/Dropdown.vue"]};const m={props:{backgroundHover:{type:Boolean,default:!0}},methods:{onClick(){this.$emit("click")}}};function D(t,s,e,c,w,a){return u(),r("div",null,[n("div",{class:o(["tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer",{"dropdown-item-hover":e.backgroundHover}]),onClick:s[0]||(s[0]=V((...l)=>a.onClick&&a.onClick(...l),["stop"]))},[i(t.$slots,"default",{},void 0,!0)],2)])}const N=d(m,[["render",D],["__scopeId","data-v-dce50d20"]]);m.__docgenInfo={exportName:"default",displayName:"DropdownItem",description:"",tags:{},props:[{name:"backgroundHover",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}}],events:[{name:"click"}],slots:[{name:"default"}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Dropdown/DropdownItem.vue"]};export{B as D,N as a};

package/.storybook-static/assets/FormControl.mixin-DcEBwrV3.js

@@ -0,0 +1 @@
+import{I as a}from"./Icon-C17LFvsP.js";const l=32,i={components:{Icon:a},props:{attrs:{type:Object,required:!1,default:()=>{}},modelValue:{type:[String,Number],required:!1,default:""},id:{type:String,required:!1,default:void 0},placeholder:{type:String,required:!1,default:void 0},size:{type:String,required:!1,default:"sm"},label:{type:String,required:!1,default:void 0},showLabelScreenReaderOnly:{type:Boolean,required:!1,default:!1},icon:{type:String,required:!1,default:void 0},required:{type:Boolean,required:!1,default:!1},error:{type:Boolean,required:!1,default:!1},warning:{type:Boolean,required:!1,default:!1},success:{type:Boolean,required:!1,default:!1},disabled:{type:Boolean,required:!1,default:!1},readonly:{type:Boolean,required:!1,default:!1},name:{type:String,required:!1,default:void 0},maxlength:{type:Number,required:!1,default:void 0},minlength:{type:Number,required:!1,default:void 0},isSpaceDisabled:{type:Boolean,required:!1,default:!1},requiredMessage:{type:String,required:!1,default:"Please fill in this field."}},methods:{input(e,t){this.$emit("update:modelValue",e),this.$emit("input",e),t?.target&&t.target.setCustomValidity("")},keyup(e){this.$emit("keyup",e)},keydown(e,t){if(this.isSpaceDisabled&&t.which===l){t.preventDefault();return}this.$emit("keydown",e)},focus(e){this.$emit("focus",e)},blur(e){this.$emit("blur",e)},enterKeyUp(e){this.$emit("enter-key-up",e)}}};export{i as F};

package/.storybook-static/assets/HashRouteModal.stories-BGxvqE22.js

@@ -0,0 +1,60 @@
+import{E as v,y as g,x as n,a as M,o as y,f as l}from"./iframe-B3A6OXQU.js";import{M as R}from"./Modal-CydTNprT.js";import{_ as H}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as k}from"./Button-DKdQT6Fq.js";import"./preload-helper-PPVm8Dsz.js";import"./Icon-C17LFvsP.js";import"./ButtonPrimary-BvWW6Duz.js";var u;(function(e){e.pop="pop",e.push="push"})(u||(u={}));var d;(function(e){e.back="back",e.forward="forward",e.unknown=""})(d||(d={}));var c;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(c||(c={}));const V=Symbol("");function m(){return v(V)}const q="#",r="|",B=/[#|]/,S=(e,a)=>`#${e.replace(q,"").split(r).filter(o=>o).concat(a).join(r)}`,x={props:{isHashRouteEnabled:{type:Boolean,required:!1,default:!1}},data:()=>({removeHookFunc:void 0}),mounted(){!this.isHashRouteEnabled||!this.$router||typeof this.onHashRouteChange!="function"||(this.removeHookFunc=this.$router.afterEach((e,a)=>{const o=a.hash.split(e.hash).join("").replace(B,"");this.onHashRouteChange(o)}))},unmounted(){this.removeHookFunc&&(this.removeHookFunc(),this.removeHookFunc=void 0)},methods:{hashRoutePush(e){if(!this.isHashRouteEnabled||!this.$router)return;const a=S(this.$router.currentRoute.value.hash,e);this.$router.push({hash:a})},hashRouteBack(e){!this.isHashRouteEnabled||!this.$router||this.$router.currentRoute.value.hash.split(r).filter(a=>a.indexOf(e)>-1).length!==0&&this.$router.back()}}},f={components:{Modal:R},mixins:[x],props:{simple:{type:Boolean,required:!1,default:!1},removeHorizontalMargin:{type:Boolean,required:!1,default:!1},visible:{type:Boolean,required:!1,default:!1},mandatory:{type:Boolean,required:!1,default:!1},mode:{type:String,required:!1,default:void 0},classes:{type:[String,Object],required:!1,default:""},size:{type:String,required:!1,default:void 0},fullScreenBreakpoint:{type:String,required:!1,default:void 0},closeOnEsc:{type:Boolean,required:!1,default:!1},hideScrollbar:{type:Boolean,required:!1,default:!0}},computed:{modalTag(){return`modal-${this.$.uid}`}},watch:{visible(e){e&&!this.mandatory&&this.hashRoutePush(this.modalTag)}},mounted(){this.visible&&!this.mandatory&&this.hashRoutePush(this.modalTag)},methods:{onHashRouteChange(e){e!==this.modalTag||!this.visible||this.$emit("close-modal",{})},onCloseModal(e){this.hashRouteBack(this.modalTag),this.$emit("close-modal",e)}}};function z(e,a,o,_,C,p){const b=M("Modal");return y(),g(b,{simple:o.simple,"remove-horizontal-margin":o.removeHorizontalMargin,visible:o.visible,mandatory:o.mandatory,mode:o.mode,classes:o.classes,size:o.size,"full-screen-breakpoint":o.fullScreenBreakpoint,"close-on-esc":o.closeOnEsc,"hide-scrollbar":o.hideScrollbar,onCloseModal:p.onCloseModal},{header:n(()=>[l(e.$slots,"header")]),default:n(()=>[l(e.$slots,"default")]),footer:n(()=>[l(e.$slots,"footer")]),_:3},8,["simple","remove-horizontal-margin","visible","mandatory","mode","classes","size","full-screen-breakpoint","close-on-esc","hide-scrollbar","onCloseModal"])}const i=H(f,[["render",z]]);f.__docgenInfo={exportName:"default",displayName:"HashRouteModal",description:"",tags:{},props:[{name:"isHashRouteEnabled",mixin:{name:"hash-router-mixin",path:"../../mixin/hash-router-mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"simple",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"removeHorizontalMargin",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"visible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mandatory",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mode",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"classes",type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"fullScreenBreakpoint",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"closeOnEsc",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"hideScrollbar",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}}],events:[{name:"close-modal",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Modal/HashRouteModal.vue","/home/zknowles/repos/fe-shared-lib/src/atoms/mixin/hash-router-mixin.js"]};const Y={title:"Components/Hash Router Modal",component:i},h={isVisible:!0},s=(e,{argTypes:a})=>{const o=m();return{components:{HashRouteModal:i},props:Object.keys(a),template:`
+      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+      Your component goes here
+      </HashRouteModal>
+    `,methods:{closeLoginModal(){this.isVisible=!1}},router:o}};s.args=h;const t=()=>{const e=m();return{components:{HashRouteModal:i,Button:k},data(){return{isVisible:!1}},template:`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
+        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </HashRouteModal>
+      </div>
+    `,methods:{closeLoginModal(){this.isVisible=!1}},router:e}};t.args=h;s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  const router = useRouter();
+  return {
+    components: {
+      HashRouteModal
+    },
+    props: Object.keys(argTypes),
+    template: \`
+      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+      Your component goes here
+      </HashRouteModal>
+    \`,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      }
+    },
+    router
+  };
+}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
+  const router = useRouter();
+  return {
+    components: {
+      HashRouteModal,
+      Button
+    },
+    data() {
+      return {
+        isVisible: false
+      };
+    },
+    template: \`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
+        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </HashRouteModal>
+      </div>
+    \`,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      }
+    },
+    router
+  };
+}`,...t.parameters?.docs?.source}}};const T=["Sample","OpenWithButton"];export{t as OpenWithButton,s as Sample,T as __namedExportsOrder,Y as default};

package/.storybook-static/assets/HelloBar-CYEZR2kQ.js

@@ -0,0 +1 @@
+import{I as g}from"./Icon-C17LFvsP.js";import{c as n,e as w,y as i,b as r,g as l,t as u,F as o,r as y,f as v,a as b,o as a}from"./iframe-B3A6OXQU.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";const m={components:{Icon:g},props:{label:{type:[String,Array],required:!0},description:{type:String,required:!1,default:void 0},variant:{type:String,required:!1,default:"success"},fontSize:{type:String,required:!1,default:"base"}},computed:{hasCtaSlot(){return!!this.$slots.cta},fontSizeClass(){return`tw-text-${this.fontSize}`}},methods:{isArray(c){return c instanceof Array}}},h={class:"lg:tw-mr-8"},S={key:0,class:"tw-flex-none"};function _(c,k,e,z,A,t){const s=b("Icon");return a(),n("div",{class:r(["tw-font-sans tw-py-3 tw-px-6 tw-rounded",{"tw-bg-info-500":e.variant==="info","tw-bg-error-500":e.variant==="error","tw-bg-success-500":e.variant==="success","tw-bg-warning-500":e.variant==="warning","tw-text-white":e.variant!=="warning","tw-text-grayscale-800":e.variant==="warning"}])},[w("div",{class:r(["tw-flex",{"tw-items-start":e.description||t.isArray(e.label),"tw-items-center":!e.description&&!t.isArray(e.label)}])},[e.variant==="success"?(a(),i(s,{key:0,name:"callout-success",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):l("",!0),e.variant==="warning"?(a(),i(s,{key:1,name:"callout-warning",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):l("",!0),e.variant==="error"?(a(),i(s,{key:2,name:"callout-error",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):l("",!0),e.variant==="info"?(a(),i(s,{key:3,name:"callout-info",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):l("",!0),w("div",{class:r(["tw-w-full tw-flex tw-flex-col lg:tw-flex-row",{"lg:tw-items-center tw-justify-between":t.hasCtaSlot}])},[w("div",h,[t.isArray(e.label)?l("",!0):(a(),n("p",{key:0,class:r(["tw-m-0 tw-leading-tight",[t.fontSizeClass,{"tw-font-bold tw-mb-1":e.description,"tw-text-grayscale-800":e.variant==="warning","tw-text-white":e.variant!=="warning"}]])},u(e.label),3)),t.isArray(e.label)?(a(),n("ul",{key:1,class:r(["tw-m-0 tw-leading-tight tw-ml-4 tw-pl-0",[t.fontSizeClass,{"tw-text-grayscale-800":e.variant==="warning","tw-text-white":e.variant!=="warning"}]])},[(a(!0),n(o,null,y(e.label,(d,f)=>(a(),n("li",{key:f},u(d),1))),128))],2)):l("",!0),e.description?(a(),n("p",{key:2,class:r(["tw-m-0 tw-leading-tight tw-mb-2 lg:tw-mb-0",[t.fontSizeClass,{"tw-text-white":e.variant!=="warning","tw-text-grayscale-600":e.variant==="warning"}]])},u(e.description),3)):l("",!0)]),t.hasCtaSlot?(a(),n("div",S,[v(c.$slots,"cta")])):l("",!0)],2)],2)],2)}const H=x(m,[["render",_]]);m.__docgenInfo={exportName:"default",displayName:"HelloBar",description:"",tags:{},props:[{name:"label",type:{name:"string|array"},required:!0},{name:"description",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"variant",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'success'"}},{name:"fontSize",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'base'"}}],slots:[{name:"cta"}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/HelloBar/HelloBar.vue"]};export{H};