@gradient-ui/core 0.2.0

package/README.md

@@ -0,0 +1,272 @@
+# Gradient UI
+
+Gradient UI is a Vue 3 component library built around Material You inspired
+tokens, expressive gradients, compact form controls, floating layers,
+directives and service helpers.
+
+It is designed for product interfaces that need a polished default look without
+giving up explicit TypeScript APIs.
+
+The npm package is published as `@gradient-ui/core`.
+
+## Install
+
+```bash
+npm install @gradient-ui/core
+```
+
+Gradient UI expects Vue 3. `vue-router` is optional: navigation components use
+the globally registered `RouterLink` when your app installs a router, and fall
+back to regular anchors for string `to` values when it does not.
+
+## Full Registration
+
+Import the stylesheet once near your app entry and install the plugin.
+
+```ts
+import { createApp } from 'vue';
+import { createGradientUI } from '@gradient-ui/core';
+import '@gradient-ui/core/style.css';
+import App from './App.vue';
+
+const gradientUI = createGradientUI({
+	theme: {
+		seed: '#704aff',
+		mode: 'light'
+	},
+	icons: true,
+	defaults: {
+		global: {
+			color: 'primary'
+		},
+		GButton: {
+			rounded: true,
+			variant: 'filled'
+		},
+		GInput: {
+			variant: 'outlined'
+		}
+	}
+});
+
+createApp(App).use(gradientUI).mount('#app');
+```
+
+The default export is also available for simple installs:
+
+```ts
+import GradientUI from '@gradient-ui/core';
+
+app.use(GradientUI);
+```
+
+## Manual Imports
+
+Components, directives, services, theme helpers and composables are exposed as
+subpath exports.
+
+```ts
+import { GButton, GInput, GModal } from '@gradient-ui/core/components';
+import { vRipple, vMask, vTooltip } from '@gradient-ui/core/directives';
+import { useSnackbar, useLoading } from '@gradient-ui/core/services';
+import { createTheme, useTheme } from '@gradient-ui/core/theme';
+import { useBreakpoints, useMask } from '@gradient-ui/core/use';
+import '@gradient-ui/core/style.css';
+```
+
+You can also import public APIs from the root package:
+
+```ts
+import { GButton, createGradientUI, useSnackbar } from '@gradient-ui/core';
+```
+
+## Optional Router
+
+Navigation components such as `GNavItem` and `GAsideItem` support both `href`
+and `to`.
+
+With Vue Router installed in the host app, `to` renders through `RouterLink`:
+
+```ts
+import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import GradientUI from '@gradient-ui/core';
+import App from './App.vue';
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes: []
+});
+
+createApp(App).use(router).use(GradientUI).mount('#app');
+```
+
+```vue
+<g-nav-item label="Docs" to="/docs" />
+```
+
+Without Vue Router, string `to` values become regular links. Object `to` values
+need Vue Router and otherwise render as non-navigation actions.
+
+## Theme
+
+Gradient UI can generate Material You style CSS tokens from a seed color.
+
+```ts
+app.use(
+	createGradientUI({
+		theme: '#704aff'
+	})
+);
+```
+
+Use object syntax when you need more control:
+
+```ts
+app.use(
+	createGradientUI({
+		theme: {
+			seed: '#704aff',
+			mode: 'dark',
+			autoApply: true
+		}
+	})
+);
+```
+
+Pass `theme: false` when your host application owns the CSS variables.
+
+## Defaults
+
+Component defaults let an application define shared prop values once.
+
+```ts
+app.use(
+	createGradientUI({
+		defaults: {
+			global: {
+				color: 'primary'
+			},
+			GButton: {
+				variant: 'filled',
+				size: 'm'
+			},
+			GInput: {
+				variant: 'outlined'
+			}
+		}
+	})
+);
+```
+
+Local props always win over configured defaults.
+
+## Directives
+
+The full plugin registers all public directives:
+
+- `v-gradient-icon`
+- `v-gradient-text`
+- `v-loading`
+- `v-mask`
+- `v-ripple`
+- `v-tooltip`
+
+Manual registration is available too:
+
+```ts
+import { vRipple } from '@gradient-ui/core/directives';
+
+app.directive('ripple', vRipple);
+```
+
+## Services
+
+Service helpers are regular named exports.
+
+```ts
+import { useLoading, useSnackbar } from '@gradient-ui/core/services';
+
+const snackbar = useSnackbar();
+const loading = useLoading();
+
+snackbar.success('Saved');
+loading.show({ text: 'Syncing' });
+```
+
+## Forms And Validation
+
+Form components accept validation rules compatible with `gib-validate`.
+
+```ts
+import { required, isEmail } from 'gib-validate';
+```
+
+Gradient UI includes the runtime integration used by form components. Install
+`gib-validate` directly when your application wants to author rules or use its
+validation composables.
+
+## Fonts
+
+Gradient UI does not bundle webfont CSS. The default font token uses a system
+font stack.
+
+Import your own font, or opt into Manrope and MDI font glyphs when you need
+them:
+
+```bash
+npm install @fontsource/manrope @mdi/font
+```
+
+```ts
+import '@fontsource/manrope/400.css';
+import '@fontsource/manrope/500.css';
+import '@fontsource/manrope/700.css';
+import '@mdi/font/css/materialdesignicons.css';
+```
+
+```css
+:root {
+	--g-token-font-family-base: manrope, sans-serif;
+}
+```
+
+## Package Exports
+
+```ts
+import '@gradient-ui/core/style.css';
+import { createGradientUI } from '@gradient-ui/core';
+import { GButton } from '@gradient-ui/core/components';
+import { vRipple } from '@gradient-ui/core/directives';
+import { useSnackbar } from '@gradient-ui/core/services';
+import { createTheme } from '@gradient-ui/core/theme';
+import { useBreakpoints } from '@gradient-ui/core/use';
+```
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Useful checks:
+
+```bash
+npm run type-check
+npm run eslint
+npm run lint:css
+npm run build
+```
+
+## Publish Checklist
+
+```bash
+npm run build
+npm pack --dry-run
+npm publish --access public
+```
+
+## License
+
+MIT

