@feedmepos/ui-library 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dynamic-dialog/FmDynamicDialog.vue.d.ts +1 -1
- package/dist/components/form/select/FmSelect.vue.d.ts +11 -10
- package/dist/components/menu/menu-container/FmMenu.vue.d.ts +10 -8
- package/dist/components/tooltip/FmTooltip.vue.d.ts +3 -3
- package/dist/components.d.ts +561 -123
- package/dist/federation/FmDateRangePicker-6a251133.css +1 -0
- package/dist/federation/FmDropField-b51924c1.css +1 -0
- package/dist/federation/FmMenu-1bf41c36.css +1 -0
- package/dist/federation/FmProgressIndicator.vue_vue_type_style_index_0_lang-4936958a.js +1 -0
- package/dist/federation/FmSelect-0d4033b1.css +1 -0
- package/dist/federation/FmStepper.vue_vue_type_script_setup_true_lang-ebb560f4.js +1 -0
- package/dist/federation/FmTextField.vue_vue_type_style_index_0_lang-37891b48.js +1 -0
- package/dist/federation/{FmTimePicker.vue_vue_type_style_index_0_lang-cd3ff46f.js → FmTimePicker.vue_vue_type_style_index_0_lang-adf67efb.js} +1 -1
- package/dist/federation/FmTooltip.vue_vue_type_script_setup_true_lang-4afc1a0b.js +1 -0
- package/dist/federation/__federation_expose_FmDateRangePicker-96bfdeee.js +1 -0
- package/dist/federation/__federation_expose_FmDropField-acc0feb2.js +1 -0
- package/dist/federation/__federation_expose_FmDynamicDialog-f6d013b7.js +1 -0
- package/dist/federation/__federation_expose_FmMenu-da3eca46.js +1 -0
- package/dist/federation/__federation_expose_FmProgressIndicator-cb1c88dd.js +1 -0
- package/dist/federation/__federation_expose_FmSelect-c850d1a0.js +1 -0
- package/dist/federation/{__federation_expose_FmStepper-39811b61.js → __federation_expose_FmStepper-fc3f64a1.js} +1 -1
- package/dist/federation/{__federation_expose_FmTextField-ee99cd30.js → __federation_expose_FmTextField-09b9d527.js} +1 -1
- package/dist/federation/{__federation_expose_FmTimePicker-149aa26d.js → __federation_expose_FmTimePicker-2f0c4dd1.js} +1 -1
- package/dist/federation/{__federation_expose_FmTooltip-fa2c64c7.js → __federation_expose_FmTooltip-adedf618.js} +1 -1
- package/dist/federation/dialog-plugin-a69976d4.js +1 -0
- package/dist/federation/feedmepos-ui-components.js +1 -1
- package/dist/federation/floating-ui.vue.esm-6ee3a4dc.js +1 -0
- package/dist/federation/index-81fbf747.css +1 -0
- package/dist/federation/index-d2981ce7.js +11 -0
- package/dist/feedmepos-ui-library.js +5150 -4876
- package/dist/feedmepos-ui-library.umd.cjs +6 -6
- package/dist/global-components.d.ts +6 -3
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/dist/federation/FmDateRangePicker-2b4b8a36.css +0 -1
- package/dist/federation/FmMenu-008b4edf.css +0 -1
- package/dist/federation/FmSelect-5383ab5c.css +0 -1
- package/dist/federation/FmStepper.vue_vue_type_script_setup_true_lang-620c5c99.js +0 -1
- package/dist/federation/FmTextField.vue_vue_type_style_index_0_lang-31424202.js +0 -1
- package/dist/federation/FmTooltip.vue_vue_type_script_setup_true_lang-ec99af74.js +0 -1
- package/dist/federation/__federation_expose_FmDateRangePicker-6e0116bd.js +0 -1
- package/dist/federation/__federation_expose_FmMenu-c78ae222.js +0 -1
- package/dist/federation/__federation_expose_FmSelect-dd3e5756.js +0 -1
- package/dist/federation/index-039b0ff7.js +0 -11
- package/dist/federation/index-1375029c.css +0 -1
- /package/dist/federation/{FmStepper-f275f227.css → FmProgressIndicator-f275f227.css} +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import{importShared as n,__tla as rn}from"./__federation_fn_import.js";import{c as un,a as sn,_ as dn,__tla as cn}from"./FmBreadcrumb.vue_vue_type_style_index_0_lang-4abc649e.js";import{_ as M,__tla as mn}from"./FmCard.vue_vue_type_style_index_0_lang-3de86b2b.js";import{_ as R,__tla as pn}from"./FmCardSection.vue_vue_type_script_setup_true_lang-b8e33ddd.js";import{_ as vn,__tla as bn}from"./FmCardTitle.vue_vue_type_script_setup_true_lang-4f3b50b7.js";import{_ as fn,__tla as _n}from"./FmLine.vue_vue_type_script_setup_true_lang-290ac533.js";import m,{__tla as gn}from"./__federation_expose_FmButton-a3ca7654.js";import{_ as Dl,__tla as hn}from"./FmCardActions.vue_vue_type_script_setup_true_lang-315cfb3c.js";import Tl,{__tla as yn}from"./__federation_expose_FmDatePicker-c542d446.js";import $e,{__tla as Vn}from"./__federation_expose_FmDateRangePicker-96bfdeee.js";import{_ as Be,__tla as wn}from"./FmCheckbox.vue_vue_type_style_index_0_lang-fcb61ef1.js";import xn,{__tla as kn}from"./__federation_expose_FmField-41eeed18.js";import C,{__tla as Bn}from"./__federation_expose_FmRadio-eb498ffc.js";import{_ as Ie,__tla as Cn}from"./FmRadioGroup.vue_vue_type_script_setup_true_lang-99e6a9c2.js";import Ge,{__tla as Fn}from"./__federation_expose_FmSelect-c850d1a0.js";import qe,{__tla as Nn}from"./__federation_expose_FmStepperField-99c193ef.js";import x,{__tla as Sn}from"./__federation_expose_FmSwitch-f75dd36e.js";import{_ as ne,__tla as En}from"./FmTextField.vue_vue_type_style_index_0_lang-37891b48.js";import{_ as Ce,__tla as Un}from"./FmTextarea.vue_vue_type_style_index_0_lang-7507a1ba.js";import re,{__tla as Dn}from"./__federation_expose_FmIcon-e5ab92a8.js";import Tn,{__tla as Ln}from"./__federation_expose_FmList-6bab2481.js";import He,{__tla as On}from"./__federation_expose_FmListItem-b4a2ef3a.js";import zn,{__tla as An}from"./__federation_expose_FmMenu-da3eca46.js";import Mn,{__tla as Rn}from"./__federation_expose_FmMenuItem-d331a359.js";import{u as Wn,__tla as jn}from"./floating-ui.vue.esm-6ee3a4dc.js";import T,{__tla as Pn}from"./__federation_expose_FmSnackbar-7af29a69.js";import{_ as $n,__tla as In}from"./FmTimePicker.vue_vue_type_style_index_0_lang-adf67efb.js";import{_ as P,__tla as Gn}from"./FmTooltip.vue_vue_type_script_setup_true_lang-4afc1a0b.js";import{_ as qn,__tla as Hn}from"./FmDialog.vue_vue_type_style_index_0_lang-2c81e20e.js";import Jn,{__tla as Kn}from"./__federation_expose_FmSpacer-a0a89a0a.js";import{D as Qn}from"./provider-keys-22cc7f73.js";import{_ as Xn,__tla as Yn}from"./FmForm.vue_vue_type_script_setup_true_lang-67f87de0.js";import{_ as ue,__tla as Zn}from"./FmButtonGroup.vue_vue_type_script_setup_true_lang-658ba5f6.js";import{_ as Je,__tla as er}from"./FmStepper.vue_vue_type_script_setup_true_lang-ebb560f4.js";import A,{__tla as lr}from"./__federation_expose_FmStep-804e2bea.js";import Ll,{__tla as tr}from"./__federation_expose_FmDropField-acc0feb2.js";import{D as ar,__tla as or}from"./dialog-plugin-a69976d4.js";Promise.all([(()=>{try{return rn}catch{}})(),(()=>{try{return cn}catch{}})(),(()=>{try{return mn}catch{}})(),(()=>{try{return pn}catch{}})(),(()=>{try{return bn}catch{}})(),(()=>{try{return _n}catch{}})(),(()=>{try{return gn}catch{}})(),(()=>{try{return hn}catch{}})(),(()=>{try{return yn}catch{}})(),(()=>{try{return Vn}catch{}})(),(()=>{try{return wn}catch{}})(),(()=>{try{return kn}catch{}})(),(()=>{try{return Bn}catch{}})(),(()=>{try{return Cn}catch{}})(),(()=>{try{return Fn}catch{}})(),(()=>{try{return Nn}catch{}})(),(()=>{try{return Sn}catch{}})(),(()=>{try{return En}catch{}})(),(()=>{try{return Un}catch{}})(),(()=>{try{return Dn}catch{}})(),(()=>{try{return Ln}catch{}})(),(()=>{try{return On}catch{}})(),(()=>{try{return An}catch{}})(),(()=>{try{return Rn}catch{}})(),(()=>{try{return jn}catch{}})(),(()=>{try{return Pn}catch{}})(),(()=>{try{return In}catch{}})(),(()=>{try{return Gn}catch{}})(),(()=>{try{return Hn}catch{}})(),(()=>{try{return Kn}catch{}})(),(()=>{try{return Yn}catch{}})(),(()=>{try{return Zn}catch{}})(),(()=>{try{return er}catch{}})(),(()=>{try{return lr}catch{}})(),(()=>{try{return tr}catch{}})(),(()=>{try{return or}catch{}})()]).then(async()=>{(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))a(t);new MutationObserver(t=>{for(const l of t)if(l.type==="childList")for(const i of l.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&a(i)}).observe(document,{childList:!0,subtree:!0});function e(t){const l={};return t.integrity&&(l.integrity=t.integrity),t.referrerPolicy&&(l.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?l.credentials="include":t.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function a(t){if(t.ep)return;t.ep=!0;const l=e(t);fetch(t.href,l)}})();const Ol=un({history:sn(),routes:[]}),Ke={directive:"wave",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.4,dissolveDuration:.15,easing:"ease-out",cancellationPeriod:75,trigger:"auto",tagName:"div"},zl=o=>"config"in o&&"globalProperties"in o.config,Al=o=>{let e;return o==="vue2"?e=!1:o==="vue3"?e=!0:e=zl(o),e?{mounted:"mounted",updated:"updated"}:{mounted:"inserted",updated:"componentUpdated"}},Qe=o=>typeof o=="string"&&o!=="auto",Xe=(o,e)=>{o.dataset.vWaveBoundary=Qe(e)?e:"true"},Ml=({borderTopLeftRadius:o,borderTopRightRadius:e,borderBottomLeftRadius:a,borderBottomRightRadius:t},l)=>{const i=document.createElement(l);return i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%",i.style.display="block",i.style.position="absolute",i.style.borderRadius=`${o} ${e} ${t} ${a}`,i.style.overflow="hidden",i.style.pointerEvents="none",i.style.webkitMaskImage="-webkit-radial-gradient(white, black)",i},Rl=(o,e,a,t)=>{const l=document.createElement("div");return l.style.position="absolute",l.style.width=`${a}px`,l.style.height=`${a}px`,l.style.top=`${e}px`,l.style.left=`${o}px`,l.style.background=t.color,l.style.borderRadius="50%",l.style.opacity=`${t.initialOpacity}`,l.style.transform="translate(-50%,-50%) scale(0)",l.style.transition=`transform ${t.duration}s ${t.easing}, opacity ${t.duration}s ${t.easing}`,l};function se(o,e,a,t){const l=o-a,i=e-t;return Math.sqrt(l*l+i*i)}function Wl(o,e,{width:a,height:t}){const l=se(o,e,0,0),i=se(o,e,a,0),d=se(o,e,0,t),r=se(o,e,a,t);return Math.max(l,i,d,r)}const jl=({x:o,y:e},{top:a,left:t})=>({x:o-t,y:e-a}),Fe="vWaveCountInternal";function Pl(o){const e=Ne(o);Ye(o,e+1)}function $l(o){const e=Ne(o);Ye(o,e-1)}function Ye(o,e){o.dataset[Fe]=e.toString()}function Ne(o){var e;return parseInt((e=o.dataset[Fe])!==null&&e!==void 0?e:"0",10)}function Il(o){delete o.dataset[Fe]}const Se=(o,e,a)=>{const t=e.getBoundingClientRect(),l=window.getComputedStyle(e),{x:i,y:d}=jl(o,t),r=2.05*Wl(i,d,t),s=Ml(l,a.tagName),h=Rl(i,d,r,a);Pl(e);let b="";l.position==="static"&&(e.style.position&&(b=e.style.position),e.style.position="relative"),s.appendChild(h),e.appendChild(s);let p=!1;const w=nn=>{typeof nn<"u"&&(document.removeEventListener("pointerup",w),document.removeEventListener("pointercancel",w)),p?an():p=!0},an=()=>{h.style.transition=`opacity ${a.dissolveDuration}s linear`,h.style.opacity="0",setTimeout(()=>{s.remove(),$l(e),Ne(e)===0&&(Il(e),e.style.position=b)},a.dissolveDuration*1e3)};document.addEventListener("pointerup",w),document.addEventListener("pointercancel",w);const on=setTimeout(()=>{document.removeEventListener("pointercancel",Pe),requestAnimationFrame(()=>{h.style.transform="translate(-50%,-50%) scale(1)",h.style.opacity=`${a.finalOpacity}`,setTimeout(()=>w(),a.duration*1e3)})},a.cancellationPeriod),Pe=()=>{clearTimeout(on),s.remove(),document.removeEventListener("pointerup",w),document.removeEventListener("pointercancel",w),document.removeEventListener("pointercancel",Pe)};document.addEventListener("pointercancel",Pe)},q=new WeakMap,Ze=(o={},e="vue3")=>{const a=Object.assign(Object.assign({},Ke),o),t=Al(e),l=r=>{const s=r.currentTarget.dataset.vWaveTrigger;document.querySelectorAll(`[data-v-wave-boundary="${s}"]`).forEach(h=>Se(r,h,Object.assign(Object.assign({},a),q.get(h))))},i={[t.mounted](r,{value:s={}}){var h;q.set(r,s),Xe(r,(h=s&&s.trigger)!==null&&h!==void 0?h:a.trigger),r.addEventListener("pointerdown",b=>{if(q.get(r)===!1)return;const p=Object.assign(Object.assign({},a),q.get(r));if(p.trigger===!1)return Se(b,r,p);if(Qe(p.trigger))return;const w=r.querySelector('[data-v-wave-trigger="true"]');!w&&p.trigger===!0||w&&!b.composedPath().includes(w)||Se(b,r,p)})},[t.updated](r,{value:s={}}){var h;q.set(r,s),Xe(r,(h=s&&s.trigger)!==null&&h!==void 0?h:a.trigger)}},d={[t.mounted](r,{arg:s="true"}){r.dataset.vWaveTrigger=s,s!=="true"&&r.addEventListener("pointerdown",l)},[t.updated](r,{arg:s="true"}){r.dataset.vWaveTrigger=s,s==="true"?r.removeEventListener("pointerdown",l):r.addEventListener("pointerdown",l)}};return{wave:i,vWave:i,waveTrigger:d,vWaveTrigger:d}},Gl={install(o,e={}){if(this.installed)return;this.installed=!0;const a=Object.assign(Object.assign({},Ke),e),{vWave:t,vWaveTrigger:l}=Ze(a,o);o.directive(a.directive,t),o.directive(`${a.directive}-trigger`,l)},installed:!1,createLocalWaveDirective:Ze},{defineComponent:ql}=await n("vue"),{toDisplayString:el,createElementVNode:Ee,withCtx:H,createVNode:ll,renderSlot:Hl,openBlock:Jl,createBlock:Kl}=await n("vue"),Ql={class:"fm-typo-title-sm-700 mb-4"},Xl={class:""},u=ql({__name:"DemoSection",props:{title:{type:String,required:!0},description:{type:String,default:void 0}},setup(o){return(e,a)=>(Jl(),Kl(M,{variant:"outlined",title:o.title},{header:H(()=>[ll(vn,null,{actions:H(()=>[]),default:H(()=>[Ee("div",null,[Ee("div",Ql,el(o.title),1),Ee("div",Xl,el(o.description??o.title),1)])]),_:1})]),default:H(()=>[ll(R,null,{default:H(()=>[Hl(e.$slots,"default")]),_:3})]),_:3},8,["title"]))}}),{defineComponent:Yl}=await n("vue"),{createVNode:tl,withCtx:Zl,openBlock:et,createElementBlock:lt}=await n("vue"),tt=Yl({__name:"Breadcrumb",setup(o){const e=[{label:"Home",route:"/",disabled:!0},{label:"Marketing",route:"/marketing"},{label:"My campaign",route:"/marketing/campaign"},{label:"Create campaign",route:"/marketing/campaign/create"}];return(a,t)=>(et(),lt("div",null,[tl(u,{title:"Breadcrumb",description:"Basic usage"},{default:Zl(()=>[tl(dn,{items:e})]),_:1})]))}}),{defineComponent:at}=await n("vue"),{createVNode:al,withCtx:ot,openBlock:it,createElementBlock:nt}=await n("vue"),rt=at({__name:"Line",setup(o){const e=[{label:"Dataset 1",data:[65,59,80,81,56,55,40,65,59,80,81,56],fill:!0,color:"fm-color-system-green-300"}];return(a,t)=>(it(),nt("div",null,[al(u,{title:"Line chart",description:"Basic line chart usage"},{default:ot(()=>[al(fn,{name:"Total product sales",paragraph:"Included sales: Jun 2023 - Aug 2023","x-axis":{categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},datasets:e})]),_:1})]))}}),{defineComponent:ut}=await n("vue"),{createVNode:y,createElementVNode:de,withCtx:ce,openBlock:st,createElementBlock:dt}=await n("vue"),ct={class:"flex flex-col gap-24"},mt={class:"gap-24 grid grid-cols-6"},pt={class:"gap-24 grid grid-cols-6"},vt={class:"flex gap-24"},bt={class:"flex gap-24"},ft=ut({__name:"Button",setup(o){return(e,a)=>(st(),dt("div",ct,[y(u,{title:"Basic button",description:"Different button variant"},{default:ce(()=>[de("div",mt,[y(m,{variant:"primary",label:"Primary"}),y(m,{variant:"secondary",label:"Secondary"}),y(m,{variant:"tertiary",label:"Tertiary"}),y(m,{variant:"destructive",label:"Destructive"}),y(m,{variant:"fab",label:"FAB"})])]),_:1}),y(u,{title:"Size",description:"Different button size"},{default:ce(()=>[de("div",pt,[y(m,{variant:"primary",label:"md",size:"md"}),y(m,{variant:"primary",label:"lg"})])]),_:1}),y(u,{title:"With icons",description:""},{default:ce(()=>[de("div",vt,[y(m,{variant:"primary",label:"button",size:"md",icon:"home"}),y(m,{variant:"secondary",label:"button",size:"md",icon:"home"}),y(m,{variant:"tertiary",label:"button",size:"md",icon:"home"}),y(m,{variant:"destructive",label:"button",size:"md",icon:"home"}),y(m,{variant:"fab",label:"button",size:"md",icon:"home"}),y(m,{variant:"fab",size:"md",icon:"home"})])]),_:1}),y(u,{title:"Disabled",description:""},{default:ce(()=>[de("div",bt,[y(m,{variant:"primary",disabled:"",label:"button",size:"md"}),y(m,{variant:"secondary",disabled:"",label:"button",size:"md"}),y(m,{variant:"tertiary",disabled:"",label:"button",size:"md"}),y(m,{variant:"destructive",disabled:"",label:"button",size:"md"}),y(m,{variant:"fab",disabled:"",label:"button",size:"md"}),y(m,{variant:"fab",disabled:"",size:"md",icon:"home"})])]),_:1})]))}}),_t=`
|
|
2
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
3
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
4
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
5
|
+
nisi ut aliquip ex ea commodo consequat.
|
|
6
|
+
`,gt=`
|
|
7
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
8
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
9
|
+
`;function c(o=!1){return o?_t:gt}const{defineComponent:ht}=await n("vue"),{unref:$,toDisplayString:I,createElementVNode:f,withCtx:g,createVNode:v,openBlock:yt,createElementBlock:Vt}=await n("vue"),wt={class:"flex flex-col gap-24"},xt={class:"gap-24 grid grid-cols-3"},kt={class:"gap-24 grid grid-cols-3"},Bt=f("img",{src:"https://cdn.quasar.dev/img/mountains.jpg"},null,-1),Ct=f("div",{class:"mb-8"}," Title ",-1),Ft=f("img",{src:"https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg"},null,-1),Nt=f("div",{class:"flex"},[f("div",{class:"grow"},[f("div",{class:"mb-8"}," Basic Tee "),f("div",{class:"text-fm-color-typo-secondary"}," Aspen white ")]),f("div",{class:"fm-typo-body-lg-700"}," $35 ")],-1),St={class:"gap-24 grid grid-cols-2"},Et=f("div",{class:"grow"},[f("img",{src:"https://cdn.quasar.dev/img/mountains.jpg",class:"h-full w-full",style:{"object-fit":"fill"}})],-1),Ut=f("div",{class:"grow"},[f("img",{src:"https://cdn.quasar.dev/img/mountains.jpg",class:"h-full w-full",style:{"object-fit":"fill"}})],-1),Dt=f("div",{class:"basis-1/3"},[f("img",{src:"https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg",class:"h-full w-full",style:{"object-fit":"fill"}})],-1),Tt=f("div",{class:"fm-typo-title-sm-700 mb-16"}," Basic Tee 6-pack ",-1),Lt={class:"text-fm-color-typo-secondary"},Ot=f("div",null," Color ",-1),zt=f("div",null," Size ",-1),At=ht({__name:"Card",setup(o){return(e,a)=>(yt(),Vt("div",wt,[v(u,{title:"Card",description:"Card basic usage"},{default:g(()=>[f("div",xt,[v(M,{class:"h-fit"},{default:g(()=>[v(R,null,{default:g(()=>[f("div",null,I($(c)()),1)]),_:1})]),_:1}),v(M,{title:"Title"},{default:g(()=>[v(R,null,{default:g(()=>[f("div",null,I($(c)()),1)]),_:1})]),_:1}),v(M,{title:"Title"},{actions:g(()=>[v(Dl,null,{default:g(()=>[v(m,{label:"Cancel",size:"md",variant:"secondary"}),v(m,{label:"Confirm",size:"md"})]),_:1})]),default:g(()=>[v(R,null,{default:g(()=>[f("div",null,I($(c)()),1)]),_:1})]),_:1})])]),_:1}),v(u,{title:"Media card",description:"Cards with media content"},{default:g(()=>[f("div",kt,[v(M,{class:"h-fit"},{default:g(()=>[Bt,v(R,null,{default:g(()=>[Ct,f("div",null,I($(c)()),1)]),_:1})]),_:1}),v(M,{class:"h-fit"},{actions:g(()=>[v(Dl,{alignment:"center"},{default:g(()=>[v(m,{label:"Add to cart",size:"md",class:"w-full"})]),_:1})]),default:g(()=>[Ft,v(R,null,{default:g(()=>[Nt]),_:1})]),_:1})])]),_:1}),v(u,{title:"Horizontal card",description:"Cards with horizontal layout"},{default:g(()=>[f("div",St,[v(M,{class:"h-fit",horizontal:""},{default:g(()=>[Et,v(R,null,{default:g(()=>[f("div",null,I($(c)()),1)]),_:1})]),_:1}),v(M,{class:"h-fit",horizontal:""},{default:g(()=>[Ut,v(R,{class:"flex flex-col gap-16 items-center justify-center",padding:"p-8"},{default:g(()=>[v(m,{icon:"home",variant:"tertiary"}),v(m,{icon:"add",variant:"tertiary"}),v(m,{icon:"warning",variant:"tertiary"})]),_:1})]),_:1})])]),_:1}),v(u,{title:"Advance",description:"Advance usage for card component"},{default:g(()=>[v(M,{horizontal:""},{default:g(()=>[Dt,v(R,{class:"basis-2/3 flex flex-col gap-24"},{default:g(()=>[f("div",null,[Tt,f("div",Lt,I($(c)(!0)),1)]),Ot,zt,v(m,{label:"Add to cart"})]),_:1})]),_:1})]),_:1})]))}}),{defineComponent:Mt}=await n("vue"),{createVNode:Ue,createElementVNode:Rt,withCtx:Wt,openBlock:jt,createElementBlock:Pt}=await n("vue"),$t={class:"flex flex-col gap-24"},It={class:"gap-24 grid grid-cols-3"},{ref:Gt}=await n("vue"),qt=Mt({__name:"DatePicker",setup(o){const e=Gt("2023-10-26");return(a,t)=>(jt(),Pt("div",$t,[Ue(u,{title:"Date picker",description:"Basic usage"},{default:Wt(()=>[Rt("div",It,[Ue(Tl,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),label:"Single date picker",disabled:!1},null,8,["modelValue"]),Ue(Tl,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),label:"Disabled",disabled:!0},null,8,["modelValue"])])]),_:1})]))}}),{defineComponent:Ht}=await n("vue"),{createVNode:De,createElementVNode:Jt,withCtx:Kt,openBlock:Qt,createElementBlock:Xt}=await n("vue"),Yt={class:"flex flex-col gap-24"},Zt={class:"gap-24 grid grid-cols-3"},{ref:ea}=await n("vue"),la=Ht({__name:"DateRangePicker",setup(o){const e=ea({startDate:"2023-10-01",endDate:"2023-10-31"});return(a,t)=>(Qt(),Xt("div",Yt,[De(u,{title:"Date picker",description:"Basic usage"},{default:Kt(()=>[Jt("div",Zt,[De($e,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),label:"Date range picker",disabled:!1},null,8,["modelValue"]),De($e,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),label:"Disabled",disabled:!0},null,8,["modelValue"])])]),_:1})]))}}),{defineComponent:ta}=await n("vue"),{unref:me,createVNode:J,withCtx:aa,openBlock:oa,createElementBlock:ia}=await n("vue"),na={class:"flex flex-col gap-24"},{ref:ra}=await n("vue"),ua=ta({__name:"Checkbox",setup(o){const e=ra(!1);return(a,t)=>(oa(),ia("div",na,[J(u,{title:"Radio",description:"Basic usage"},{default:aa(()=>[J(Be,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),name:"v1",label:"Option 1",value:"1",sublabel:me(c)(),indeterminate:!1},null,8,["modelValue","sublabel"]),J(Be,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),name:"v2",label:"Option 2",value:"2",sublabel:me(c)(),indeterminate:!1},null,8,["modelValue","sublabel"]),J(Be,{modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=l=>e.value=l),disabled:!0,name:"v3",label:"Option 3",value:"3",sublabel:me(c)(),indeterminate:!1},null,8,["modelValue","sublabel"]),J(Be,{modelValue:e.value,"onUpdate:modelValue":t[3]||(t[3]=l=>e.value=l),name:"v4",label:"Option 4",value:"4",sublabel:me(c)(),indeterminate:!0},null,8,["modelValue","sublabel"])]),_:1})]))}}),{defineComponent:sa}=await n("vue"),{createElementVNode:da,withCtx:ol,createVNode:il,openBlock:ca,createElementBlock:ma}=await n("vue"),pa={class:"flex flex-col gap-24"},va=da("div",null," test ",-1),ba=sa({__name:"Field",setup(o){function e(){confirm("form field clicked")}return(a,t)=>(ca(),ma("div",pa,[il(u,{title:"Form field",description:"Wrapper to make your component part of form"},{default:ol(()=>[il(xn,{class:"text-fm-color-typo-warning",onClick:e},{default:ol(()=>[va]),_:1})]),_:1})]))}}),{defineComponent:fa}=await n("vue"),{unref:S,createVNode:B,withCtx:K,createElementVNode:nl,openBlock:_a,createElementBlock:ga}=await n("vue"),ha={class:"flex flex-col gap-24"},{ref:ya}=await n("vue"),Va=fa({__name:"Radio",setup(o){const e=ya("");return(a,t)=>(_a(),ga("div",ha,[B(u,{title:"Radio",description:"Radio Group"},{default:K(()=>[nl("div",null,[B(Ie,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l)},{default:K(()=>[B(C,{value:"1",label:"Bluetooth",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"2",label:"WiFi",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"3",label:"NFC",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"4",label:"Hotspot",sublabel:S(c)()},null,8,["sublabel"])]),_:1},8,["modelValue"])])]),_:1}),B(u,{title:"Radio",description:"Radio Group Inline"},{default:K(()=>[nl("div",null,[B(Ie,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),inline:""},{default:K(()=>[B(C,{value:"1",label:"Bluetooth",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"2",label:"WiFi",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"3",label:"NFC",sublabel:S(c)()},null,8,["sublabel"]),B(C,{value:"4",label:"Hotspot",sublabel:S(c)()},null,8,["sublabel"])]),_:1},8,["modelValue"])])]),_:1}),B(u,{title:"Radio",description:"Radio"},{default:K(()=>[B(C,{modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=l=>e.value=l),value:"1",label:"Bluetooth",sublabel:S(c)()},null,8,["modelValue","sublabel"]),B(C,{modelValue:e.value,"onUpdate:modelValue":t[3]||(t[3]=l=>e.value=l),value:"2",label:"WiFi",sublabel:S(c)()},null,8,["modelValue","sublabel"]),B(C,{modelValue:e.value,"onUpdate:modelValue":t[4]||(t[4]=l=>e.value=l),value:"3",label:"NFC",sublabel:S(c)()},null,8,["modelValue","sublabel"]),B(C,{modelValue:e.value,"onUpdate:modelValue":t[5]||(t[5]=l=>e.value=l),value:"4",label:"Hotspot",sublabel:S(c)()},null,8,["modelValue","sublabel"])]),_:1})]))}}),{defineComponent:wa}=await n("vue"),{createVNode:pe,toDisplayString:rl,createElementVNode:ul,withCtx:sl,openBlock:xa,createElementBlock:ka}=await n("vue"),Ba={class:"flex flex-col gap-24"},{ref:dl}=await n("vue"),Ca=wa({__name:"Select",setup(o){const e=dl(3),a=dl([3,"4"]);return(t,l)=>(xa(),ka("div",Ba,[pe(u,{title:"Select",description:"Single selection"},{default:sl(()=>[pe(Ge,{modelValue:e.value,"onUpdate:modelValue":l[0]||(l[0]=i=>e.value=i),label:"Select",items:[{label:"Object",value:{first:"something"}},{label:"Array",value:["array","1"]},{label:"Number",value:3},{label:"String",value:"4"},{label:"1",value:"5"},{label:"2",value:"6"}]},null,8,["modelValue"]),ul("div",null,rl(e.value),1)]),_:1}),pe(u,{title:"Select",description:"Multiple selection"},{default:sl(()=>[pe(Ge,{modelValue:a.value,"onUpdate:modelValue":l[1]||(l[1]=i=>a.value=i),label:"Select",items:[{label:"Object",value:{first:"something"}},{label:"Array",value:["array","1"]},{label:"Number",value:3},{label:"String",value:"4"},{label:"1",value:"5"},{label:"2",value:"6"}],multiselect:""},null,8,["modelValue"]),ul("div",null,rl(a.value),1)]),_:1})]))}}),{defineComponent:Fa}=await n("vue"),{createVNode:Te,createElementVNode:Le,toDisplayString:Na,createTextVNode:Sa,withCtx:Ea,openBlock:Ua,createElementBlock:Da}=await n("vue"),Ta=Le("h1",{class:"mt-8"}," Without steppers ",-1),{ref:La}=await n("vue"),Oa=Fa({__name:"Stepper",setup(o){const e=La(null);return(a,t)=>(Ua(),Da("div",null,[Te(u,{title:"Text field",description:""},{default:Ea(()=>[Le("div",null,[Te(qe,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),label:"Number",placeholder:"Placeholder",step:30,min:0,max:999,"helper-text":"Helper",rules:[l=>l<=100||"More than 100",l=>l<=50||"More than 50"],"prepend-text":"RM","append-text":"%"},null,8,["modelValue","rules"])]),Ta,Le("div",null,[Te(qe,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),label:"Number",placeholder:"Placeholder",step:30,min:0,max:999,"helper-text":"Helper",rules:[l=>l<=100||"More than 100",l=>l<=50||"More than 50"],"show-steppers":!1},null,8,["modelValue","rules"])]),Sa(" "+Na(e.value),1)]),_:1})]))}}),{defineComponent:za}=await n("vue"),{createVNode:_,createElementVNode:ve,withCtx:Q,unref:cl,openBlock:Aa,createElementBlock:Ma}=await n("vue"),Ra={class:"flex flex-col gap-24"},Wa={class:"flex gap-24"},ja={class:"flex flex-col"},Pa={class:"flex gap-24"},$a={class:"flex gap-24"},{ref:Ia}=await n("vue"),Ga=za({__name:"Switch",setup(o){const e=Ia({bluetooth:!1,wifi:!1,nfc:!0,hotspot:!0});return(a,t)=>(Aa(),Ma("div",Ra,[_(u,{title:"Switch",description:"Basic usage"},{default:Q(()=>[ve("div",Wa,[_(x,{modelValue:e.value.bluetooth,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value.bluetooth=l),value:"bluetooth",label:"Bluetooth",disabled:"","show-icon":""},null,8,["modelValue"]),_(x,{modelValue:e.value.wifi,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value.wifi=l),value:"wifi",label:"WiFi"},null,8,["modelValue"]),_(x,{modelValue:e.value.nfc,"onUpdate:modelValue":t[2]||(t[2]=l=>e.value.nfc=l),value:"nfc",label:"NFC"},null,8,["modelValue"]),_(x,{modelValue:e.value.hotspot,"onUpdate:modelValue":t[3]||(t[3]=l=>e.value.hotspot=l),value:"hotspot",label:"Hotspot"},null,8,["modelValue"])])]),_:1}),_(u,{title:"Switch",description:"Vertical"},{default:Q(()=>[ve("div",ja,[_(x,{modelValue:e.value.bluetooth,"onUpdate:modelValue":t[4]||(t[4]=l=>e.value.bluetooth=l),value:"bluetooth",label:"Bluetooth"},null,8,["modelValue"]),_(x,{modelValue:e.value.wifi,"onUpdate:modelValue":t[5]||(t[5]=l=>e.value.wifi=l),value:"wifi",label:"WiFi"},null,8,["modelValue"]),_(x,{modelValue:e.value.nfc,"onUpdate:modelValue":t[6]||(t[6]=l=>e.value.nfc=l),value:"nfc",label:"NFC"},null,8,["modelValue"]),_(x,{modelValue:e.value.hotspot,"onUpdate:modelValue":t[7]||(t[7]=l=>e.value.hotspot=l),value:"hotspot",label:"Hotspot"},null,8,["modelValue"])])]),_:1}),_(u,{title:"Label position",description:"Change label position"},{default:Q(()=>[_(x,{modelValue:e.value.bluetooth,"onUpdate:modelValue":t[8]||(t[8]=l=>e.value.bluetooth=l),value:"bluetooth",label:"Bluetooth","label-placement":"right"},null,8,["modelValue"]),_(x,{modelValue:e.value.wifi,"onUpdate:modelValue":t[9]||(t[9]=l=>e.value.wifi=l),value:"wifi",label:"WiFi","label-placement":"right",sublabel:cl(c)(!0)},null,8,["modelValue","sublabel"]),_(x,{modelValue:e.value.nfc,"onUpdate:modelValue":t[10]||(t[10]=l=>e.value.nfc=l),value:"nfc",label:"NFC","label-placement":"right"},null,8,["modelValue"]),_(x,{modelValue:e.value.hotspot,"onUpdate:modelValue":t[11]||(t[11]=l=>e.value.hotspot=l),value:"hotspot",label:"Hotspot","label-placement":"right",sublabel:cl(c)(!0)},null,8,["modelValue","sublabel"])]),_:1}),_(u,{title:"Disabled switch"},{default:Q(()=>[ve("div",Pa,[_(x,{modelValue:e.value.bluetooth,"onUpdate:modelValue":t[12]||(t[12]=l=>e.value.bluetooth=l),value:"bluetooth",label:"Bluetooth",disabled:""},null,8,["modelValue"]),_(x,{modelValue:e.value.wifi,"onUpdate:modelValue":t[13]||(t[13]=l=>e.value.wifi=l),value:"wifi",label:"WiFi",disabled:""},null,8,["modelValue"]),_(x,{modelValue:e.value.nfc,"onUpdate:modelValue":t[14]||(t[14]=l=>e.value.nfc=l),value:"nfc",label:"NFC",disabled:""},null,8,["modelValue"]),_(x,{modelValue:e.value.hotspot,"onUpdate:modelValue":t[15]||(t[15]=l=>e.value.hotspot=l),value:"hotspot",label:"Hotspot",disabled:""},null,8,["modelValue"])])]),_:1}),_(u,{title:"Icon switch",description:"Switch with icon"},{default:Q(()=>[ve("div",$a,[_(x,{modelValue:e.value.bluetooth,"onUpdate:modelValue":t[16]||(t[16]=l=>e.value.bluetooth=l),value:"bluetooth",label:"Bluetooth",disabled:"","show-icon":""},null,8,["modelValue"]),_(x,{modelValue:e.value.wifi,"onUpdate:modelValue":t[17]||(t[17]=l=>e.value.wifi=l),value:"wifi",label:"WiFi","show-icon":""},null,8,["modelValue"]),_(x,{modelValue:e.value.nfc,"onUpdate:modelValue":t[18]||(t[18]=l=>e.value.nfc=l),value:"nfc",label:"NFC",disabled:"","show-icon":""},null,8,["modelValue"]),_(x,{modelValue:e.value.hotspot,"onUpdate:modelValue":t[19]||(t[19]=l=>e.value.hotspot=l),value:"hotspot",label:"Hotspot","show-icon":""},null,8,["modelValue"])])]),_:1})]))}}),{defineComponent:qa}=await n("vue"),{createVNode:X,createElementVNode:ml,withCtx:pl,openBlock:Ha,createElementBlock:Ja}=await n("vue"),{ref:vl}=await n("vue"),Ka=qa({__name:"TextField",setup(o){const e=vl(""),a=vl("");return(t,l)=>(Ha(),Ja("div",null,[X(u,{title:"Text field",description:""},{default:pl(()=>[ml("div",null,[X(ne,{modelValue:e.value,"onUpdate:modelValue":l[0]||(l[0]=i=>e.value=i),label:"something",disabled:!1,"input-state":"success","helper-text":"something",rules:[i=>!!i.includes("t")||"nothing"]},null,8,["modelValue","rules"]),X(ne,{modelValue:e.value,"onUpdate:modelValue":l[1]||(l[1]=i=>e.value=i),label:"something",disabled:!1,"input-state":"warning"},null,8,["modelValue"])])]),_:1}),X(u,{title:"Text area",description:""},{default:pl(()=>[ml("div",null,[X(Ce,{modelValue:a.value,"onUpdate:modelValue":l[2]||(l[2]=i=>a.value=i),label:"textarea",disabled:!1,"input-state":"error",rules:[i=>!!i.includes("t")||"nothing"]},null,8,["modelValue","rules"])])]),_:1})]))}}),{defineComponent:Qa}=await n("vue"),{createVNode:Y,createElementVNode:Xa,withCtx:Ya,openBlock:Za,createElementBlock:eo}=await n("vue"),lo={class:"flex flex-col gap-24"},to={class:"gap-24 grid grid-cols-12"},ao=Qa({__name:"Icon",setup(o){return(e,a)=>(Za(),eo("div",lo,[Y(u,{title:"Icon",description:"Basic icon styling"},{default:Ya(()=>[Xa("div",to,[Y(re,{name:"visibility",outline:!0,size:"sm",color:"primary"}),Y(re,{name:"visibility",outline:!1,color:"system-success-300"}),Y(re,{name:"visibility",outline:!0,size:"lg",color:"#F12345"}),Y(re,{name:"visibility",outline:!1,color:"#F12345",size:"xl"})])]),_:1})]))}}),{defineComponent:oo}=await n("vue"),{createVNode:G,createElementVNode:k,withCtx:Z,openBlock:io,createElementBlock:no}=await n("vue"),ro={class:"flex flex-col gap-24"},uo={class:"flex gap-24"},so=k("div",{class:"grow"},[k("div",null,"Leslie Alexander"),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," leslie.alexander@example.com ")],-1),co=k("div",{class:"flex flex-col items-end"},[k("div",null," Co-Founder / CEO "),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," Last seen 3h ago ")],-1),mo=k("div",{class:"grow"},[k("div",null,"Michael Foster"),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," michael.foster@example.com ")],-1),po=k("div",{class:"flex flex-col items-end"},[k("div",null," Co-Founder / CEO "),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," Last seen 3h ago ")],-1),vo=k("div",{class:"grow"},[k("div",null,"Dries Vincent"),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," dries.vincent@example.com ")],-1),bo=k("div",{class:"flex flex-col items-end"},[k("div",null," Co-Founder / CEO "),k("div",{class:"fm-typo-body-sm-400 text-fm-color-typo-secondary"}," Last seen 3h ago ")],-1),fo=oo({__name:"List",setup(o){return(e,a)=>(io(),no("div",ro,[G(u,{title:"Switch",description:"Basic usage"},{default:Z(()=>[k("div",uo,[G(Tn,{class:"w-full",disabled:""},{default:Z(()=>[G(He,{tag:"a"},{default:Z(()=>[G(re,{name:"hexagon"}),so,co]),_:1}),G(He,{tag:"label"},{default:Z(()=>[mo,po]),_:1}),G(He,{tag:"label"},{default:Z(()=>[vo,bo]),_:1})]),_:1})])]),_:1})]))}}),{defineComponent:_o}=await n("vue"),{createElementVNode:bl,unref:go,normalizeStyle:ho,Fragment:yo,openBlock:Vo,createElementBlock:wo}=await n("vue"),{ref:fl}=await n("vue"),_l=_o({__name:"FmMenuList",setup(o){const e=fl(null),a=fl(null),{floatingStyles:t}=Wn(e,a),l=()=>{a.value.style.display="block"},i=()=>{a.value.style.display=""};return(d,r)=>(Vo(),wo(yo,null,[bl("button",{ref_key:"anchor",ref:e,onMouseenter:l,onMouseout:i}," Button ",544),bl("div",{ref_key:"menu",ref:a,class:"bg-cyan-50 h-48 hidden w-48",style:ho(go(t))}," Tooltip ",4)],64))}}),{defineComponent:xo}=await n("vue"),{createElementVNode:U,toDisplayString:gl,createVNode:ee,renderList:ko,Fragment:Bo,openBlock:Oe,createElementBlock:hl,createBlock:Co,withCtx:be}=await n("vue"),Fo={class:"flex flex-col gap-24"},No=U("div",{class:"bg-fm-color-system-warning-100 p-16"},[U("h1",null," Notes "),U("ul",null,[U("li",null,"\u2022 The dropdown will close whenever it detects scrolling"),U("li",null,"\u2022 Multi select must use checkbox per design guidelines")])],-1),So={class:"bg-fm-color-neutral-gray-100 mb-16 min-h-[40px] p-8 whitespace-pre"},Eo={class:"w-[280px]"},{ref:fe}=await n("vue"),Uo=xo({__name:"Menu",setup(o){const e=fe([{label:"Grid",icon:"grid_view",selected:!1},{label:"List",icon:"view_list",selected:!1},{label:"Thumbnails",icon:"gallery_thumbnail",selected:!1}]),a=fe(!1),t=fe(!1),l=fe(),i=d=>{l.value=d,e.value.forEach(r=>{r.selected=JSON.stringify(r)===JSON.stringify(d)}),t.value=!1};return(d,r)=>(Oe(),hl("div",Fo,[ee(u,{title:"Menu",description:"Basic usage WIP: Menu item clicking logic needs some work still, sorry for the wait"},{default:be(()=>[No,U("div",So,[U("div",null,[U("code",null,gl(JSON.stringify(e.value,null,4)),1)]),U("div",null,[U("code",null,gl(JSON.stringify(l.value,null,4)),1)])]),ee(zn,{disabled:a.value,"is-open":t.value,onDropdownChanged:r[0]||(r[0]=s=>t.value=s)},{"menu-button":be(()=>[ee(m,{label:"Open Menu"})]),"menu-content":be(()=>[U("div",Eo,[(Oe(!0),hl(Bo,null,ko(e.value,(s,h)=>(Oe(),Co(Mn,{key:h,modelValue:s.selected,"onUpdate:modelValue":b=>s.selected=b,label:s.label,icon:s.icon,onClick:b=>i(s)},null,8,["modelValue","onUpdate:modelValue","label","icon","onClick"]))),128))])]),_:1},8,["disabled","is-open"])]),_:1}),ee(u,{title:"Floating Menu",description:"Floating UI Menu"},{default:be(()=>[ee(_l)]),_:1})]))}}),{defineComponent:Do}=await n("vue"),{unref:D,createVNode:F,createElementVNode:ze,withCtx:Ae,openBlock:To,createElementBlock:Lo}=await n("vue"),Oo={class:"flex flex-col gap-24"},zo={class:"gap-24 grid grid-cols-3"},Ao={class:"gap-24 grid grid-cols-3"},Mo={class:"gap-24 grid grid-cols-3"},yl=Do({__name:"Snackbar",setup(o){function e(t){confirm(`Snackbar action pressed!
|
|
10
|
+
${t}.`)}function a(t){confirm(`Snackbar dismissed!
|
|
11
|
+
${t}.`)}return(t,l)=>(To(),Lo("div",Oo,[F(u,{title:"Snackbar",description:"Basic usage"},{default:Ae(()=>[ze("div",zo,[F(T,{title:"Info",description:D(c)(),variant:"info"},null,8,["description"]),F(T,{title:"success",description:D(c)(),variant:"success"},null,8,["description"]),F(T,{title:"warning",description:D(c)(),variant:"warning"},null,8,["description"]),F(T,{title:"error",description:D(c)(),variant:"error"},null,8,["description"]),F(T,{title:"neutral ",description:D(c)(),variant:"neutral"},null,8,["description"])])]),_:1}),F(u,{title:"Advance snackbar",description:"Snackbar with action"},{default:Ae(()=>[ze("div",Ao,[F(T,{title:"Info",description:D(c)(),dismissable:"",variant:"info",action:"press me",onOnAction:l[0]||(l[0]=()=>e("info")),onOnDismiss:l[1]||(l[1]=()=>a("info"))},null,8,["description"]),F(T,{title:"success",description:D(c)(),dismissable:"",variant:"success",action:"press me",onOnAction:l[2]||(l[2]=()=>e("success")),onOnDismiss:l[3]||(l[3]=()=>a("success"))},null,8,["description"]),F(T,{title:"warning",description:D(c)(),dismissable:"",variant:"warning",action:"press me",onOnAction:l[4]||(l[4]=()=>e("warning")),onOnDismiss:l[5]||(l[5]=()=>a("warning"))},null,8,["description"]),F(T,{title:"error",description:D(c)(),dismissable:"",variant:"error",action:"press me",onOnAction:l[6]||(l[6]=()=>e("error")),onOnDismiss:l[7]||(l[7]=()=>a("error"))},null,8,["description"]),F(T,{title:"neutral",description:D(c)(),dismissable:"",variant:"neutral",action:"press me",onOnAction:l[8]||(l[8]=()=>e("neutral")),onOnDismiss:l[9]||(l[9]=()=>a("neutral"))},null,8,["description"])])]),_:1}),F(u,{title:"Custom snackbar",description:"Snackbar with custom color"},{default:Ae(()=>[ze("div",Mo,[F(T,{title:"Custom snackbar",color:"secondary-blue-pea","bg-color":"secondary-citrus",description:D(c)()},null,8,["description"])])]),_:1})]))}}),{defineComponent:Ro}=await n("vue"),{createVNode:Wo,toDisplayString:jo,createElementVNode:Me,withCtx:Po,openBlock:$o,createBlock:Io}=await n("vue"),Go={style:{width:"fit-content"}},qo={class:"flex flex-col gap-16 items-center justify-center"},Ho={class:"fm-typo-body-xl-700"},{ref:Jo}=await n("vue"),Ko=Ro({__name:"TimePicker",setup(o){const e=Jo(null);return(a,t)=>($o(),Io(u,{title:"Time picker"},{default:Po(()=>[Me("div",Go,[Me("div",qo,[Wo($n,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l)},null,8,["modelValue"]),Me("div",Ho,jo(e.value),1)])])]),_:1}))}}),{defineComponent:Qo}=await n("vue"),{createTextVNode:W,withCtx:L,createVNode:O,createElementVNode:Vl,openBlock:Xo,createElementBlock:Yo}=await n("vue"),Zo={class:"flex flex-col gap-24"},ei={class:"gap-24 grid grid-cols-4"},li={class:"gap-24 grid grid-cols-4"},ti=Qo({__name:"Tooltip",setup(o){return(e,a)=>(Xo(),Yo("div",Zo,[O(u,{title:"Tooltip",description:"Basic usage"},{default:L(()=>[Vl("div",ei,[O(P,{"has-arrow":!0,variant:"plain",beak:"top","content-text":"Top tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Top tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"plain",beak:"right","content-text":"Right tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Right tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"plain",beak:"bottom","content-text":"Bottom tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Bottom tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"plain",beak:"left","content-text":"Left tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Left tooltip ")]),_:1},8,["action-buttons"])])]),_:1}),O(u,{title:"Tooltip",description:"Tooltip with actions"},{default:L(()=>[Vl("div",li,[O(P,{"has-arrow":!0,variant:"rich",beak:"top","content-text":"Top tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Top tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"rich",beak:"right","content-text":"Right tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Right tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"rich",beak:"bottom","content-text":"Bottom tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Bottom tooltip ")]),_:1},8,["action-buttons"]),O(P,{"has-arrow":!0,variant:"rich",beak:"left","content-text":"Left tooltip","action-buttons":[{label:"Action",handler:()=>console.log("Button clicked!")}]},{default:L(()=>[W(" Left tooltip ")]),_:1},8,["action-buttons"])])]),_:1})]))}}),{inject:ai}=await n("vue");function oi(){const o=ai(Qn);if(!o)throw new Error("No provider");return o}const{defineComponent:ii}=await n("vue"),{createVNode:E,createElementVNode:_e,withCtx:le,openBlock:ni,createElementBlock:ri}=await n("vue"),ui={class:"flex flex-col gap-24"},si=_e("div",null,"Header",-1),di={class:"bg-fm-color-opacity-md overflow-auto w-[500px]"},ci=_e("div",{class:"h-[300px] w-min"}," this is spacer ",-1),mi=_e("div",{class:"h-[300px] w-min"}," this is spacer ",-1),{ref:Re}=await n("vue"),pi=ii({__name:"Dialog",setup(o){const e=Re(!1),a=Re(""),t=oi(),l=Re({startDate:"2023-10-01",endDate:"2023-10-31"}),i=()=>{t.open({title:"something",message:"something",primaryActions:{text:"Primary"},secondaryActions:{text:"Secondary"},tertiaryActions:{text:"Tertiary"},contentComponent:yl}).onPrimary(()=>{console.log("primary log")}).onSecondary(()=>{console.log("secondary log")}).onTertiary(()=>{console.log("tertiary log")})};return(d,r)=>(ni(),ri("div",ui,[E(u,{title:"Icon",description:"Basic icon styling"},{default:le(()=>[E(m,{label:"Open",onClick:r[0]||(r[0]=s=>e.value=!0)}),E(qn,{modelValue:e.value,"onUpdate:modelValue":r[4]||(r[4]=s=>e.value=s),overlay:!0},{"dialog-header":le(()=>[si]),"dialog-content":le(()=>[_e("div",di,[ci,E(Ge,{modelValue:a.value,"onUpdate:modelValue":r[1]||(r[1]=s=>a.value=s),label:"Select",items:[{label:"Object",value:{first:"something"}},{label:"Array",value:["array","1"]},{label:"Number",value:3},{label:"String",value:"4"},{label:"1",value:"4"},{label:"2",value:"5"}]},null,8,["modelValue"]),E($e,{modelValue:l.value,"onUpdate:modelValue":r[2]||(r[2]=s=>l.value=s),label:"Date range picker",disabled:!1},null,8,["modelValue"]),E(_l),mi])]),"dialog-footer":le(()=>[E(m,{class:"sm:w-full xs:w-full",variant:"tertiary",label:"Label",size:"md"}),E(Jn,{class:"sm:hidden xs:hidden"}),E(m,{class:"sm:w-full xs:w-full",variant:"secondary",label:"Label",size:"md"}),E(m,{class:"sm:w-full xs:w-full",variant:"primary",label:"Close",size:"md",onClick:r[3]||(r[3]=s=>e.value=!1)})]),_:1},8,["modelValue"])]),_:1}),E(u,{title:"Dialog Plugin"},{default:le(()=>[E(m,{variant:"primary",label:"Open Dialog Plugin",size:"lg",onClick:i})]),_:1})]))}}),{defineComponent:vi}=await n("vue"),{toDisplayString:bi,createElementVNode:ge,createTextVNode:fi,createVNode:N,withCtx:We,openBlock:_i,createElementBlock:gi}=await n("vue"),hi={class:"bg-fm-color-neutral-gray-100 min-h-[40px] p-8 whitespace-pre"},yi={class:"flex gap-8 items-center"},{ref:wl}=await n("vue"),Vi=vi({__name:"Form",setup(o){const e=wl({textField:"",radioGroup:null,stepper:null,textarea:""}),a=wl(),t=()=>{var l;(l=a.value)==null||l.resetInputsValidation()};return(l,i)=>(_i(),gi("div",null,[N(u,{title:"Form",description:"Basic usage"},{default:We(()=>[ge("div",null,[fi(" Value: "),ge("div",hi,[ge("code",null,bi(JSON.stringify(e.value,null,4)),1)])]),N(Xn,{ref_key:"form",ref:a,class:"flex flex-col gap-16"},{default:We(()=>[N(ne,{modelValue:e.value.textField,"onUpdate:modelValue":i[0]||(i[0]=d=>e.value.textField=d),label:"Text Field",rules:[d=>!!d.includes("t")||"Must have a 't'"]},null,8,["modelValue","rules"]),N(Ie,{modelValue:e.value.radioGroup,"onUpdate:modelValue":i[1]||(i[1]=d=>e.value.radioGroup=d),disabled:!1},{default:We(()=>[N(C,{value:"bluetooth",label:"Bluetooth"}),N(C,{value:"wifi",label:"WiFi"}),N(C,{value:"nfc",label:"NFC"}),N(C,{value:"hotspot",label:"Hotspot"})]),_:1},8,["modelValue"]),N(qe,{modelValue:e.value.stepper,"onUpdate:modelValue":i[2]||(i[2]=d=>e.value.stepper=d),label:"Number",placeholder:"Placeholder",step:30,min:0,max:999,"helper-text":"Helper",rules:[d=>d<=100||"More than 100",d=>d<=50||"More than 50",d=>!!d||"This field is required"],"prepend-text":"RM","append-text":"%"},null,8,["modelValue","rules"]),N(Ce,{modelValue:e.value.textarea,"onUpdate:modelValue":i[3]||(i[3]=d=>e.value.textarea=d),label:"Textarea",rules:[d=>!!d.includes("t")||"Must have a 't'"]},null,8,["modelValue","rules"]),ge("div",yi,[N(m,{type:"submit",label:"Submit"}),N(m,{type:"reset",label:"Reset"}),N(m,{label:"Reset Validation",onClick:t})])]),_:1},512)]),_:1})]))}}),{defineComponent:wi}=await n("vue"),{createVNode:z,withCtx:te,openBlock:xi,createElementBlock:ki}=await n("vue"),Bi={class:"flex flex-col gap-24"},{ref:ae}=await n("vue"),Ci=wi({__name:"ButtonGroup",setup(o){const e=[{label:"Grid"},{label:"List"},{label:"Thumbnails"}],a=[{icon:"grid_view"},{icon:"view_list"},{icon:"gallery_thumbnail"}],t=[{label:"Grid",icon:"grid_view"},{label:"List",icon:"view_list"},{label:"Thumbnails",icon:"gallery_thumbnail"}],l=[{label:"Grid",icon:"grid_view"},{label:"List (Disabled)",icon:"view_list",disabled:!0},{label:"Thumbnails",icon:"gallery_thumbnail"}],i=ae(e[0]),d=ae(a[0]),r=ae(t[0]),s=ae(null),h=ae(null);return(b,p)=>(xi(),ki("div",Bi,[z(u,{title:"Button Group (Label)",description:"Label only"},{default:te(()=>[z(ue,{modelValue:i.value,"onUpdate:modelValue":p[0]||(p[0]=w=>i.value=w),items:e},null,8,["modelValue"])]),_:1}),z(u,{title:"Button Group (Icon)",description:"Icon only"},{default:te(()=>[z(ue,{modelValue:d.value,"onUpdate:modelValue":p[1]||(p[1]=w=>d.value=w),items:a},null,8,["modelValue"])]),_:1}),z(u,{title:"Button Group (Both)",description:"Both"},{default:te(()=>[z(ue,{modelValue:r.value,"onUpdate:modelValue":p[2]||(p[2]=w=>r.value=w),items:t},null,8,["modelValue"])]),_:1}),z(u,{title:"Button Group (Disabled)",description:"Disabled state for the whole group"},{default:te(()=>[z(ue,{modelValue:s.value,"onUpdate:modelValue":p[3]||(p[3]=w=>s.value=w),items:t,disabled:""},null,8,["modelValue"])]),_:1}),z(u,{title:"Button Group (Individually Disabled)",description:"Disabled state for the an individual button"},{default:te(()=>[z(ue,{modelValue:h.value,"onUpdate:modelValue":p[4]||(p[4]=w=>h.value=w),items:l},null,8,["modelValue"])]),_:1})]))}}),{createVNode:V,unref:xl,withCtx:j,createElementVNode:je,openBlock:oe,createElementBlock:he,createCommentVNode:kl,withModifiers:Bl,createBlock:Fi}=await n("vue"),Ni={class:"flex flex-col gap-24 w-full"},Si={key:0,class:"flex flex-col w-full"},Ei=je("div",{class:"fm-typo-title-sm-700 mb-8"}," Campaign Detail ",-1),Ui={key:1,class:"flex flex-col w-full"},Di=je("div",{class:"fm-typo-title-sm-700 mb-8"}," Campaign Trigger ",-1),Ti={key:2,class:"flex flex-col w-full"},Li=je("div",{class:"fm-typo-title-sm-700 mb-8"}," Campaign Configuration ",-1),{ref:Cl}=await n("vue"),Oi={__name:"Stepper",setup(o){const e=Cl(""),a=Cl(1),t=()=>a.value>1,l=()=>!0,i=()=>a.value>2,d=()=>a.value>3,r=()=>{a.value<4&&(a.value+=1)},s=()=>{a.value>0&&(a.value-=1)};return(h,b)=>(oe(),he("div",Ni,[V(u,{title:"Horizontal Stepper",description:"With horizontal orientation"},{default:j(()=>[V(Je,{modelValue:a.value,"onUpdate:modelValue":b[0]||(b[0]=p=>a.value=p),orientation:"horizontal"},{default:j(()=>[V(A,{title:"General information",description:"Supporting text",value:1,disabled:()=>a.value>2,complete:()=>!1,onClick:()=>{}},null,8,["disabled"]),V(A,{title:"Event trigger",description:"asd",value:2,complete:()=>a.value>2},null,8,["complete"]),V(A,{title:"Configuration",description:xl(c)(!0),value:3,error:()=>!0,complete:()=>a.value>3},null,8,["description","complete"]),V(A,{title:"Confirmation",value:4,disabled:()=>!0,complete:()=>a.value>4},null,8,["complete"])]),_:1},8,["modelValue"])]),_:1}),V(u,{title:"Vertical Stepper",description:"With vertical orientation"},{default:j(()=>[V(Je,{modelValue:a.value,"onUpdate:modelValue":b[1]||(b[1]=p=>a.value=p),orientation:"vertical"},{default:j(()=>[V(A,{title:"General information",description:"Supporting text",value:1,complete:()=>a.value>1},null,8,["complete"]),V(A,{title:"Event trigger",description:xl(c)(!0),value:2,disabled:()=>!0,complete:()=>a.value>2},null,8,["description","complete"]),V(A,{title:"Configuration",value:3,error:()=>!0,complete:()=>a.value>3},null,8,["complete"])]),_:1},8,["modelValue"])]),_:1}),V(u,{title:"Basic Usage",description:"contains 3 slots (default - FmStep, contents - form, actions - navigation buttons)"},{default:j(()=>[V(Je,{modelValue:a.value,"onUpdate:modelValue":b[6]||(b[6]=p=>a.value=p),"total-steps":3,orientation:"horizontal"},{contents:j(()=>[a.value===1?(oe(),he("div",Si,[Ei,V(ne,{modelValue:e.value,"onUpdate:modelValue":b[2]||(b[2]=p=>e.value=p),required:"",label:"Field 1"},null,8,["modelValue"]),V(Ce,{modelValue:e.value,"onUpdate:modelValue":b[3]||(b[3]=p=>e.value=p),label:"textarea",disabled:!1},null,8,["modelValue"])])):a.value===2?(oe(),he("div",Ui,[Di,V(ne,{modelValue:e.value,"onUpdate:modelValue":b[4]||(b[4]=p=>e.value=p),label:"Field 1"},null,8,["modelValue"])])):a.value===3?(oe(),he("div",Ti,[Li,V(Ce,{modelValue:e.value,"onUpdate:modelValue":b[5]||(b[5]=p=>e.value=p),label:"textarea",disabled:!1},null,8,["modelValue"])])):kl("",!0)]),actions:j(()=>[a.value!=1?(oe(),Fi(m,{key:0,type:"button",label:"Previous",variant:"tertiary",onClick:Bl(s,["prevent"])},null,8,["onClick"])):kl("",!0),V(m,{variant:"primary",label:a.value!=3?"Next":"Submit",type:"button",onClick:Bl(r,["prevent"])},null,8,["label","onClick"])]),default:j(()=>[V(A,{title:"General information",description:"Supporting text",value:1,error:l,complete:t}),V(A,{title:"Event trigger",value:2,complete:i}),V(A,{title:"Configuration",value:3,complete:d})]),_:1},8,["modelValue"])]),_:1})]))}},{defineComponent:zi}=await n("vue"),{createVNode:ye,createElementVNode:Ve,toDisplayString:Ai,withCtx:Fl,Fragment:Mi,openBlock:Ri,createElementBlock:Wi}=await n("vue"),ji=["src"],{ref:Nl}=await n("vue"),Pi=zi({__name:"DropField",setup(o){const e=Nl(),a=Nl(),t=i=>{console.log(i),e.value=URL.createObjectURL(i)},l=i=>{console.log(i),a.value=i};return(i,d)=>(Ri(),Wi(Mi,null,[ye(u,{title:"Drop Field"},{default:Fl(()=>[ye(Ll,{class:"h-[300px] w-[200px]",label:"Document",accept:".pdf, .png",onFileUpload:t,onFileRejected:l}),Ve("div",null,[Ve("img",{src:e.value},null,8,ji)]),Ve("div",null,[Ve("code",null,Ai(JSON.stringify(a.value,function(r,s){return r==="file"?{fileName:s.name,fileType:s.type}:s},4)),1)])]),_:1}),ye(u,{class:"mt-4",title:"Drop Field Disabled"},{default:Fl(()=>[ye(Ll,{class:"h-[300px] w-[200px]",label:"Document",disabled:""})]),_:1})],64))}}),{defineComponent:$i}=await n("vue"),{renderList:Sl,Fragment:El,openBlock:ie,createElementBlock:we,toDisplayString:Ul,createElementVNode:xe,normalizeClass:Ii,resolveDynamicComponent:Gi,createBlock:qi}=await n("vue"),Hi={class:"divide-x flex h-screen",style:{"background-color":"#f7f7f7"}},Ji={class:"h-full overflow-y-auto px-24",style:{"min-width":"200px"}},Ki={class:"fm-typo-body-lg-700 mb-8 text-fm-color-typo-tertiary"},Qi=["onClick"],Xi={class:"grow h-full overflow-y-auto p-16"},{ref:Yi,computed:Zi,onMounted:en}=await n("vue"),ln=$i({__name:"App",setup(o){const e=[{title:"Application",children:{FmButton:{label:"Button",component:ft},FmButtonGroup:{label:"Button Group",component:Ci},FmCard:{label:"Card",component:At},FmIcon:{label:"Icon",component:ao},FmSnackbar:{label:"Snackbar",component:yl},FmList:{label:"List & list item",component:fo},FmStepper:{label:"Stepper",component:Oi},FmBreadcrumb:{label:"Breadcrumb",component:tt},FmDialog:{label:"Dialog",component:pi},FmDropField:{label:"Drop Field",component:Pi}}},{title:"Form",children:{FmForm:{label:"Form",component:Vi},FmFormField:{label:"Form field",component:ba},FmTextField:{label:"Input",component:Ka},FmStepperField:{label:"Stepper Field",component:Oa},FmSwitch:{label:"Switch",component:Ga},FmRadio:{label:"Radio",component:Va},FmCheckbox:{label:"Checkbox",component:ua},FmSelect:{label:"Select",component:Ca},FmDatePicker:{label:"Date picker",component:qt},FmDateRangePicker:{label:"Date range picker",component:la},FmTimePicker:{label:"Time picker",component:Ko}}},{title:"Chart",children:{FmLineChart:{label:"Line chart",component:rt}}},{title:"Utility",children:{FmMenu:{label:"Menu",component:Uo},FmTooltip:{label:"Tooltip",component:ti}}}],a=Yi("FmButton");function t(i){window.location.hash=i,a.value=i}const l=Zi(()=>e.reduce((i,d)=>({...i,...d.children}),{})[a.value].component);return en(()=>{const[,i]=window.location.hash.split("/");i&&t(i)}),(i,d)=>(ie(),we("div",Hi,[xe("div",Ji,[(ie(),we(El,null,Sl(e,(r,s)=>xe("div",{key:s,class:"mt-24"},[xe("div",Ki,Ul(r.title),1),(ie(!0),we(El,null,Sl(r.children,(h,b)=>(ie(),we("div",{key:b,class:Ii([a.value===b?"cursor-not-allowed fm-typo-body-lg-700 text-fm-color-primary":"cursor-pointer","py-4"]),onClick:()=>t(b)},Ul(h.label),11,Qi))),128))])),64))]),xe("div",Xi,[(ie(),qi(Gi(l.value)))])]))}}),{createApp:tn}=await n("vue"),ke=tn(ln);ke.use(Ol),ke.use(Gl,{duration:.3,color:"var(--fm-color-opacity-sm)",initialOpacity:1,finalOpacity:.1,dissolveDuration:.6}),ke.use(ar),ke.mount("#app")});
|