|
@@ -1,164 +0,0 @@
|
|
|
-import{_ as h,a as m,b as g}from"./profile-3.c1326cdf.js";import{c as f,_ as l,I as b}from"./icon-code.6d7a3662.js";import{d as k,u as _,c as u,a as e,j as s,f as o,g as i,W as c,w as n,l as p,s as v,o as a}from"./index.c685e846.js";import{_ as y}from"./icon-mail.vue_vue_type_script_setup_true_lang.3ed6607d.js";import{I as w}from"./icon-map-pin.2b0311bd.js";import{I as j}from"./icon-droplet.72c625da.js";const C=e("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"List Group")])],-1),L={class:"pt-5 grid grid-cols-1 lg:grid-cols-2 gap-6"},D={class:"panel"},I={class:"flex items-center justify-between mb-5"},M=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),P={class:"flex items-center"},N=v('<div class="mb-5"><div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]"><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Cras justo odio</div><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Dapibus ac facilisis in</div><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]"> Morbi leo risus </div><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Porta ac consectetur ac</div><div class="px-4 py-2.5">Vestibulum at eros</div></div></div>',1),V=e("pre",null,`<!-- basic -->
|
|
|
-<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
|
|
|
- <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Cras justo odio</div>
|
|
|
- <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Dapibus ac facilisis in</div>
|
|
|
- <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]">Morbi leo risus</div>
|
|
|
- <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">Porta ac consectetur ac</div>
|
|
|
- <div class="px-4 py-2.5">Vestibulum at eros</div>
|
|
|
-</div>
|
|
|
-`,-1),B={class:"panel"},S={class:"flex items-center justify-between mb-5"},$=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Links",-1),F={class:"flex items-center"},T=v('<div class="mb-5"><div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]"><a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Cras justo odio</a><a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Dapibus ac facilisis in</a><a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white">Morbi leo risus</a><a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Porta ac consectetur ac</a><a href="javascript:;" class="px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Vestibulum at eros</a></div></div>',1),W=e("pre",null,`<!-- links -->
|
|
|
-<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
|
|
|
- <a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Cras justo odio</a>
|
|
|
- <a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Dapibus ac facilisis in</a>
|
|
|
- <a
|
|
|
- href="javascript:;"
|
|
|
- class="
|
|
|
- border-b border-[#e0e6ed]
|
|
|
- dark:border-[#1b2e4b]
|
|
|
- px-4
|
|
|
- py-2.5
|
|
|
- bg-primary
|
|
|
- text-white
|
|
|
- shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]
|
|
|
- hover:bg-[#eee]
|
|
|
- dark:hover:bg-[#eee]/10
|
|
|
- hover:text-black
|
|
|
- dark:hover:text-white
|
|
|
- "
|
|
|
- >Morbi leo risus</a
|
|
|
- >
|
|
|
- <a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Porta ac consectetur ac</a>
|
|
|
- <a href="javascript:;" class="px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">Vestibulum at eros</a>
|
|
|
-</div>
|
|
|
-`,-1),z={class:"panel"},G={class:"flex items-center justify-between mb-5"},U=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Icons",-1),A={class:"flex items-center"},E={class:"mb-5"},q={class:"flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]"},H={class:"flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"},J={class:"ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary"},K=e("div",{class:"flex-1 font-semibold"},[e("h6",{class:"mb-1 text-base"},"Messages"),e("p",{class:"text-xs"},"4 New Messages")],-1),O={class:"flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group"},Q={class:"ltr:mr-2 rtl:ml-2.5 mt-0.5 text-white group-hover:text-primary"},R=e("div",{class:"flex-1 font-semibold"},[e("h6",{class:"mb-1 text-base"},"Locations"),e("p",{class:"text-xs"},"25 New Travel Locations")],-1),X={class:"flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"},Y={class:"ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary"},Z=e("div",{class:"flex-1 font-semibold"},[e("h6",{class:"mb-1 text-base"},"Flexible"),e("p",{class:"text-xs"},"Customization Flexibility")],-1),ee=e("pre",null,`<!-- icons -->
|
|
|
-<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
|
|
|
- <div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary">
|
|
|
- <svg> ... </svg>
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Messages</h6>
|
|
|
- <p class="text-xs">4 New Messages</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="
|
|
|
- flex
|
|
|
- border-b border-[#e0e6ed]
|
|
|
- dark:border-[#1b2e4b]
|
|
|
- px-4
|
|
|
- py-2.5
|
|
|
- bg-primary
|
|
|
- text-white
|
|
|
- shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]
|
|
|
- hover:bg-[#eee]
|
|
|
- dark:hover:bg-[#eee]/10
|
|
|
- hover:text-black
|
|
|
- dark:hover:text-white
|
|
|
- group
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-white group-hover:text-primary">
|
|
|
- <svg> ... </svg>
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Locations</h6>
|
|
|
- <p class="text-xs">25 New Travel Locations</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary">
|
|
|
- <svg> ... </svg>
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Flexible</h6>
|
|
|
- <p class="text-xs">Customization Flexibility</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-`,-1),re={class:"panel"},se={class:"flex items-center justify-between mb-5"},oe=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Images",-1),ae={class:"flex items-center"},te=v('<div class="mb-5"><div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]"><div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"><div class="ltr:mr-3 rtl:ml-3"><img src="'+h+'" alt="" class="rounded-full w-12 h-12 object-cover"></div><div class="flex-1 font-semibold"><h6 class="mb-1 text-base">Luke Ivory</h6><p class="text-xs">Project Lead</p></div></div><div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group"><div class="ltr:mr-3 rtl:ml-3"><img src="'+m+'" alt="" class="rounded-full w-12 h-12 object-cover"></div><div class="flex-1 font-semibold"><h6 class="mb-1 text-base">Sonia Shaw</h6><p class="text-xs">Web Designer</p></div></div><div class="flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"><div class="ltr:mr-3 rtl:ml-3"><img src="'+g+'" alt="" class="rounded-full w-12 h-12 object-cover"></div><div class="flex-1 font-semibold"><h6 class="mb-1 text-base">Dale Butler</h6><p class="text-xs">Developer</p></div></div></div></div>',1),de=e("pre",null,`<!-- images -->
|
|
|
-<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
|
|
|
- <div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <div class="ltr:mr-3 rtl:ml-3">
|
|
|
- <img src="/assets/images/profile-1.jpeg" alt="" class="rounded-full w-12 h-12 object-cover" />
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Luke Ivory</h6>
|
|
|
- <p class="text-xs">Project Lead</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="
|
|
|
- flex
|
|
|
- border-b border-[#e0e6ed]
|
|
|
- dark:border-[#1b2e4b]
|
|
|
- px-4
|
|
|
- py-2.5
|
|
|
- bg-primary
|
|
|
- text-white
|
|
|
- shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]
|
|
|
- hover:bg-[#eee]
|
|
|
- dark:hover:bg-[#eee]/10
|
|
|
- hover:text-black
|
|
|
- dark:hover:text-white
|
|
|
- group
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="ltr:mr-3 rtl:ml-3">
|
|
|
- <img src="/assets/images/profile-2.jpeg" alt="" class="rounded-full w-12 h-12 object-cover" />
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Sonia Shaw</h6>
|
|
|
- <p class="text-xs">Web Designer</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <div class="ltr:mr-3 rtl:ml-3">
|
|
|
- <img src="/assets/images/profile-3.jpeg" alt="" class="rounded-full w-12 h-12 object-cover" />
|
|
|
- </div>
|
|
|
- <div class="flex-1 font-semibold">
|
|
|
- <h6 class="mb-1 text-base">Dale Butler</h6>
|
|
|
- <p class="text-xs">Developer</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-`,-1),le={class:"panel"},be={class:"flex items-center justify-between mb-5"},ie=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Task",-1),ce={class:"flex items-center"},ne=v('<div class="mb-5"><div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]"><div class="flex space-x-4 rtl:space-x-reverse border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"><input id="tack_checkbox1" type="checkbox" class="form-checkbox"><label for="tack_checkbox1" class="mb-0 cursor-pointer">List groups are a flexible and powerful component for displaying simple. <span class="badge bg-secondary my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Project</span></label></div><div class="flex space-x-4 rtl:space-x-reverse border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group"><input id="tack_checkbox2" type="checkbox" class="form-checkbox checked:border-white-light dark:checked:border-[#253b5c]"><label for="tack_checkbox2" class="mb-0 cursor-pointer">List groups are a flexible and powerful component for displaying simple. <span class="badge bg-info my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Urgent</span></label></div><div class="flex space-x-4 rtl:space-x-reverse px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10"><input id="tack_checkbox3" type="checkbox" class="form-checkbox"><label for="tack_checkbox3" class="mb-0 cursor-pointer">List groups are a flexible and powerful component for displaying simple. <span class="badge bg-success my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Success</span></label></div></div></div>',1),pe=e("pre",null,`<!-- task -->
|
|
|
-<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
|
|
|
- <div class="flex space-x-4 rtl:space-x-reverse border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <input id="tack_checkbox1" type="checkbox" class="form-checkbox" />
|
|
|
- <label for="tack_checkbox1" class="mb-0 cursor-pointer"
|
|
|
- >List groups are a flexible and powerful component for displaying simple. <span class="badge bg-secondary my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Project</span></label
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="
|
|
|
- flex
|
|
|
- space-x-4
|
|
|
- rtl:space-x-reverse
|
|
|
- border-b border-[#e0e6ed]
|
|
|
- dark:border-[#1b2e4b]
|
|
|
- px-4
|
|
|
- py-2.5
|
|
|
- bg-primary
|
|
|
- text-white
|
|
|
- shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]
|
|
|
- hover:bg-[#eee]
|
|
|
- dark:hover:bg-[#eee]/10
|
|
|
- hover:text-black
|
|
|
- dark:hover:text-white
|
|
|
- group
|
|
|
- "
|
|
|
- >
|
|
|
- <input id="tack_checkbox2" type="checkbox" class="form-checkbox checked:border-white-light dark:checked:border-[#253b5c]" />
|
|
|
- <label for="tack_checkbox2" class="mb-0 cursor-pointer"
|
|
|
- >List groups are a flexible and powerful component for displaying simple. <span class="badge bg-info my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Urgent</span></label
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="flex space-x-4 rtl:space-x-reverse px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
|
|
|
- <input id="tack_checkbox3" type="checkbox" class="form-checkbox" />
|
|
|
- <label for="tack_checkbox3" class="mb-0 cursor-pointer"
|
|
|
- >List groups are a flexible and powerful component for displaying simple. <span class="badge bg-success my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Success</span></label
|
|
|
- >
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-`,-1),ue=k({__name:"list-group",setup(xe){_({title:"List Group"});const{codeArr:t,toggleCode:d}=f();return(ve,r)=>(a(),u("div",null,[C,e("div",L,[e("div",D,[e("div",I,[M,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:r[0]||(r[0]=x=>s(d)("code1"))},[e("span",P,[o(b,{class:"me-2"}),i(" Code ")])])]),N,s(t).includes("code1")?(a(),c(l,{key:0},{default:n(()=>[V]),_:1})):p("",!0)]),e("div",B,[e("div",S,[$,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:r[1]||(r[1]=x=>s(d)("code2"))},[e("span",F,[o(b,{class:"me-2"}),i(" Code ")])])]),T,s(t).includes("code2")?(a(),c(l,{key:0},{default:n(()=>[W]),_:1})):p("",!0)]),e("div",z,[e("div",G,[U,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:r[2]||(r[2]=x=>s(d)("code3"))},[e("span",A,[o(b,{class:"me-2"}),i(" Code ")])])]),e("div",E,[e("div",q,[e("div",H,[e("div",J,[o(y,{class:"w-5 h-5"})]),K]),e("div",O,[e("div",Q,[o(w)]),R]),e("div",X,[e("div",Y,[o(j)]),Z])])]),s(t).includes("code3")?(a(),c(l,{key:0},{default:n(()=>[ee]),_:1})):p("",!0)]),e("div",re,[e("div",se,[oe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:r[3]||(r[3]=x=>s(d)("code4"))},[e("span",ae,[o(b,{class:"me-2"}),i(" Code ")])])]),te,s(t).includes("code4")?(a(),c(l,{key:0},{default:n(()=>[de]),_:1})):p("",!0)]),e("div",le,[e("div",be,[ie,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:r[4]||(r[4]=x=>s(d)("code5"))},[e("span",ce,[o(b,{class:"me-2"}),i(" Code ")])])]),ne,s(t).includes("code5")?(a(),c(l,{key:0},{default:n(()=>[pe]),_:1})):p("",!0)])])]))}});export{ue as default};
|