@solar-icons/vue 2.0.0-beta.2 → 2.0.1

package/README.md

@@ -49,9 +49,30 @@ import { HomeIcon } from '@solar-icons/vue/linear'
 </template>
 ```
 
+### Global Configuration (Plugin)
+
+The plugin sets the same defaults app-wide without a provider wrapper. It writes the five CSS variables on `document.body` and makes `useSolar()` available in every component. The variables are applied client-side.
+
+```ts
+import { createApp } from 'vue'
+import { SolarIconsPlugin } from '@solar-icons/vue/lib'
+
+const app = createApp(App)
+app.use(SolarIconsPlugin, {
+    color: '#ef4444',
+    size: 24,
+    strokeWidth: 1.5,
+    secondaryColor: '#f59e0b',
+    secondaryOpacity: 0.5,
+})
+app.mount('#app')
+```
+
+For server-rendered apps, prefer `<SolarProvider>` for an exact first paint.
+
 ## Documentation
 
-For installation guides, API reference, and a searchable icon catalog, visit the [Vue Documentation](https://solar-icons.vercel.app/docs/v2/frameworks/vue).
+For installation guides, API reference, and a searchable icon catalog, visit the [Vue Documentation](https://solar-icons.vercel.app/docs/v2/packages/vue).
 
 ## License
 

package/dist/lib/IconBase.mjs

@@ -1 +1 @@
-import{computed as e,createCommentVNode as t,createElementBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,toDisplayString as s,useAttrs as c}from"vue";const l=[`width`,`height`,`color`,`stroke-width`,`aria-hidden`],u={key:0},d=`solar`,f=r({__name:`IconBase`,props:{alt:{},color:{},size:{},strokeWidth:{},secondaryColor:{},secondaryOpacity:{},iconName:{},isolated:{type:Boolean}},setup(r){let f=r,p=c(),m=e(()=>f.iconName?`${d} solar-${f.iconName}`:d),h=e(()=>!!f.alt||p[`aria-label`]!==void 0||p.title!==void 0),g=e(()=>{let e={};if(f.isolated&&(e[`--solar-secondary-color`]=`initial`,e[`--solar-secondary-opacity`]=`initial`),f.color!==void 0&&(e.color=f.color),f.size!==void 0){let t=typeof f.size==`number`?`${f.size}px`:f.size;e.width=t,e.height=t}return f.strokeWidth!==void 0&&(e[`stroke-width`]=String(f.strokeWidth)),f.secondaryColor&&(e[`--solar-secondary-color`]=f.secondaryColor),f.secondaryOpacity!=null&&(e[`--solar-secondary-opacity`]=String(f.secondaryOpacity)),e}),_=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`var(--solar-size, 24px)`}),v=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`var(--solar-size, 24px)`}),y=e(()=>{if(f.color===void 0)return f.isolated?`currentColor`:`var(--solar-color, currentColor)`}),b=e(()=>{if(f.strokeWidth===void 0)return f.isolated?`1.5`:`var(--solar-stroke-width, 1.5)`});return(e,c)=>(a(),n(`svg`,i({xmlns:`http://www.w3.org/2000/svg`},e.$attrs,{class:m.value,style:Object.keys(g.value).length>0?g.value:void 0,fill:`none`,viewBox:`0 0 24 24`,width:_.value,height:v.value,color:y.value,"stroke-width":b.value,"aria-hidden":h.value?void 0:`true`}),[r.alt?(a(),n(`title`,u,s(r.alt),1)):t(`v-if`,!0),o(e.$slots,`default`)],16,l))}});export{f as default};
+import{computed as e,createCommentVNode as t,createElementBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,toDisplayString as s,useAttrs as c}from"vue";const l=[`width`,`height`,`color`,`stroke-width`,`aria-hidden`],u={key:0},d=`solar`,f=r({__name:`IconBase`,props:{alt:{},color:{},size:{},strokeWidth:{},secondaryColor:{},secondaryOpacity:{},iconName:{},isolated:{type:Boolean}},setup(r){let f=r,p=c(),m=e(()=>f.iconName?`${d} solar-${f.iconName}`:d),h=e(()=>!!f.alt||p[`aria-label`]!==void 0||p.title!==void 0),g=e(()=>{let e={};if(f.isolated&&(e[`--solar-secondary-color`]=`initial`,e[`--solar-secondary-opacity`]=`initial`),f.color!==void 0&&(e.color=f.color),f.size!==void 0){let t=typeof f.size==`number`?`${f.size}px`:f.size;e.width=t,e.height=t}return f.strokeWidth!==void 0&&(e[`stroke-width`]=String(f.strokeWidth)),f.secondaryColor&&(e[`--solar-secondary-color`]=f.secondaryColor),f.secondaryOpacity!=null&&(e[`--solar-secondary-opacity`]=String(f.secondaryOpacity)),f.size===void 0&&!f.isolated&&!e.fontSize&&!e[`font-size`]&&(e.fontSize=`var(--solar-size, 24px)`),e}),_=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`1em`}),v=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`1em`}),y=e(()=>{if(f.color===void 0)return f.isolated?`currentColor`:`var(--solar-color, currentColor)`}),b=e(()=>{if(f.strokeWidth===void 0)return f.isolated?`1.5`:`var(--solar-stroke-width, 1.5)`});return(e,c)=>(a(),n(`svg`,i({xmlns:`http://www.w3.org/2000/svg`},e.$attrs,{class:m.value,style:Object.keys(g.value).length>0?g.value:void 0,fill:`none`,viewBox:`0 0 24 24`,width:_.value,height:v.value,color:y.value,"stroke-width":b.value,"aria-hidden":h.value?void 0:`true`}),[r.alt?(a(),n(`title`,u,s(r.alt),1)):t(`v-if`,!0),o(e.$slots,`default`)],16,l))}});export{f as default};

