samorphic-vue/dist/samorphic-vue.umd.cjs

A Vue 3 component library styled with neumorphism, including buttons, inputs, cards, and more.

(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SamorphicVue={},r.Vue))})(this,function(r,e){"use strict";var _=document.createElement("style");_.textContent=`@import"https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;700&display=swap";:root{--samorphic-font: "Urbanist", sans-serif}html{font-family:var(--samorphic-font)}.s-button[data-v-dcc6fa7a]{padding:.75rem 1.5rem;border-radius:1rem;font-weight:600;background:#e0e0e0;color:#444;border:none;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;transition:all .2s ease}.s-button[data-v-dcc6fa7a]:active{box-shadow:inset 4px 4px 10px #bebebe,inset -4px -4px 10px #fff}.s-button[data-v-dcc6fa7a]:disabled{opacity:.6;box-shadow:none;cursor:not-allowed}.s-switch[data-v-06d59c3f]{width:3.5rem;height:2rem;padding:4px;border-radius:9999px;background:#e0e0e0;border:none;display:flex;align-items:center;justify-content:flex-start;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;transition:all .2s ease;cursor:pointer}.s-thumb[data-v-06d59c3f]{width:1.2rem;height:1.2rem;border-radius:50%;background-color:#c5c5c5;box-shadow:inset 2px 2px 6px #bebebe,inset -2px -2px 6px #fff;transition:transform .25s ease,background-color .25s ease}.s-thumb.active[data-v-06d59c3f]{transform:translate(1.5rem);background-color:#2196f3}.s-input-wrapper[data-v-0e0c92c6]{display:inline-block}.s-input[data-v-0e0c92c6]{width:100%;padding:.75rem 1rem;border-radius:1rem;font-size:1rem;background:#e0e0e0;color:#333;border:none;box-shadow:inset 4px 4px 10px #bebebe,inset -4px -4px 10px #fff;outline:none;transition:.2s ease}.s-input[data-v-0e0c92c6]:focus{box-shadow:inset 2px 2px 5px #bebebe,inset -2px -2px 5px #fff,0 0 0 2px #2196f3}.s-card[data-v-774e84bc]{background:#e0e0e0;border-radius:1rem;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;padding:1.5rem;transition:box-shadow .2s ease}.s-avatar[data-v-f21102d9]{display:flex;flex-direction:column;align-items:center;text-align:center}.s-avatar-img[data-v-f21102d9]{width:72px;height:72px;border-radius:50%;background:#e0e0e0;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:600;font-size:1.2rem;color:#555}.s-avatar-img img[data-v-f21102d9]{width:100%;height:100%;object-fit:cover}.s-avatar-name[data-v-f21102d9]{margin-top:.5rem;font-size:.9rem;color:#444}.s-icon-button[data-v-7e6c0906]{width:48px;height:48px;border-radius:50%;background:#e0e0e0;border:none;box-shadow:6px 6px 12px #bebebe,-6px -6px 12px #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;color:#444;transition:all .2s ease}.s-icon-button[data-v-7e6c0906]:active{box-shadow:inset 4px 4px 8px #bebebe,inset -4px -4px 8px #fff}.s-icon-button[data-v-7e6c0906]:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.s-toast[data-v-bb65467b]{background:#e0e0e0;border-radius:1rem;padding:1rem 1.5rem;margin-bottom:.75rem;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;transition:opacity .3s ease;font-size:.9rem;max-width:320px;word-break:break-word}.s-toast.info[data-v-bb65467b]{border-left:4px solid #2196f3}.s-toast.success[data-v-bb65467b]{border-left:4px solid #4caf50}.s-toast.warn[data-v-bb65467b]{border-left:4px solid #ff9800}.s-toast.alert[data-v-bb65467b]{border-left:4px solid #f44336}strong[data-v-bb65467b]{display:block;font-weight:600;margin-bottom:4px}p[data-v-bb65467b]{margin:0}.s-toast-container[data-v-95a0aa15]{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;z-index:9999}
`,document.head.appendChild(_);const k=Object.freeze(Object.defineProperty({__proto__:null,get SAvatar(){return x},get SButton(){return m},get SCard(){return u},get SIconButton(){return h},get SInput(){return b},get SSwitch(){return f},get SToastContainer(){return g},get SamorphicVue(){return y},get toastState(){return p},get useToast(){return S}},Symbol.toStringTag,{value:"Module"})),K="",w=["disabled"],B=e.defineComponent({__name:"SButton",props:{disabled:{type:Boolean}},setup(s){return(t,o)=>(e.openBlock(),e.createElementBlock("button",{class:"s-button",disabled:t.disabled},[e.renderSlot(t.$slots,"default",{},void 0,!0)],8,w))}}),Q="",i=(s,t)=>{const o=s.__vccOpts||s;for(const[n,a]of t)o[n]=a;return o},m=i(B,[["__scopeId","data-v-dcc6fa7a"]]),v=["aria-pressed"],C=e.defineComponent({__name:"SSwitch",props:{modelValue:{type:Boolean}},emits:["update:modelValue"],setup(s,{emit:t}){const o=s,n=t;function a(){n("update:modelValue",!o.modelValue)}return(c,d)=>(e.openBlock(),e.createElementBlock("button",{class:"s-switch",onClick:a,"aria-pressed":c.modelValue,role:"switch"},[e.createElementVNode("div",{class:e.normalizeClass(["s-thumb",{active:c.modelValue}])},null,2)],8,v))}}),R="",f=i(C,[["__scopeId","data-v-06d59c3f"]]),V={class:"s-input-wrapper"},$=["type","placeholder"],I=e.defineComponent({__name:"SInput",props:{modelValue:{},placeholder:{},type:{}},emits:["update:modelValue"],setup(s,{emit:t}){const o=s,n=t,a=e.ref(o.modelValue);return e.watch(()=>o.modelValue,c=>{c!==a.value&&(a.value=c)}),(c,d)=>(e.openBlock(),e.createElementBlock("div",V,[e.withDirectives(e.createElementVNode("input",{class:"s-input",type:c.type,placeholder:c.placeholder,"onUpdate:modelValue":d[0]||(d[0]=l=>a.value=l),onInput:d[1]||(d[1]=l=>n("update:modelValue",a.value))},null,40,$),[[e.vModelDynamic,a.value]])]))}}),W="",b=i(I,[["__scopeId","data-v-0e0c92c6"]]),E={class:"s-card"},T=e.defineComponent({__name:"SCard",props:{padding:{}},setup(s){return(t,o)=>(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(t.$slots,"default",{},void 0,!0)]))}}),X="",u=i(T,[["__scopeId","data-v-774e84bc"]]),j={class:"s-avatar"},z={class:"s-avatar-img"},D=["src","alt"],N={key:1},A={class:"s-avatar-name"},O=e.defineComponent({__name:"SAvatar",props:{name:{},src:{},alt:{}},setup(s){const o=s.name.split(" ").map(n=>n[0]).join("").slice(0,2).toUpperCase();return(n,a)=>(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",z,[n.src?(e.openBlock(),e.createElementBlock("img",{key:0,src:n.src,alt:n.alt||n.name},null,8,D)):(e.openBlock(),e.createElementBlock("span",N,e.toDisplayString(e.unref(o)),1))]),e.createElementVNode("div",A,e.toDisplayString(n.name),1)]))}}),Y="",x=i(O,[["__scopeId","data-v-f21102d9"]]),U=["disabled"],M=e.defineComponent({__name:"SIconButton",props:{disabled:{type:Boolean}},emits:["click"],setup(s,{emit:t}){const o=t;return(n,a)=>(e.openBlock(),e.createElementBlock("button",{class:"s-icon-button",disabled:n.disabled,onClick:a[0]||(a[0]=c=>o("click"))},[e.renderSlot(n.$slots,"default",{},void 0,!0)],8,U))}}),Z="",h=i(M,[["__scopeId","data-v-7e6c0906"]]),P={key:0},q={key:1},F=e.defineComponent({__name:"SToast",props:{title:{},message:{},type:{}},setup(s){return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["s-toast",t.type])},[t.title?(e.openBlock(),e.createElementBlock("strong",P,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.message?(e.openBlock(),e.createElementBlock("p",q,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0)],2))}}),ee="",L=i(F,[["__scopeId","data-v-bb65467b"]]),G={class:"s-toast-container"},H=e.defineComponent({__name:"SToastContainer",setup(s){const t=e.inject("samorphic-toasts");return(o,n)=>(e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t),a=>(e.openBlock(),e.createBlock(L,e.mergeProps({key:a.id},{ref_for:!0},a),null,16))),128))]))}}),te="",g=i(H,[["__scopeId","data-v-95a0aa15"]]);let J=0;const p=e.reactive([]);function S(){return function({title:t,message:o,type:n="info",timeout:a=4e3}){const c={id:J++,title:t,message:o,type:n};p.push(c),setTimeout(()=>{const d=p.findIndex(l=>l.id===c.id);d!==-1&&p.splice(d,1)},a)}}const y={install(s){for(const[t,o]of Object.entries(k))o&&typeof o=="object"&&s.component(t,o);s.provide("samorphic-toasts",p)}};r.SAvatar=x,r.SButton=m,r.SCard=u,r.SIconButton=h,r.SInput=b,r.SSwitch=f,r.SToastContainer=g,r.SamorphicVue=y,r.toastState=p,r.useToast=S,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});