@nmorph/nmorph-ui-kit 1.0.95 → 1.0.97
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/README.md +29 -0
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Neumorphic UI Library for Vue 3
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
This is a UI component library for Vue 3, designed using the neumorphism/skeuomorphism style. It offers a set of simple components for creating unique user interfaces with a modern, 3D-like appearance.
|
|
6
|
+
|
|
7
|
+
### What is Neumorphism/Skeuomorphism?
|
|
8
|
+
|
|
9
|
+
Neumorphism is a design trend that blends elements of flat design and skeuomorphism. It creates an illusion of soft, tactile interfaces with raised or inset effects, subtle gradients, and delicate shadows. This style aims to make UI components feel tangible and visually engaging.
|
|
10
|
+
|
|
11
|
+
## Status: Alpha Testing
|
|
12
|
+
|
|
13
|
+
The library is currently in its **alpha testing phase**. As the sole developer behind this project, I am working on improving its stability, fixing bugs, and ensuring high-quality components.
|
|
14
|
+
|
|
15
|
+
If you encounter any issues, please don't hesitate to report them. Your feedback is highly appreciated and will help enhance the library.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- **Neumorphic Design:** 3D-like components with soft shadows and smooth gradients.
|
|
22
|
+
- **Customizable Themes:** Easily modify the base color, text color, and accent color to match your application's design.
|
|
23
|
+
- **Lightweight and Intuitive:** Simple integration with Vue 3 using modern tools like Vite and Composition API.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
Choose your preferred package manager to install the library. Reliable options include **NPM**, **Yarn**, and **PNPM**.
|
package/dist/index.es.js
CHANGED
|
@@ -217,7 +217,7 @@ const Lt = (t) => {
|
|
|
217
217
|
});
|
|
218
218
|
};
|
|
219
219
|
return { placement: c, placementCoords: d };
|
|
220
|
-
}, $o = "@nmorph/nmorph-ui-kit", Mo = "module", ko = "1.0.
|
|
220
|
+
}, $o = "@nmorph/nmorph-ui-kit", Mo = "module", ko = "1.0.97", zo = "MIT", Ho = {
|
|
221
221
|
node: "18.13.0",
|
|
222
222
|
npm: "8.19.3"
|
|
223
223
|
}, Vo = "./dist/index.d.ts", Bo = "./dist/index.umd.js", Co = "./dist/index.es.js", So = "./dist/style.css", Io = [
|
package/dist/index.umd.js
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
text-overflow: ellipsis;
|
|
64
64
|
`,je=()=>`
|
|
65
65
|
outline: 2px solid var(--nmorph-accent-color);
|
|
66
|
-
`,Or=(n,t=!1)=>{const o=e.reactive({}),r=e.reactive({}),l=e.reactive(dn(n)),c=e.ref(!1),i=e.ref(!1),s=()=>{Object.entries(n).forEach(([h,_])=>{r[h]=ft({inputValue:_.value,rules:_.rules}),r[h].validate()}),c.value=Object.entries(r).every(([h,_])=>_.valid)},d=()=>{Object.entries(n).forEach(([h,_])=>{o[h]=ft({inputValue:_.value,rules:_.rules}),o[h].validate()})},m=(h,_)=>Object.keys(_).filter(p=>{const b=h[p]?JSON.stringify(h[p]):null,B=JSON.stringify(_[p]);return b!==B}),k=h=>{m(l,h).forEach(u=>{const p=h[u];o[u]=ft({inputValue:p.value,rules:p.rules}),o[u].validate()}),Object.assign(l,dn(h)),s(),i.value=!0};return e.watch(n,k,{deep:!0}),t&&d(),{fields:o,isFormValid:e.readonly(c),isAnyTouched:e.readonly(i)}},un=n=>{const{initialPlacement:t,relativeElement:o,contentDOMElement:r,yOffset:l=0,xOffset:c=0}=n,i=e.ref(t),s=e.ref({x:"0px",y:"0px"}),d=e.inject("nmorph"),m=e.ref(null);e.watch(()=>d.browser,()=>{b()},{deep:!0}),e.onMounted(()=>{b(),_(),u(),h.observe(document.body,{childList:!0,subtree:!0}),k()}),e.onUnmounted(()=>{p(),h.disconnect()});const k=()=>{e.nextTick(()=>{r.value&&b()})},h=new MutationObserver(()=>{k()}),_=()=>{let B=r.value;for(;B;){const f=window.getComputedStyle(B);if(f.overflowY==="auto"||f.overflowY==="scroll"){m.value=B;break}B=B.parentElement}},u=()=>{m.value?m.value.addEventListener("scroll",b,{passive:!0}):window.addEventListener("scroll",b,{passive:!0})},p=()=>{m.value?m.value.removeEventListener("scroll",b):window.removeEventListener("scroll",b)},b=()=>{e.nextTick(()=>{if(!r.value||!o){console.warn("There is no relative element or content DOM element");return}const B=r.value.getBoundingClientRect(),f=B.width,w=B.height,g="value"in o?o.value:o;if(!g){console.warn("Relative element is not an HTMLElement");return}const y=g.getBoundingClientRect(),{x,y:$}=y,E=y.width,v=y.height,I=window.innerWidth,V=window.innerHeight;i.value==="top"&&$-w<0&&(i.value="bottom"),i.value==="bottom"&&$+v+w>V&&(i.value="top"),i.value==="left"&&x-f<0&&(i.value="right"),i.value==="right"&&x+E+f>I&&(i.value="left"),i.value==="top"&&(s.value={x:`${x+c}px`,y:`${$-w+l}px`}),i.value==="bottom"&&(s.value={x:`${x+c}px`,y:`${$+v+l}px`}),i.value==="right"&&(s.value={x:`${x+E+c}px`,y:`${$+l}px`}),i.value==="left"&&(s.value={x:`${x-f+c}px`,y:`${$+l}px`})})};return{placement:i,placementCoords:s}},Fr={name:"@nmorph/nmorph-ui-kit",type:"module",private:!1,version:"1.0.
|
|
66
|
+
`,Or=(n,t=!1)=>{const o=e.reactive({}),r=e.reactive({}),l=e.reactive(dn(n)),c=e.ref(!1),i=e.ref(!1),s=()=>{Object.entries(n).forEach(([h,_])=>{r[h]=ft({inputValue:_.value,rules:_.rules}),r[h].validate()}),c.value=Object.entries(r).every(([h,_])=>_.valid)},d=()=>{Object.entries(n).forEach(([h,_])=>{o[h]=ft({inputValue:_.value,rules:_.rules}),o[h].validate()})},m=(h,_)=>Object.keys(_).filter(p=>{const b=h[p]?JSON.stringify(h[p]):null,B=JSON.stringify(_[p]);return b!==B}),k=h=>{m(l,h).forEach(u=>{const p=h[u];o[u]=ft({inputValue:p.value,rules:p.rules}),o[u].validate()}),Object.assign(l,dn(h)),s(),i.value=!0};return e.watch(n,k,{deep:!0}),t&&d(),{fields:o,isFormValid:e.readonly(c),isAnyTouched:e.readonly(i)}},un=n=>{const{initialPlacement:t,relativeElement:o,contentDOMElement:r,yOffset:l=0,xOffset:c=0}=n,i=e.ref(t),s=e.ref({x:"0px",y:"0px"}),d=e.inject("nmorph"),m=e.ref(null);e.watch(()=>d.browser,()=>{b()},{deep:!0}),e.onMounted(()=>{b(),_(),u(),h.observe(document.body,{childList:!0,subtree:!0}),k()}),e.onUnmounted(()=>{p(),h.disconnect()});const k=()=>{e.nextTick(()=>{r.value&&b()})},h=new MutationObserver(()=>{k()}),_=()=>{let B=r.value;for(;B;){const f=window.getComputedStyle(B);if(f.overflowY==="auto"||f.overflowY==="scroll"){m.value=B;break}B=B.parentElement}},u=()=>{m.value?m.value.addEventListener("scroll",b,{passive:!0}):window.addEventListener("scroll",b,{passive:!0})},p=()=>{m.value?m.value.removeEventListener("scroll",b):window.removeEventListener("scroll",b)},b=()=>{e.nextTick(()=>{if(!r.value||!o){console.warn("There is no relative element or content DOM element");return}const B=r.value.getBoundingClientRect(),f=B.width,w=B.height,g="value"in o?o.value:o;if(!g){console.warn("Relative element is not an HTMLElement");return}const y=g.getBoundingClientRect(),{x,y:$}=y,E=y.width,v=y.height,I=window.innerWidth,V=window.innerHeight;i.value==="top"&&$-w<0&&(i.value="bottom"),i.value==="bottom"&&$+v+w>V&&(i.value="top"),i.value==="left"&&x-f<0&&(i.value="right"),i.value==="right"&&x+E+f>I&&(i.value="left"),i.value==="top"&&(s.value={x:`${x+c}px`,y:`${$-w+l}px`}),i.value==="bottom"&&(s.value={x:`${x+c}px`,y:`${$+v+l}px`}),i.value==="right"&&(s.value={x:`${x+E+c}px`,y:`${$+l}px`}),i.value==="left"&&(s.value={x:`${x-f+c}px`,y:`${$+l}px`})})};return{placement:i,placementCoords:s}},Fr={name:"@nmorph/nmorph-ui-kit",type:"module",private:!1,version:"1.0.97",license:"MIT",engines:{node:"18.13.0",npm:"8.19.3"},types:"./dist/index.d.ts",main:"./dist/index.umd.js",module:"./dist/index.es.js",style:"./dist/style.css",sideEffects:["*.css"],files:["dist","tsconfig.base.json",".eslintrc.base.cjs",".stylelintrc.base.cjs",".prettierrc.base.cjs"],exports:{".":{import:{types:"./dist/index.d.ts",default:"./dist/index.es.js"},require:"./dist/index.umd.js"},"./dist/index.d.ts":"./dist/index.d.ts","./dist/style.css":"./dist/style.css","./dist/styles/abstracts/_variables.scss":"./dist/styles/abstracts/_variables.scss","./dist/styles/abstracts/_mixins.scss":"./dist/styles/abstracts/_mixins.scss","./dist/styles/abstracts/_functions.scss":"./dist/styles/abstracts/_functions.scss","./dist/styles/main.scss":"./dist/styles/main.scss"},scripts:{build:"npm run build:types && vite build",watch:"vite build --watch","lint:es:check":"eslint --ext .js,.ts,.vue --ignore-path .gitignore src/","lint:es":"eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src/","lint:style:check":"stylelint ./src/**/*.{scss,vue}","lint:style":"stylelint ./src/**/*.{scss,vue} --fix","lint:check":"npm run lint:es:check && npm run lint:style:check",lint:"npm run lint:es && npm run lint:style","dev:type":"vue-tsc -p ./tsconfig.vue.json",prepare:"cd .. && husky install ./library/.husky","validate-branch-name":"node .husky/validate-branch-name.cjs","validate-commit-msg":"node .husky/validate-commit-msg.cjs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir dist"},dependencies:{"@vue-styled-components/core":"^1.9.0",vue:"^3.5.13","vue-i18n":"^9.9.0"},devDependencies:{"@types/node":"^20.10.8","@types/vue":"^2.0.0","@types/vue-router":"^2.0.0","@typescript-eslint/eslint-plugin":"^6.18.1","@typescript-eslint/parser":"^6.18.1","@vitejs/plugin-vue":"^4.4.0",eslint:"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","eslint-plugin-storybook":"^0.6.15","eslint-plugin-vue":"^9.19.2","happy-dom":"^15.11.7",husky:"^8.0.3",prettier:"^3.1.1","rollup-plugin-ignore":"^1.0.10",sass:"^1.69.7",stylelint:"^16.1.0","stylelint-config-idiomatic-order":"^10.0.0","stylelint-config-rational-order":"^0.0.4","stylelint-config-recommended-scss":"^14.0.0","stylelint-config-recommended-vue":"^1.5.0","stylelint-config-standard":"^36.0.0","stylelint-config-standard-scss":"^13.0.0","stylelint-order":"^6.0.4","stylelint-prettier":"^5.0.0","stylelint-scss":"^6.0.0",typescript:"~5.1.6",vite:"^4.5.0","vite-plugin-dts":"^4.3.0","vite-plugin-static-copy":"^0.17.1","vite-svg-loader":"^5.1.0","vue-eslint-parser":"^9.4.0","vue-tsc":"^1.6.5"}},gn={error:{bg:"#000000",text:"red"},success:{bg:"#000000",text:"green"},warn:{bg:"#000000",text:"orange"},info:{bg:"#000000",text:"blue"}},wn=(n,t)=>{console.log(`%c ${t} `,`background: ${gn[n].bg}; color: ${gn[n].text}`)},_n={info:"#d4e5edbb",infoText:"#506c80",success:"#67C23A",successText:"#0b5b1d",error:"#F56C6C",errorText:"#8d3333",warn:"#E6A21C",warnText:"#7a6712",gray:"#c9d2dee6",white:"#ffffff",black:"#000000",overlay:"#00000095"},Pr={darkShade:"#c8c9ca",main:"#e9ecec",lightShade:"#fdfdfd",text:"#687b9e",accent:"#4a90e2",focusText:"#ffffff",placeholderText:"#c1c9cf"},Rr={darkShade:"#0f1112",main:"#1c1f21",lightShade:"#292d30",text:"#778288",accent:"#006cb6",focusText:"#ffffff",placeholderText:"#575757"},we="nmorph-data-theme",qr={themes:{common:_n,light:Pr,dark:Rr},defaultTheme:"dark",saveCurrentThemeToLS:!0,darkShadeGeneratorCoefficient:-45,lightShadeGeneratorCoefficient:45,other:{baseShadowWidth:"3.5px",baseShadowBlurCoefficient:"2"}},Wr=n=>/^#[0-9A-Fa-f]{6}$/.test(n),Ur=n=>{if(!Wr(n))throw new Error(`Invalid hex color: ${n}`);return n},Yr=(n,t)=>{const o={};return n.forEach(({name:r,color:l})=>{o[r]=l}),t.forEach(({name:r,color:l})=>{o[r]=l}),Object.entries(o).map(([r,l])=>({name:r,color:l}))},kn=(n,t)=>{let o=parseInt(n.substring(1,3),16),r=parseInt(n.substring(3,5),16),l=parseInt(n.substring(5,7),16);o=Math.round(o*(1+t/100)),r=Math.round(r*(1+t/100)),l=Math.round(l*(1+t/100)),o=Math.min(255,Math.max(0,o)),r=Math.min(255,Math.max(0,r)),l=Math.min(255,Math.max(0,l));const c=o.toString(16).padStart(2,"0"),i=r.toString(16).padStart(2,"0"),s=l.toString(16).padStart(2,"0");return`#${c}${i}${s}`},bn=n=>{wn("warn",`NMORPH(v${Fr.version})`);const t={...qr,...n},o=u=>{try{const p=Ur(u),b=kn(p,t.darkShadeGeneratorCoefficient),B=kn(p,t.lightShadeGeneratorCoefficient);return[{name:"--nmorph-dark-shade-color",color:b},{name:"--nmorph-light-shade-color",color:B}]}catch(p){console.error(p.message)}},r=u=>Object.entries(u).map(([p,b])=>({name:`--nmorph-${sn(p)}-color`,color:b})),l=(u,p)=>{const b=w=>w.map(g=>`${g.name}: ${g.color};`).join(" "),B=Object.entries(p).map(([w,g])=>`--${sn(w)}: ${g};`).join(" "),f=[];return Object.entries(u).forEach(([w,g])=>{const y=r(_n);if(w==="common")f.push(b(Yr(y,g)));else{const x=`
|
|
67
67
|
&[${we}='${w}'] {
|
|
68
68
|
${b(g)}
|
|
69
69
|
}
|