package/dist/lib/index.d.mts

@@ -1,5 +1,5 @@
 import { IconProps, IconStyle } from "./types.mjs";
 import _default from "./IconBase.vue.mjs";
 import _default$1 from "./SolarProvider.vue.mjs";
-import { SolarIconsConfig, SolarIconsPlugin, SolarState, createSolarIcons, provideSolarIconsContextInApp, useSolar } from "./useSolar.mjs";
-export { _default as IconBase, type IconProps, IconStyle, type SolarIconsConfig, SolarIconsPlugin, type SolarIconsPlugin as SolarIconsPluginType, _default$1 as SolarProvider, type SolarState, createSolarIcons, provideSolarIconsContextInApp, useSolar };
+import { SolarIconsConfig, SolarIconsPlugin, SolarState, applySolarCssVariables, createSolarIcons, provideSolarIconsContextInApp, useSolar } from "./useSolar.mjs";
+export { _default as IconBase, type IconProps, IconStyle, type SolarIconsConfig, SolarIconsPlugin, type SolarIconsPlugin as SolarIconsPluginType, _default$1 as SolarProvider, type SolarState, applySolarCssVariables, createSolarIcons, provideSolarIconsContextInApp, useSolar };

package/dist/lib/index.mjs

@@ -1 +1 @@
-import e from"./IconBase.mjs";import t from"./SolarProvider.mjs";import{IconStyle as n}from"./types.mjs";import{SolarIconsPlugin as r,createSolarIcons as i,provideSolarIconsContextInApp as a,useSolar as o}from"./useSolar.mjs";export{e as IconBase,n as IconStyle,r as SolarIconsPlugin,t as SolarProvider,i as createSolarIcons,a as provideSolarIconsContextInApp,o as useSolar};
+import e from"./IconBase.mjs";import t from"./SolarProvider.mjs";import{IconStyle as n}from"./types.mjs";import{SolarIconsPlugin as r,applySolarCssVariables as i,createSolarIcons as a,provideSolarIconsContextInApp as o,useSolar as s}from"./useSolar.mjs";export{e as IconBase,n as IconStyle,r as SolarIconsPlugin,t as SolarProvider,i as applySolarCssVariables,a as createSolarIcons,o as provideSolarIconsContextInApp,s as useSolar};

package/dist/lib/useSolar.d.mts

@@ -25,6 +25,7 @@ declare function useSolar(): SolarState;
 interface SolarIconsPlugin {
   install(app: App, options?: SolarIconsConfig): void;
 }
+declare function applySolarCssVariables(state: SolarState): void;
 declare const SolarIconsPlugin: SolarIconsPlugin;
 //#endregion
-export { SolarIconsConfig, SolarIconsPlugin, SolarState, createSolarIcons, provideSolarIconsContextInApp, useSolar };
+export { SolarIconsConfig, SolarIconsPlugin, SolarState, applySolarCssVariables, createSolarIcons, provideSolarIconsContextInApp, useSolar };

