@damarkuncoro/agnostic-ui-vue 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/dist/index.js +123 -0
- package/dist/index.umd.cjs +1 -0
- package/package.json +57 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { defineComponent as d, provide as B, inject as k, computed as u, createBlock as _, openBlock as p, resolveDynamicComponent as I, normalizeClass as h, withCtx as x, renderSlot as c, createElementBlock as m, mergeProps as b, unref as C } from "vue";
|
|
2
|
+
import { useUiButton as U, useUiIcon as P, useUiTestComponent as z } from "@damarkuncoro/agnostic-ui-base";
|
|
3
|
+
import { shadcn as i } from "@damarkuncoro/agnostic-ui-skin";
|
|
4
|
+
const f = Symbol("UIContext"), v = {
|
|
5
|
+
getButtonClass: i.getButtonClass,
|
|
6
|
+
getLinkClass: i.getLinkClass,
|
|
7
|
+
getIconClass: i.getIconClass,
|
|
8
|
+
getTestComponentClass: i.getTestComponentClass
|
|
9
|
+
}, g = d({
|
|
10
|
+
name: "UIProvider",
|
|
11
|
+
props: {
|
|
12
|
+
skin: {
|
|
13
|
+
type: Object,
|
|
14
|
+
default: () => v
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
setup(t, { slots: a }) {
|
|
18
|
+
return B(f, {
|
|
19
|
+
skin: t.skin
|
|
20
|
+
}), () => {
|
|
21
|
+
var l;
|
|
22
|
+
return (l = a.default) == null ? void 0 : l.call(a);
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
}), D = g;
|
|
26
|
+
D.install = (t, a) => {
|
|
27
|
+
t.provide(f, {
|
|
28
|
+
skin: (a == null ? void 0 : a.skin) || v
|
|
29
|
+
}), t.component("UIProvider", g);
|
|
30
|
+
};
|
|
31
|
+
function y() {
|
|
32
|
+
return k(f, { skin: v });
|
|
33
|
+
}
|
|
34
|
+
const N = /* @__PURE__ */ d({
|
|
35
|
+
__name: "Button",
|
|
36
|
+
props: {
|
|
37
|
+
variant: { default: "primary" },
|
|
38
|
+
size: { default: "md" },
|
|
39
|
+
type: { default: "button" },
|
|
40
|
+
disabled: { type: Boolean, default: !1 },
|
|
41
|
+
loading: { type: Boolean, default: !1 },
|
|
42
|
+
toggle: { type: Boolean, default: !1 },
|
|
43
|
+
pressed: { type: Boolean, default: !1 },
|
|
44
|
+
autofocus: { type: Boolean, default: !1 },
|
|
45
|
+
href: { default: void 0 },
|
|
46
|
+
target: { default: void 0 },
|
|
47
|
+
rel: { default: void 0 }
|
|
48
|
+
},
|
|
49
|
+
setup(t) {
|
|
50
|
+
const a = t, { skin: l } = y(), e = u(() => U(a)), r = u(
|
|
51
|
+
() => l.getButtonClass(e.value.props.variant, e.value.props.size)
|
|
52
|
+
), o = (s) => {
|
|
53
|
+
if (e.value.state.isDisabled) {
|
|
54
|
+
s.preventDefault();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
return (s, n) => (p(), _(I(e.value.a11y.role === "link" ? "a" : "button"), {
|
|
59
|
+
class: h([r.value, s.$attrs.class]),
|
|
60
|
+
href: e.value.props.href,
|
|
61
|
+
target: e.value.props.target,
|
|
62
|
+
rel: e.value.props.rel,
|
|
63
|
+
type: e.value.a11y.role === "button" ? e.value.props.type : void 0,
|
|
64
|
+
disabled: e.value.state.isDisabled,
|
|
65
|
+
role: e.value.a11y.role,
|
|
66
|
+
tabindex: e.value.a11y.tabIndex,
|
|
67
|
+
"aria-disabled": e.value.a11y.ariaDisabled,
|
|
68
|
+
"aria-busy": e.value.a11y.ariaBusy,
|
|
69
|
+
"aria-pressed": e.value.a11y.ariaPressed,
|
|
70
|
+
"aria-label": e.value.a11y.ariaLabel,
|
|
71
|
+
"aria-labelledby": e.value.a11y.ariaLabelledBy,
|
|
72
|
+
"aria-describedby": e.value.a11y.ariaDescribedBy,
|
|
73
|
+
"aria-expanded": e.value.a11y.ariaExpanded,
|
|
74
|
+
"aria-controls": e.value.a11y.ariaControls,
|
|
75
|
+
"aria-haspopup": e.value.a11y.ariaHasPopup,
|
|
76
|
+
onClick: o
|
|
77
|
+
}, {
|
|
78
|
+
default: x(() => [
|
|
79
|
+
c(s.$slots, "default")
|
|
80
|
+
]),
|
|
81
|
+
_: 3
|
|
82
|
+
}, 8, ["class", "href", "target", "rel", "type", "disabled", "role", "tabindex", "aria-disabled", "aria-busy", "aria-pressed", "aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-haspopup"]));
|
|
83
|
+
}
|
|
84
|
+
}), S = /* @__PURE__ */ d({
|
|
85
|
+
__name: "Icon",
|
|
86
|
+
props: {
|
|
87
|
+
variant: { default: "primary" },
|
|
88
|
+
size: { default: "md" },
|
|
89
|
+
disabled: { type: Boolean, default: !1 }
|
|
90
|
+
},
|
|
91
|
+
setup(t) {
|
|
92
|
+
const a = t, { props: l, a11y: e } = P(a), r = y(), o = u(() => {
|
|
93
|
+
var s, n;
|
|
94
|
+
return (n = (s = r.skin).getIconClass) == null ? void 0 : n.call(s, l.variant, l.size);
|
|
95
|
+
});
|
|
96
|
+
return (s, n) => (p(), m("div", b(C(e), { class: o.value }), [
|
|
97
|
+
c(s.$slots, "default")
|
|
98
|
+
], 16));
|
|
99
|
+
}
|
|
100
|
+
}), j = /* @__PURE__ */ d({
|
|
101
|
+
__name: "TestComponent",
|
|
102
|
+
props: {
|
|
103
|
+
variant: { default: "primary" },
|
|
104
|
+
size: { default: "md" },
|
|
105
|
+
disabled: { type: Boolean, default: !1 },
|
|
106
|
+
className: { default: "" }
|
|
107
|
+
},
|
|
108
|
+
setup(t) {
|
|
109
|
+
const a = t, { props: l, a11y: e } = z(a), r = y(), o = u(() => r.skin.getTestComponentClass(l.variant, l.size, a.className));
|
|
110
|
+
return (s, n) => (p(), m("div", b(C(e), { class: o.value }), [
|
|
111
|
+
c(s.$slots, "default")
|
|
112
|
+
], 16));
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
export {
|
|
116
|
+
N as Button,
|
|
117
|
+
S as Icon,
|
|
118
|
+
j as TestComponent,
|
|
119
|
+
f as UIContextKey,
|
|
120
|
+
D as UIProvider,
|
|
121
|
+
v as defaultSkin,
|
|
122
|
+
y as useUI
|
|
123
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@damarkuncoro/agnostic-ui-base"),require("@damarkuncoro/agnostic-ui-skin")):typeof define=="function"&&define.amd?define(["exports","vue","@damarkuncoro/agnostic-ui-base","@damarkuncoro/agnostic-ui-skin"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.AgnosticUiVue={},t.Vue,t.AgnosticUiBase,t.AgnosticUiSkin))})(this,function(t,e,m,u){"use strict";const c=Symbol("UIContext"),p={getButtonClass:u.shadcn.getButtonClass,getLinkClass:u.shadcn.getLinkClass,getIconClass:u.shadcn.getIconClass,getTestComponentClass:u.shadcn.getTestComponentClass},y=e.defineComponent({name:"UIProvider",props:{skin:{type:Object,default:()=>p}},setup(n,{slots:s}){return e.provide(c,{skin:n.skin}),()=>{var r;return(r=s.default)==null?void 0:r.call(s)}}}),b=y;b.install=(n,s)=>{n.provide(c,{skin:(s==null?void 0:s.skin)||p}),n.component("UIProvider",y)};function f(){return e.inject(c,{skin:p})}const C=e.defineComponent({__name:"Button",props:{variant:{default:"primary"},size:{default:"md"},type:{default:"button"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},toggle:{type:Boolean,default:!1},pressed:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},href:{default:void 0},target:{default:void 0},rel:{default:void 0}},setup(n){const s=n,{skin:r}=f(),a=e.computed(()=>m.useUiButton(s)),l=e.computed(()=>r.getButtonClass(a.value.props.variant,a.value.props.size)),i=o=>{if(a.value.state.isDisabled){o.preventDefault();return}};return(o,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value.a11y.role==="link"?"a":"button"),{class:e.normalizeClass([l.value,o.$attrs.class]),href:a.value.props.href,target:a.value.props.target,rel:a.value.props.rel,type:a.value.a11y.role==="button"?a.value.props.type:void 0,disabled:a.value.state.isDisabled,role:a.value.a11y.role,tabindex:a.value.a11y.tabIndex,"aria-disabled":a.value.a11y.ariaDisabled,"aria-busy":a.value.a11y.ariaBusy,"aria-pressed":a.value.a11y.ariaPressed,"aria-label":a.value.a11y.ariaLabel,"aria-labelledby":a.value.a11y.ariaLabelledBy,"aria-describedby":a.value.a11y.ariaDescribedBy,"aria-expanded":a.value.a11y.ariaExpanded,"aria-controls":a.value.a11y.ariaControls,"aria-haspopup":a.value.a11y.ariaHasPopup,onClick:i},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["class","href","target","rel","type","disabled","role","tabindex","aria-disabled","aria-busy","aria-pressed","aria-label","aria-labelledby","aria-describedby","aria-expanded","aria-controls","aria-haspopup"]))}}),k=e.defineComponent({__name:"Icon",props:{variant:{default:"primary"},size:{default:"md"},disabled:{type:Boolean,default:!1}},setup(n){const s=n,{props:r,a11y:a}=m.useUiIcon(s),l=f(),i=e.computed(()=>{var o,d;return(d=(o=l.skin).getIconClass)==null?void 0:d.call(o,r.variant,r.size)});return(o,d)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps(e.unref(a),{class:i.value}),[e.renderSlot(o.$slots,"default")],16))}}),v=e.defineComponent({__name:"TestComponent",props:{variant:{default:"primary"},size:{default:"md"},disabled:{type:Boolean,default:!1},className:{default:""}},setup(n){const s=n,{props:r,a11y:a}=m.useUiTestComponent(s),l=f(),i=e.computed(()=>l.skin.getTestComponentClass(r.variant,r.size,s.className));return(o,d)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps(e.unref(a),{class:i.value}),[e.renderSlot(o.$slots,"default")],16))}});t.Button=C,t.Icon=k,t.TestComponent=v,t.UIContextKey=c,t.UIProvider=b,t.defaultSkin=p,t.useUI=f,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@damarkuncoro/agnostic-ui-vue",
|
|
3
|
+
"description": "Agnostic UI Vue",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": ["dist"],
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"publishConfig": { "access": "public" },
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "vue-tsc && vite build",
|
|
13
|
+
"test": "vitest run"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@damarkuncoro/agnostic-ui-contracts": "workspace:*",
|
|
17
|
+
"@damarkuncoro/agnostic-ui-base": "workspace:*",
|
|
18
|
+
"@damarkuncoro/agnostic-ui-skin": "workspace:*",
|
|
19
|
+
"clsx": "^2.1.0",
|
|
20
|
+
"tailwind-merge": "^2.2.0",
|
|
21
|
+
"vue": "^3.4.0"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
25
|
+
"@vue/test-utils": "^2.4.0",
|
|
26
|
+
"happy-dom": "^13.0.0",
|
|
27
|
+
"typescript": "^5.0.0",
|
|
28
|
+
"vite": "^5.0.0",
|
|
29
|
+
"vitest": "^3.0.0",
|
|
30
|
+
"vue-tsc": "^2.0.0"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"vue": "^3.0.0"
|
|
34
|
+
},
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"author": "Damar Kuncoro",
|
|
37
|
+
"keywords": [
|
|
38
|
+
"agnostic-ui",
|
|
39
|
+
"vue",
|
|
40
|
+
"components",
|
|
41
|
+
"typescript",
|
|
42
|
+
"design-system",
|
|
43
|
+
"a11y"
|
|
44
|
+
],
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "git+https://github.com/damarkuncoro/agnostic-ui.git"
|
|
48
|
+
},
|
|
49
|
+
"bugs": {
|
|
50
|
+
"url": "https://github.com/damarkuncoro/agnostic-ui/issues"
|
|
51
|
+
},
|
|
52
|
+
"homepage": "https://github.com/damarkuncoro/agnostic-ui#readme",
|
|
53
|
+
"engines": {
|
|
54
|
+
"node": ">=18",
|
|
55
|
+
"pnpm": ">=8"
|
|
56
|
+
}
|
|
57
|
+
}
|