@axiom-core/vue-adapter 0.1.0
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 +91 -0
- package/dist/AxiomProvider.d.ts +100 -0
- package/dist/AxiomProvider.d.ts.map +1 -0
- package/dist/AxiomProvider.js +129 -0
- package/dist/AxiomProvider.js.map +1 -0
- package/dist/AxiomProviderRuntime.d.ts +141 -0
- package/dist/AxiomProviderRuntime.d.ts.map +1 -0
- package/dist/AxiomProviderRuntime.js +272 -0
- package/dist/AxiomProviderRuntime.js.map +1 -0
- package/dist/composables.d.ts +15 -0
- package/dist/composables.d.ts.map +1 -0
- package/dist/composables.js +22 -0
- package/dist/composables.js.map +1 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +15 -0
- package/dist/index.js.map +1 -0
- package/dist/internal/constants.d.ts +16 -0
- package/dist/internal/constants.d.ts.map +1 -0
- package/dist/internal/constants.js +16 -0
- package/dist/internal/constants.js.map +1 -0
- package/dist/internal/injection.d.ts +41 -0
- package/dist/internal/injection.d.ts.map +1 -0
- package/dist/internal/injection.js +51 -0
- package/dist/internal/injection.js.map +1 -0
- package/dist/internal/types.d.ts +101 -0
- package/dist/internal/types.d.ts.map +1 -0
- package/dist/internal/types.js +7 -0
- package/dist/internal/types.js.map +1 -0
- package/dist/runtime.d.ts +20 -0
- package/dist/runtime.d.ts.map +1 -0
- package/dist/runtime.js +16 -0
- package/dist/runtime.js.map +1 -0
- package/dist/ssr.d.ts +59 -0
- package/dist/ssr.d.ts.map +1 -0
- package/dist/ssr.js +37 -0
- package/dist/ssr.js.map +1 -0
- package/package.json +71 -0
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @axiom-core/vue-adapter
|
|
2
|
+
|
|
3
|
+
Official Axiom Design System adapter for Vue 3.
|
|
4
|
+
|
|
5
|
+
**Specification Conformance:** v1.0
|
|
6
|
+
**Status:** In Development
|
|
7
|
+
**Framework:** Vue 3.x (Composition API)
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# Base entry only (pre-resolved themes)
|
|
13
|
+
npm install @axiom-core/vue-adapter vue
|
|
14
|
+
|
|
15
|
+
# Runtime entry (theme composition)
|
|
16
|
+
npm install @axiom-core/vue-adapter @axiom-core/core-engine @axiom-core/invariant-engine vue
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Base Entry (Pre-Resolved Themes)
|
|
22
|
+
|
|
23
|
+
Minimal bundle overhead for pre-resolved themes:
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<script setup>
|
|
27
|
+
import { AxiomProvider } from "@axiom-core/vue-adapter";
|
|
28
|
+
import resolvedTheme from "./theme.resolved.json";
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<AxiomProvider :resolvedTheme="resolvedTheme">
|
|
33
|
+
<YourApp />
|
|
34
|
+
</AxiomProvider>
|
|
35
|
+
</template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Runtime Entry (Theme Composition)
|
|
39
|
+
|
|
40
|
+
Full composition engine for dynamic themes:
|
|
41
|
+
|
|
42
|
+
```vue
|
|
43
|
+
<script setup>
|
|
44
|
+
import { AxiomProviderRuntime } from "@axiom-core/vue-adapter/runtime";
|
|
45
|
+
import primitives from "./primitives.json";
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<AxiomProviderRuntime :primitives="primitives">
|
|
50
|
+
<YourApp />
|
|
51
|
+
</AxiomProviderRuntime>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Accessing Theme
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<script setup>
|
|
59
|
+
import { useAxiomTheme } from "@axiom-core/vue-adapter";
|
|
60
|
+
|
|
61
|
+
const theme = useAxiomTheme();
|
|
62
|
+
</script>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Server-Side Rendering
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
import { getAxiomStyleTag } from "@axiom-core/vue-adapter";
|
|
69
|
+
|
|
70
|
+
const styleTag = getAxiomStyleTag(resolvedTheme);
|
|
71
|
+
// Inject styleTag into server-rendered HTML
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Architecture
|
|
75
|
+
|
|
76
|
+
This adapter strictly conforms to the Axiom Adapter Interface Specification v1.0.
|
|
77
|
+
|
|
78
|
+
- **Dual Entry Architecture:** Separate base and runtime entries for optimal bundle size
|
|
79
|
+
- **Deterministic CSS:** Byte-identical output across all framework adapters
|
|
80
|
+
- **Shared Infrastructure:** Delegates to @axiom-core/css-bridge, @axiom-core/dom-injector, @axiom-core/ssr-utils
|
|
81
|
+
- **Tree-Shakeable:** `sideEffects: false` with proper DCE support
|
|
82
|
+
- **SSR Safe:** Full server-side rendering and hydration support
|
|
83
|
+
|
|
84
|
+
## Bundle Size
|
|
85
|
+
|
|
86
|
+
- **Base Entry:** Target ≤6 KB (minified + gzipped)
|
|
87
|
+
- **Runtime Entry:** Target ≤18 KB (minified + gzipped)
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
MIT
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AxiomProvider — Base Entry Component
|
|
3
|
+
*
|
|
4
|
+
* REQUIREMENT EA-4: Base entry MUST NOT import runtime engines
|
|
5
|
+
* REQUIREMENT CSS-1: Use @axiom-core/css-bridge for CSS generation
|
|
6
|
+
* REQUIREMENT DOM-1: Use @axiom-core/dom-injector for DOM manipulation
|
|
7
|
+
* REQUIREMENT EA-6: Accepts pre-resolved theme only
|
|
8
|
+
* REQUIREMENT EA-7: Functions without runtime engines installed
|
|
9
|
+
*
|
|
10
|
+
* Provides pre-resolved theme to Vue component tree via provide/inject.
|
|
11
|
+
*/
|
|
12
|
+
import { type PropType } from 'vue';
|
|
13
|
+
import { type ResolvedTheme } from '@axiom-core/css-bridge';
|
|
14
|
+
/**
|
|
15
|
+
* AxiomProvider Component
|
|
16
|
+
*
|
|
17
|
+
* Lightweight provider for pre-resolved themes.
|
|
18
|
+
* No runtime composition, minimal bundle size.
|
|
19
|
+
*
|
|
20
|
+
* Use this when:
|
|
21
|
+
* - You have pre-built themes
|
|
22
|
+
* - Theme switching happens via prop change
|
|
23
|
+
* - You want minimal bundle overhead
|
|
24
|
+
*
|
|
25
|
+
* For runtime composition, use '@axiom-core/vue-adapter/runtime'.
|
|
26
|
+
*
|
|
27
|
+
* Dependencies: css-bridge, dom-injector (NO core-engine)
|
|
28
|
+
* Bundle impact: ~5-6KB (target)
|
|
29
|
+
*/
|
|
30
|
+
export declare const AxiomProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
31
|
+
resolvedTheme: {
|
|
32
|
+
type: PropType<ResolvedTheme>;
|
|
33
|
+
required: true;
|
|
34
|
+
};
|
|
35
|
+
selector: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
default: undefined;
|
|
38
|
+
};
|
|
39
|
+
scope: {
|
|
40
|
+
type: PropType<"global" | "local">;
|
|
41
|
+
default: string;
|
|
42
|
+
};
|
|
43
|
+
scopeId: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: undefined;
|
|
46
|
+
};
|
|
47
|
+
mode: {
|
|
48
|
+
type: PropType<"dev" | "prod">;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
prefix: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
default: string;
|
|
54
|
+
};
|
|
55
|
+
attributes: {
|
|
56
|
+
type: PropType<Record<string, string>>;
|
|
57
|
+
default: undefined;
|
|
58
|
+
};
|
|
59
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
60
|
+
[key: string]: any;
|
|
61
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
62
|
+
[key: string]: any;
|
|
63
|
+
}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
64
|
+
resolvedTheme: {
|
|
65
|
+
type: PropType<ResolvedTheme>;
|
|
66
|
+
required: true;
|
|
67
|
+
};
|
|
68
|
+
selector: {
|
|
69
|
+
type: StringConstructor;
|
|
70
|
+
default: undefined;
|
|
71
|
+
};
|
|
72
|
+
scope: {
|
|
73
|
+
type: PropType<"global" | "local">;
|
|
74
|
+
default: string;
|
|
75
|
+
};
|
|
76
|
+
scopeId: {
|
|
77
|
+
type: StringConstructor;
|
|
78
|
+
default: undefined;
|
|
79
|
+
};
|
|
80
|
+
mode: {
|
|
81
|
+
type: PropType<"dev" | "prod">;
|
|
82
|
+
default: string;
|
|
83
|
+
};
|
|
84
|
+
prefix: {
|
|
85
|
+
type: StringConstructor;
|
|
86
|
+
default: string;
|
|
87
|
+
};
|
|
88
|
+
attributes: {
|
|
89
|
+
type: PropType<Record<string, string>>;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
92
|
+
}>> & Readonly<{}>, {
|
|
93
|
+
mode: "dev" | "prod";
|
|
94
|
+
prefix: string;
|
|
95
|
+
selector: string;
|
|
96
|
+
scopeId: string;
|
|
97
|
+
scope: "global" | "local";
|
|
98
|
+
attributes: Record<string, string>;
|
|
99
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
100
|
+
//# sourceMappingURL=AxiomProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AxiomProvider.d.ts","sourceRoot":"","sources":["../src/AxiomProvider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2D,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC7F,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM/F;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa;;cAIJ,QAAQ,CAAC,aAAa,CAAC;;;;;;;;cAQvB,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC;;;;;;;;cAQ5B,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC;;;;;;;;cAQxB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;cAxBhC,QAAQ,CAAC,aAAa,CAAC;;;;;;;;cAQvB,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC;;;;;;;;cAQ5B,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC;;;;;;;;cAQxB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;4EAkFpD,CAAC"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AxiomProvider — Base Entry Component
|
|
3
|
+
*
|
|
4
|
+
* REQUIREMENT EA-4: Base entry MUST NOT import runtime engines
|
|
5
|
+
* REQUIREMENT CSS-1: Use @axiom-core/css-bridge for CSS generation
|
|
6
|
+
* REQUIREMENT DOM-1: Use @axiom-core/dom-injector for DOM manipulation
|
|
7
|
+
* REQUIREMENT EA-6: Accepts pre-resolved theme only
|
|
8
|
+
* REQUIREMENT EA-7: Functions without runtime engines installed
|
|
9
|
+
*
|
|
10
|
+
* Provides pre-resolved theme to Vue component tree via provide/inject.
|
|
11
|
+
*/
|
|
12
|
+
import { defineComponent, provide, onMounted, watch, computed, h } from 'vue';
|
|
13
|
+
import { emitCssVariables, generateCssText } from '@axiom-core/css-bridge';
|
|
14
|
+
import { setThemeAttributes } from '@axiom-core/dom-injector';
|
|
15
|
+
import { AXIOM_CONTEXT_KEY } from './internal/constants.js';
|
|
16
|
+
import { performCssInjection } from './internal/injection.js';
|
|
17
|
+
/**
|
|
18
|
+
* AxiomProvider Component
|
|
19
|
+
*
|
|
20
|
+
* Lightweight provider for pre-resolved themes.
|
|
21
|
+
* No runtime composition, minimal bundle size.
|
|
22
|
+
*
|
|
23
|
+
* Use this when:
|
|
24
|
+
* - You have pre-built themes
|
|
25
|
+
* - Theme switching happens via prop change
|
|
26
|
+
* - You want minimal bundle overhead
|
|
27
|
+
*
|
|
28
|
+
* For runtime composition, use '@axiom-core/vue-adapter/runtime'.
|
|
29
|
+
*
|
|
30
|
+
* Dependencies: css-bridge, dom-injector (NO core-engine)
|
|
31
|
+
* Bundle impact: ~5-6KB (target)
|
|
32
|
+
*/
|
|
33
|
+
export const AxiomProvider = defineComponent({
|
|
34
|
+
name: 'AxiomProvider',
|
|
35
|
+
props: {
|
|
36
|
+
resolvedTheme: {
|
|
37
|
+
type: Object,
|
|
38
|
+
required: true,
|
|
39
|
+
},
|
|
40
|
+
selector: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: undefined,
|
|
43
|
+
},
|
|
44
|
+
scope: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: 'global',
|
|
47
|
+
},
|
|
48
|
+
scopeId: {
|
|
49
|
+
type: String,
|
|
50
|
+
default: undefined,
|
|
51
|
+
},
|
|
52
|
+
mode: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: 'prod',
|
|
55
|
+
},
|
|
56
|
+
prefix: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: 'ax',
|
|
59
|
+
},
|
|
60
|
+
attributes: {
|
|
61
|
+
type: Object,
|
|
62
|
+
default: undefined,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
setup(props, { slots }) {
|
|
66
|
+
// Validate scopeId when scope='local'
|
|
67
|
+
if (props.scope === 'local' && !props.scopeId) {
|
|
68
|
+
throw new Error('[Axiom] AxiomProvider: scopeId is required when scope="local". ' +
|
|
69
|
+
'Provide a unique identifier like <AxiomProvider scope="local" scopeId="sidebar" />');
|
|
70
|
+
}
|
|
71
|
+
// Calculate selector based on scope
|
|
72
|
+
const selector = computed(() => {
|
|
73
|
+
if (props.selector)
|
|
74
|
+
return props.selector;
|
|
75
|
+
return props.scope === 'local' ? `[data-axiom-scope="${props.scopeId}"]` : ':root';
|
|
76
|
+
});
|
|
77
|
+
// Calculate unique style tag ID for local scopes
|
|
78
|
+
const styleTagId = computed(() => {
|
|
79
|
+
return props.scope === 'local' ? `axiom-theme-${props.scopeId}` : 'axiom-theme';
|
|
80
|
+
});
|
|
81
|
+
// Generate CSS text (reactive, memoized via computed)
|
|
82
|
+
// Directly create computed here to properly track props.resolvedTheme changes
|
|
83
|
+
const cssText = computed(() => {
|
|
84
|
+
const scopeId = props.scope === 'local' ? props.scopeId : undefined;
|
|
85
|
+
const vars = emitCssVariables(props.resolvedTheme, { mode: props.mode, prefix: props.prefix, scopeId });
|
|
86
|
+
return generateCssText(vars, selector.value);
|
|
87
|
+
});
|
|
88
|
+
// Provide theme context for useAxiomTheme()
|
|
89
|
+
const context = {
|
|
90
|
+
resolvedTheme: props.resolvedTheme,
|
|
91
|
+
themeId: styleTagId.value,
|
|
92
|
+
};
|
|
93
|
+
provide(AXIOM_CONTEXT_KEY, context);
|
|
94
|
+
// Extract injection logic for reuse in mount and reactive updates
|
|
95
|
+
const applyTheme = () => {
|
|
96
|
+
performCssInjection(cssText.value, styleTagId.value);
|
|
97
|
+
// Set theme attributes (e.g., data-theme="dark")
|
|
98
|
+
if (props.attributes) {
|
|
99
|
+
setThemeAttributes(props.attributes);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
// CSS injection effect (client-side only)
|
|
103
|
+
onMounted(() => {
|
|
104
|
+
// REQUIREMENT DOM-5: Browser API guard
|
|
105
|
+
// REQUIREMENT CSS-10: Inject exactly once during hydration
|
|
106
|
+
applyTheme();
|
|
107
|
+
});
|
|
108
|
+
// REQUIREMENT REACTIVE-1: Re-inject CSS when theme changes
|
|
109
|
+
// cssText is computed from resolvedTheme prop, watch for reactive updates
|
|
110
|
+
// Use flush: 'post' to ensure DOM updates are complete before injection
|
|
111
|
+
watch(cssText, () => {
|
|
112
|
+
// performCssInjection is idempotent and SSR-safe (guards internally)
|
|
113
|
+
applyTheme();
|
|
114
|
+
}, { flush: 'post' });
|
|
115
|
+
// Render function
|
|
116
|
+
return () => {
|
|
117
|
+
// Conditional wrapper for local scope
|
|
118
|
+
if (props.scope === 'local') {
|
|
119
|
+
return h('div', {
|
|
120
|
+
'data-axiom-scope': props.scopeId,
|
|
121
|
+
style: { display: 'contents' },
|
|
122
|
+
}, slots.default?.());
|
|
123
|
+
}
|
|
124
|
+
// Global scope: no wrapper needed
|
|
125
|
+
return slots.default?.();
|
|
126
|
+
};
|
|
127
|
+
},
|
|
128
|
+
});
|
|
129
|
+
//# sourceMappingURL=AxiomProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AxiomProvider.js","sourceRoot":"","sources":["../src/AxiomProvider.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AxiomProviderRuntime — Runtime Entry Component
|
|
3
|
+
*
|
|
4
|
+
* REQUIREMENT EA-8: Runtime entry MUST import core-engine and invariant-engine
|
|
5
|
+
* REQUIREMENT EA-9: Supports runtime theme composition
|
|
6
|
+
* REQUIREMENT EA-10: Validates theme using invariant-engine
|
|
7
|
+
* REQUIREMENT EA-11: Accepts same pre-resolved theme input as base entry
|
|
8
|
+
* REQUIREMENT EA-12: Pre-resolved theme renders identically in both entries
|
|
9
|
+
*
|
|
10
|
+
* Provides runtime theme composition and validation.
|
|
11
|
+
*/
|
|
12
|
+
import { type PropType } from 'vue';
|
|
13
|
+
import type { ResolvedTheme } from '@axiom-core/css-bridge';
|
|
14
|
+
import type { PrimitiveTokens, SemanticTokens } from '@axiom-core/token-schema';
|
|
15
|
+
import type { ThemeConfig, AxisRegistry } from '@axiom-core/core-engine';
|
|
16
|
+
/**
|
|
17
|
+
* AxiomProviderRuntime Component
|
|
18
|
+
*
|
|
19
|
+
* Full-featured provider with runtime composition support.
|
|
20
|
+
* Includes runtime engine for dynamic theme switching.
|
|
21
|
+
*
|
|
22
|
+
* Use this when:
|
|
23
|
+
* - You need dynamic theme composition
|
|
24
|
+
* - You want runtime axis switching (mode, brand, etc.)
|
|
25
|
+
* - You're building a theme configuration UI
|
|
26
|
+
*
|
|
27
|
+
* Supports two modes:
|
|
28
|
+
* 1. Pre-resolved: Pass resolvedTheme directly (backwards compatible)
|
|
29
|
+
* 2. Runtime: Pass primitives + baseSemantic + registry + config (new)
|
|
30
|
+
*
|
|
31
|
+
* Dependencies: css-bridge, dom-injector, core-engine, invariant-engine
|
|
32
|
+
* Bundle impact: ~15-18KB (includes runtime engine)
|
|
33
|
+
*/
|
|
34
|
+
export declare const AxiomProviderRuntime: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
35
|
+
resolvedTheme: {
|
|
36
|
+
type: PropType<ResolvedTheme>;
|
|
37
|
+
default: undefined;
|
|
38
|
+
};
|
|
39
|
+
primitives: {
|
|
40
|
+
type: PropType<PrimitiveTokens>;
|
|
41
|
+
default: undefined;
|
|
42
|
+
};
|
|
43
|
+
baseSemantic: {
|
|
44
|
+
type: PropType<SemanticTokens>;
|
|
45
|
+
default: undefined;
|
|
46
|
+
};
|
|
47
|
+
registry: {
|
|
48
|
+
type: PropType<AxisRegistry>;
|
|
49
|
+
default: undefined;
|
|
50
|
+
};
|
|
51
|
+
config: {
|
|
52
|
+
type: PropType<ThemeConfig>;
|
|
53
|
+
default: undefined;
|
|
54
|
+
};
|
|
55
|
+
selector: {
|
|
56
|
+
type: StringConstructor;
|
|
57
|
+
default: undefined;
|
|
58
|
+
};
|
|
59
|
+
scope: {
|
|
60
|
+
type: PropType<"global" | "local">;
|
|
61
|
+
default: string;
|
|
62
|
+
};
|
|
63
|
+
scopeId: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
mode: {
|
|
68
|
+
type: PropType<"dev" | "prod">;
|
|
69
|
+
default: string;
|
|
70
|
+
};
|
|
71
|
+
prefix: {
|
|
72
|
+
type: StringConstructor;
|
|
73
|
+
default: string;
|
|
74
|
+
};
|
|
75
|
+
attributes: {
|
|
76
|
+
type: PropType<Record<string, string>>;
|
|
77
|
+
default: undefined;
|
|
78
|
+
};
|
|
79
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
80
|
+
[key: string]: any;
|
|
81
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
82
|
+
[key: string]: any;
|
|
83
|
+
}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
84
|
+
resolvedTheme: {
|
|
85
|
+
type: PropType<ResolvedTheme>;
|
|
86
|
+
default: undefined;
|
|
87
|
+
};
|
|
88
|
+
primitives: {
|
|
89
|
+
type: PropType<PrimitiveTokens>;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
92
|
+
baseSemantic: {
|
|
93
|
+
type: PropType<SemanticTokens>;
|
|
94
|
+
default: undefined;
|
|
95
|
+
};
|
|
96
|
+
registry: {
|
|
97
|
+
type: PropType<AxisRegistry>;
|
|
98
|
+
default: undefined;
|
|
99
|
+
};
|
|
100
|
+
config: {
|
|
101
|
+
type: PropType<ThemeConfig>;
|
|
102
|
+
default: undefined;
|
|
103
|
+
};
|
|
104
|
+
selector: {
|
|
105
|
+
type: StringConstructor;
|
|
106
|
+
default: undefined;
|
|
107
|
+
};
|
|
108
|
+
scope: {
|
|
109
|
+
type: PropType<"global" | "local">;
|
|
110
|
+
default: string;
|
|
111
|
+
};
|
|
112
|
+
scopeId: {
|
|
113
|
+
type: StringConstructor;
|
|
114
|
+
default: undefined;
|
|
115
|
+
};
|
|
116
|
+
mode: {
|
|
117
|
+
type: PropType<"dev" | "prod">;
|
|
118
|
+
default: string;
|
|
119
|
+
};
|
|
120
|
+
prefix: {
|
|
121
|
+
type: StringConstructor;
|
|
122
|
+
default: string;
|
|
123
|
+
};
|
|
124
|
+
attributes: {
|
|
125
|
+
type: PropType<Record<string, string>>;
|
|
126
|
+
default: undefined;
|
|
127
|
+
};
|
|
128
|
+
}>> & Readonly<{}>, {
|
|
129
|
+
mode: "dev" | "prod";
|
|
130
|
+
prefix: string;
|
|
131
|
+
selector: string;
|
|
132
|
+
scopeId: string;
|
|
133
|
+
resolvedTheme: import("@axiom-core/core-engine").ResolvedSemanticTokens;
|
|
134
|
+
scope: "global" | "local";
|
|
135
|
+
attributes: Record<string, string>;
|
|
136
|
+
primitives: PrimitiveTokens;
|
|
137
|
+
baseSemantic: SemanticTokens;
|
|
138
|
+
registry: AxisRegistry;
|
|
139
|
+
config: ThemeConfig;
|
|
140
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
141
|
+
//# sourceMappingURL=AxiomProviderRuntime.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AxiomProviderRuntime.d.ts","sourceRoot":"","sources":["../src/AxiomProviderRuntime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAQL,KAAK,QAAQ,EAEd,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAWzE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB;;cAIX,QAAQ,CAAC,aAAa,CAAC;;;;cAIvB,QAAQ,CAAC,eAAe,CAAC;;;;cAIzB,QAAQ,CAAC,cAAc,CAAC;;;;cAIxB,QAAQ,CAAC,YAAY,CAAC;;;;cAItB,QAAQ,CAAC,WAAW,CAAC;;;;;;;;cAQrB,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC;;;;;;;;cAQ5B,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC;;;;;;;;cAQxB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;cAxChC,QAAQ,CAAC,aAAa,CAAC;;;;cAIvB,QAAQ,CAAC,eAAe,CAAC;;;;cAIzB,QAAQ,CAAC,cAAc,CAAC;;;;cAIxB,QAAQ,CAAC,YAAY,CAAC;;;;cAItB,QAAQ,CAAC,WAAW,CAAC;;;;;;;;cAQrB,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC;;;;;;;;cAQ5B,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC;;;;;;;;cAQxB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;4EAkQpD,CAAC"}
|