package/dist/lib/useSolar.mjs

@@ -1 +1 @@
-import{SOLAR_CONTEXT_KEY as e}from"./context-key.mjs";import{inject as t,ref as n}from"vue";function r(e={}){let t=n(e.color),r=n(e.size),i=n(e.strokeWidth),a=n(e.secondaryColor),o=n(e.secondaryOpacity);return{color:t,setColor:e=>{t.value=e},size:r,setSize:e=>{r.value=e},strokeWidth:i,setStrokeWidth:e=>{i.value=e},secondaryColor:a,setSecondaryColor:e=>{a.value=e},secondaryOpacity:o,setSecondaryOpacity:e=>{o.value=e}}}function i(t,n){t.provide(e,n)}function a(){let n=t(e);if(!n)throw Error(`useSolar() must be used inside a <SolarProvider>`);return n}const o={install(e,t={}){i(e,r(t))}};export{o as SolarIconsPlugin,r as createSolarIcons,i as provideSolarIconsContextInApp,a as useSolar};
+import{SOLAR_CONTEXT_KEY as e}from"./context-key.mjs";import{inject as t,ref as n,watch as r}from"vue";function i(e={}){let t=n(e.color),r=n(e.size),i=n(e.strokeWidth),a=n(e.secondaryColor),o=n(e.secondaryOpacity);return{color:t,setColor:e=>{t.value=e},size:r,setSize:e=>{r.value=e},strokeWidth:i,setStrokeWidth:e=>{i.value=e},secondaryColor:a,setSecondaryColor:e=>{a.value=e},secondaryOpacity:o,setSecondaryOpacity:e=>{o.value=e}}}function a(t,n){t.provide(e,n)}function o(){let n=t(e);if(!n)throw Error(`useSolar() must be used inside a <SolarProvider> or after installing SolarIconsPlugin`);return n}const s=[{key:`--solar-color`,get:e=>e.color.value},{key:`--solar-size`,get:e=>e.size.value},{key:`--solar-stroke-width`,get:e=>e.strokeWidth.value},{key:`--solar-secondary-color`,get:e=>e.secondaryColor.value},{key:`--solar-secondary-opacity`,get:e=>e.secondaryOpacity.value}];function c(e){typeof document>`u`||r([e.color,e.size,e.strokeWidth,e.secondaryColor,e.secondaryOpacity],()=>{let t=document.body;for(let{key:n,get:r}of s){let i=r(e);if(n===`--solar-secondary-color`?i:i!=null){let e=n===`--solar-size`&&typeof i==`number`?`${i}px`:String(i);t.style.setProperty(n,e)}else t.style.removeProperty(n)}},{immediate:!0})}const l={install(e,t={}){let n=i(t);a(e,n),c(n)}};export{l as SolarIconsPlugin,c as applySolarCssVariables,i as createSolarIcons,a as provideSolarIconsContextInApp,o as useSolar};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solar-icons/vue",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -77,19 +77,41 @@
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/compiler-sfc": "3.5.39",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/compiler-sfc": "3.5.41",
     "@vue/test-utils": "^2.4.11",
-    "jsdom": "^29.1.1",
+    "jsdom": "^30.0.1",
     "picocolors": "^1.1.1",
     "unplugin-vue": "^7.2.0",
-    "vite": "^8.1.3",
+    "vite": "^8.2.0",
     "vitest": "^4.1.10",
-    "vue": "^3.5.39",
-    "vue-tsc": "3.3.7",
-    "@solar-icons/core": "2.0.0-beta.1"
+    "vue": "^3.5.41",
+    "vue-tsc": "3.3.9",
+    "@solar-icons/core": "2.0.0"
   },
   "license": "MIT",
+  "keywords": [
+    "vue",
+    "icons",
+    "svg",
+    "solar",
+    "design",
+    "interface",
+    "phosphor",
+    "UI",
+    "UX"
+  ],
+  "author": {
+    "name": "Saoudi Hakim",
+    "url": "https://hakimsaoudi.dev",
+    "email": "saoudihakim@gmail.com"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "bugs": {
+    "url": "https://github.com/saoudi-h/solar-icons/issues"
+  },
   "scripts": {
     "copy:licenses": "cp ../../LICENSE ./LICENSE && cp ../../LICENSE-THIRD-PARTY ./LICENSE-THIRD-PARTY",
     "generate:assets": "tsx scripts/generate-assets.ts",