package/dist/GLoading.vue_vue_type_style_index_0_lang-CqbeZChH.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue");require("@mdi/js");const z=require("./camelToKebabCase-BAESShJ1.cjs"),M=(t,o)=>{const r=t.__vccOpts||t;for(const[a,s]of o)r[a]=s;return r};function g(t,o){return r=>{const a={};for(const s in t){const i=typeof t[s]=="object"&&t[s]!==null&&!Array.isArray(t[s])?{...t[s]}:{type:t[s]};r&&s in r&&(i.default=r[s]),o&&!i.source&&(i.source=o),a[s]=i}return a}}const O=g({disabled:Boolean});function A(t,o){return e.computed(()=>t.disabled?`${o}_disabled`:"")}const B=g({rounded:Boolean});function R(t,o){return e.computed(()=>t.rounded?`${o}_rounded`:"")}const G=g({size:{type:String,default:"m"}});function ie(t,o){return e.computed(()=>`${o}_${t.size}`)}const y=ce();function F(t){var o;return t?((o=y[t])==null?void 0:o.color)??t:y.primary.color}function le(t){var o;return t?((o=y[t])==null?void 0:o.onColor)??y.primary.onColor:y.primary.onColor}function j(t){var o;return t?((o=y[t])==null?void 0:o.gradient)??`var(--g-gradient-${t})`:y.primary.gradient}function U(t){return e.computed(()=>j(e.toValue(t)))}function ce(){const t={primary:{color:"var(--g-token-color-primary)",onColor:"var(--g-token-color-on-primary)",gradient:"var(--g-gradient-main)"},main:{color:"var(--g-token-color-primary)",onColor:"var(--g-token-color-on-primary)",gradient:"var(--g-gradient-main)"},error:{color:"var(--g-token-color-error)",onColor:"var(--g-token-color-on-error)",gradient:"var(--g-gradient-error)"},warning:{color:"var(--g-token-color-warning)",onColor:"var(--g-token-color-on-warning)",gradient:"var(--g-gradient-warning)"},success:{color:"var(--g-token-color-success)",onColor:"var(--g-token-color-on-success)",gradient:"var(--g-gradient-success)"},surface:{color:"var(--g-token-color-surface)",onColor:"var(--g-token-color-on-surface)",gradient:"var(--g-gradient-source-40)"},"on-surface":{color:"var(--g-token-color-on-surface)",onColor:"var(--g-token-color-surface)",gradient:"var(--g-gradient-source-40)"},source:{color:"rgb(var(--g-color-source-40))",onColor:"rgb(var(--g-color-on-source-40))",gradient:"var(--g-gradient-source-40)"}};return P(t,"source"),Object.keys(z.MaterialSeeds).forEach(o=>{P(t,o)}),t}function P(t,o){const r=z.camelToKebabCase(o);for(let a=10;a<=100;a+=10){const s={color:`rgb(var(--g-color-${r}-${a}))`,onColor:`rgb(var(--g-color-on-${r}-${a}))`,gradient:`var(--g-gradient-${r}-${a})`};t[`${o}${a}`]=s,t[`${r}${a}`]=s,t[`${r}-${a}`]=s}t[o]=t[`${o}40`],t[r]=t[`${r}40`]}const x=g({color:{type:String,default:"primary"}});function ue(t){return{colorStyles:e.computed(()=>{const r=e.toValue(t.color);return{"--g-color":F(r),"--g-on-color":le(r),"--g-surface-color":"var(--g-token-color-surface)","--g-on-surface-color":"var(--g-token-color-on-surface)"}})}}function E(t){const o=e.computed(()=>{const i=e.toValue(t.activeState);return e.toValue(t.active)&&i!==void 0?i:e.toValue(t.state)}),r=e.computed(()=>{const i=o.value;if(i)return i;const l=e.toValue(t.activeColor);return e.toValue(t.active)&&l!==void 0?l:e.toValue(t.color)}),{colorStyles:a}=ue({color:r}),s=U(r),c=e.computed(()=>({...a.value,"--g-gradient-current":s.value}));return{resolvedColor:r,resolvedState:o,resolvedGradient:s,colorStyles:a,surfaceColorStyles:a,gradientStyles:c}}const de={fade:"g-fade-transition",scale:"g-scale-transition","scale-only":"g-scale-only-transition","slide-x":"g-slide-x-transition","slide-x-reverse":"g-slide-x-reverse-transition","slide-y":"g-slide-y-transition","slide-y-reverse":"g-slide-y-reverse-transition",dialog:"g-dialog-transition",overlay:"g-overlay-transition",expand:"g-expand-transition"},L=g({transition:{type:[Boolean,String,Object],default:void 0}},"transition"),H=g({...L(),name:String,appear:Boolean,disabled:Boolean,group:Boolean,tag:String,mode:String,origin:String,duration:[Number,String],enterDuration:[Number,String],leaveDuration:[Number,String],easing:String,enterEasing:String,leaveEasing:String,distance:[Number,String],scale:[Number,String],opacity:{type:Boolean,default:void 0},leaveAbsolute:Boolean,hideOnLeave:Boolean,css:{type:Boolean,default:!0}},"transition");function ge(t){return t?de[t]??t:""}function fe(t){if(!(t===void 0||t===""))return typeof t=="number"?`${t}px`:t}function T(t){if(!(t===void 0||t===""))return typeof t=="number"?`${t}ms`:t}function D(t,o){if(t===void 0||t==="")return o;if(typeof t=="number")return t;const r=t.trim();if(r.endsWith("ms"))return Number.parseFloat(r);if(r.endsWith("s"))return Number.parseFloat(r)*1e3;const a=Number.parseFloat(r);return Number.isNaN(a)?o:a}function I(t,o){return t===!1?{...o,disabled:!0}:t===!0||t===void 0?o:typeof t=="string"?{...o,name:t}:{...o,...t}}function W(){const t=e.ref(!1);let o=null;const r=()=>{t.value=(o==null?void 0:o.matches)??!1};return e.onMounted(()=>{typeof window>"u"||!window.matchMedia||(o=window.matchMedia("(prefers-reduced-motion: reduce)"),r(),o.addEventListener("change",r))}),e.onBeforeUnmount(()=>{o==null||o.removeEventListener("change",r)}),t}const ve=80,K=e.defineComponent({inheritAttrs:!1,__name:"GTransition",props:H({name:"fade",css:!0}),emits:["before-enter","after-enter","before-leave","leave","after-leave","enter-cancelled","leave-cancelled"],setup(t,{emit:o}){const r=t,a=o,s=e.useAttrs(),c=W(),i=e.computed(()=>r.group?e.TransitionGroup:e.Transition),l=e.computed(()=>I(r.transition,$.value)),m=e.computed(()=>p.value?"":ge(l.value.name)),p=e.computed(()=>r.disabled||c.value||l.value.disabled),S=e.computed(()=>r.group||l.value.mode==="default"?void 0:l.value.mode),_=e.computed(()=>!p.value&&l.value.css!==!1),u=e.computed(()=>{if(!b.value||p.value)return;const n=l.value;return{enter:D(n.enterDuration??n.duration,220),leave:D(n.leaveDuration??n.duration,180)+ve}}),b=e.computed(()=>l.value.name==="overlay"||m.value==="g-overlay-transition"),$=e.computed(()=>({name:r.name,appear:r.appear,mode:r.mode,origin:r.origin,duration:r.duration,enterDuration:r.enterDuration,leaveDuration:r.leaveDuration,easing:r.easing,enterEasing:r.enterEasing,leaveEasing:r.leaveEasing,distance:r.distance,scale:r.scale,opacity:r.opacity,leaveAbsolute:r.leaveAbsolute,hideOnLeave:r.hideOnLeave,css:r.css})),V=e.computed(()=>{const n=l.value;return{"--g-transition-enter-duration":T(n.enterDuration??n.duration),"--g-transition-leave-duration":T(n.leaveDuration??n.duration),"--g-transition-enter-easing":n.enterEasing??n.easing,"--g-transition-leave-easing":n.leaveEasing??n.easing,"--g-transition-origin":n.origin,"--g-transition-distance":fe(n.distance),"--g-transition-scale":n.scale===void 0?void 0:String(n.scale),"--g-transition-opacity-from":n.opacity===!1?"1":void 0}});function C(n){if(n instanceof HTMLElement)for(const[d,h]of Object.entries(V.value))h!==void 0&&n.style.setProperty(d,h)}function w(n){const{offsetTop:d,offsetLeft:h,offsetWidth:ae,offsetHeight:se}=n;n._gTransitionInitialStyles={position:n.style.position,top:n.style.top,left:n.style.left,width:n.style.width,height:n.style.height,display:n.style.display},n.style.position="absolute",n.style.top=`${d}px`,n.style.left=`${h}px`,n.style.width=`${ae}px`,n.style.height=`${se}px`}function f(n){const d=n._gTransitionInitialStyles;d&&(n.style.position=d.position,n.style.top=d.top,n.style.left=d.left,n.style.width=d.width,n.style.height=d.height,n.style.display=d.display,delete n._gTransitionInitialStyles)}function v(n){C(n),a("before-enter",n)}function k(n){a("after-enter",n)}function ee(n){C(n),a("before-leave",n)}function te(n){if(!(n instanceof HTMLElement)){a("leave",n);return}l.value.leaveAbsolute&&w(n),l.value.hideOnLeave&&n.style.setProperty("display","none","important"),a("leave",n)}function oe(n){n instanceof HTMLElement&&f(n),a("after-leave",n)}function ne(n){a("enter-cancelled",n)}function re(n){n instanceof HTMLElement&&f(n),a("leave-cancelled",n)}return(n,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value),e.mergeProps(e.unref(s),{name:m.value,css:_.value,appear:l.value.appear,duration:u.value,mode:S.value,tag:r.group?r.tag:void 0,onBeforeEnter:v,onAfterEnter:k,onBeforeLeave:ee,onLeave:te,onAfterLeave:oe,onEnterCancelled:ne,onLeaveCancelled:re}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16,["name","css","appear","duration","mode","tag"]))}}),q=t=>e.computed(()=>{const o=e.toValue(t);return o===""||o===null||o===void 0?"":typeof o=="number"?`${o}px`:/^\d+(\.\d+)?$/.test(o)?`${o}px`:o}),J=g({variant:{type:String,default:"filled"}});function Q(t,o){return e.computed(()=>`${o}_${t.variant}`)}const N=g({state:String});function X(t,o){return e.computed(()=>t.state?`${o}_${t.state}`:"")}const me=g({...J(),...x(),...O(),...B(),...N()});function pe(t,o){const r=Q(t,o),a=A(t,o),s=R(t,o),c=X(t,o),{colorStyles:i}=E(t),l=e.computed(()=>[r.value,a.value,s.value,c.value].filter(Boolean));return{variantClass:r,disabledClass:a,roundedClass:s,stateClass:c,surfaceStyles:i,surfaceClasses:l}}function ye(t){return{surfaceUnderlayClasses:e.computed(()=>[`${t}__surface-underlay`])}}function _e(t){return{surfaceOverlayClasses:e.computed(()=>[`${t}__surface-overlay`])}}function Se(t){return{surfaceContentClasses:e.computed(()=>[`${t}__surface-content`])}}function Y(t){return{...ye(t),..._e(t),...Se(t)}}const be=g({...x(),...B(),...G(),...N(),modelValue:{type:Number,default:0},indeterminate:Boolean,noLabel:Boolean,label:String,labelAlign:{type:String,default:"center"},view:{type:String,default:"default"},segments:{type:Number,default:12}}),Ce={key:0,class:"g-progress__label"},ke=["aria-valuenow","aria-valuetext"],he=e.defineComponent({__name:"GProgress",props:be({color:"primary"}),setup(t){const o=t,{gradientStyles:r}=E(o),a=e.ref(0),s=e.ref(null);let c;const i=e.computed(()=>Math.min(100,Math.max(0,o.modelValue))),l=q(a),m=e.computed(()=>Math.max(2,Math.round(o.segments))),p=e.computed(()=>Array.from({length:m.value-1},(f,v)=>v)),S=e.computed(()=>`${i.value}%`),_=e.computed(()=>o.label??`${Math.round(i.value)}%`),u=f=>({"--g-progress-segment-position":`${(f+1)/m.value*100}%`}),b=e.computed(()=>({...r.value,"--g-progress-value":S.value,"--g-progress-track-width":l.value})),$=()=>{c=new ResizeObserver(f=>{for(const v of f)a.value=v.contentRect.width}),s.value&&c.observe(s.value)};e.onMounted(()=>{$()}),e.onBeforeUnmount(()=>{c==null||c.disconnect()});const{surfaceOverlayClasses:V,surfaceUnderlayClasses:C,surfaceContentClasses:w}=Y("g-progress");return(f,v)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-progress",{"g-progress_rounded":o.rounded,"g-progress_indeterminate":o.indeterminate,"g-progress_no-label":o.noLabel,[`g-progress_${o.size}`]:!0,[`g-progress_label-${o.labelAlign}`]:!0,[`g-progress_view-${o.view}`]:!0}]),style:e.normalizeStyle(b.value)},[o.noLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ce,[e.renderSlot(f.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(_.value),1)],!0)])),e.createElementVNode("div",{ref_key:"parentRef",ref:s,class:"g-progress__track",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":o.indeterminate?void 0:i.value,"aria-valuetext":o.indeterminate?void 0:_.value},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(C))},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(V))},null,2),e.createElementVNode("div",{class:e.normalizeClass(["g-progress__surface-content",e.unref(w)])},[...v[0]||(v[0]=[e.createElementVNode("div",{class:"g-progress__bar"},[e.createElementVNode("div",{class:"g-progress__active"},[e.createElementVNode("div",{class:"g-progress__overlay"})])],-1)])],2),o.view==="segmented"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.value,k=>(e.openBlock(),e.createElementBlock("span",{key:k,class:"g-progress__segment-divider",style:e.normalizeStyle(u(k))},null,4))),128)):e.createCommentVNode("",!0)],8,ke)],6))}}),Z=M(he,[["__scopeId","data-v-0140ebe7"]]),$e=g({...L(),text:String,noText:Boolean,show:Boolean,color:String,dark:Boolean,opacity:[Number,String],blur:[Number,String],progressView:String,onClose:Function}),Ve={class:"g-loading__body"},we={key:0,class:"g-loading__text"},Be={class:"g-loading__progress"},xe=e.defineComponent({__name:"GLoading",props:$e({text:"Loading...",noText:!1,show:!1,color:"primary",dark:!1,opacity:void 0,blur:void 0,progressView:"glow",transition:()=>({name:"fade",duration:220}),onClose:void 0}),emits:["close"],setup(t,{expose:o,emit:r}){const a=t,s=r,c=e.ref(!1),i=e.computed(()=>a.show||c.value),l=e.computed(()=>({"--g-loading-overlay-opacity":a.opacity!==void 0?String(a.opacity):void 0,"--g-loading-overlay-blur":a.blur!==void 0?m(a.blur):void 0}));function m(u){return typeof u=="number"?`${u}px`:u}function p(){c.value=!0}function S(){c.value=!1}function _(){var u;(u=a.onClose)==null||u.call(a),s("close")}return o({hide:S,show:p,isVisible:i}),(u,b)=>(e.openBlock(),e.createBlock(e.unref(K),{transition:a.transition,name:"scale",onAfterLeave:_},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["g-loading",{"g-loading_dark":a.dark}]),style:e.normalizeStyle(l.value),"aria-live":"polite","aria-busy":"true"},[e.createElementVNode("div",Ve,[a.noText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",we,[e.renderSlot(u.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.text),1)])])),e.createElementVNode("div",Be,[e.createVNode(Z,{"no-label":"",indeterminate:"","model-value":100,color:a.color,view:a.progressView,size:"s"},null,8,["color","view"])])])],6)):e.createCommentVNode("",!0)]),_:3},8,["transition"]))}});exports.GProgress=Z;exports._export_sfc=M;exports._sfc_main=xe;exports._sfc_main$1=K;exports.makeColorProps=x;exports.makeDisabledProps=O;exports.makeGTransitionProps=H;exports.makeRoundedProps=B;exports.makeSizeProps=G;exports.makeStateProps=N;exports.makeSurfaceProps=me;exports.makeTransitionProps=L;exports.makeVariantProps=J;exports.propsFactory=g;exports.resolveColorValue=F;exports.resolveGradientValue=j;exports.resolveTransitionOptions=I;exports.useDisabled=A;exports.usePx=q;exports.useReducedMotion=W;exports.useResolveGradientValue=U;exports.useRounded=R;exports.useSize=ie;exports.useState=X;exports.useSurface=pe;exports.useSurfaceColor=E;exports.useSurfaceLayers=Y;exports.useVariant=Q;