@meddleware/ui 0.1.1 → 0.1.3
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 +1 -0
- package/dist/base.css +1 -1
- package/dist/components/AppFooter.vue.d.ts +2 -1
- package/dist/components/AppSidebar.vue.d.ts +3 -1
- package/dist/components/ColorModeControl.vue.d.ts +1 -0
- package/dist/components/UiButton.vue.d.ts +3 -0
- package/dist/components/UiCard.vue.d.ts +1 -0
- package/dist/components/UiNotice.vue.d.ts +6 -1
- package/dist/composables/useColorMode.d.ts +1 -0
- package/dist/internal/panel.d.ts +1 -0
- package/dist/ui.js +6 -6
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -52,6 +52,7 @@ All three accept a `variant` prop:
|
|
|
52
52
|
| `UiCard` | Card container with surface background and border. |
|
|
53
53
|
| `UiSelect` | Styled select input. |
|
|
54
54
|
| `UiNotice` | Notice / alert banner. |
|
|
55
|
+
| `SidebarItem` | Navigation button for use inside `AppSidebar`. Accepts `label`, `icon`, `active`, and `disabled` props. |
|
|
55
56
|
|
|
56
57
|
### Colour mode
|
|
57
58
|
|
package/dist/base.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-
|
|
1
|
+
.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-5aa0ef5a]{width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-5aa0ef5a]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-5aa0ef5a]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__foot[data-v-5aa0ef5a]{border-top:1px solid var(--_border);color:var(--_muted);padding:.75rem 1rem;font-size:.85rem}.mw-footer[data-v-c646b8e1]{background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.mw-footer--transparent[data-v-c646b8e1]{border-top:1px solid var(--border)}.mw-footer__center[data-v-c646b8e1]{flex:auto;min-width:0}.mw-footer__end[data-v-c646b8e1]{margin-left:auto}.mw-mode[data-v-e4a6bf1d]{border:1px solid var(--_border,var(--border));border-radius:var(--mw-radius,10px);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-e4a6bf1d]{border-radius:calc(var(--mw-radius,10px) - 3px);color:var(--_text,var(--text));font:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.8rem;display:inline-flex}.mw-mode__btn[data-v-e4a6bf1d]:hover{opacity:1}.mw-mode__btn.is-active[data-v-e4a6bf1d]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-e4a6bf1d]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-e4a6bf1d]{display:none}}.mw-btn[data-v-299de2c3]{border-radius:var(--mw-radius,10px);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .9rem;font-weight:550;transition:filter .12s,background .12s;display:inline-flex}.mw-btn[data-v-299de2c3]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-299de2c3]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-btn--primary[data-v-299de2c3]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-299de2c3]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-299de2c3]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-299de2c3]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-299de2c3]{background:var(--danger);color:var(--mw-neutral-000)}.mw-btn--danger[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-fd2fd7ab]{background:var(--surface);border:1px solid var(--border);border-radius:var(--mw-radius,10px);color:var(--text);overflow:hidden}.mw-card__header[data-v-fd2fd7ab]{border-bottom:1px solid var(--border);padding:.85rem 1rem}.mw-card__title[data-v-fd2fd7ab]{margin:0;font-size:1rem;font-weight:600}.mw-card__body[data-v-fd2fd7ab]{padding:1rem}.mw-card__footer[data-v-fd2fd7ab]{border-top:1px solid var(--border);background:var(--lift);padding:.75rem 1rem}.mw-select[data-v-b9468387]{position:relative}.mw-select select[data-v-b9468387]{appearance:none;background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--mw-radius,10px);font:inherit;padding:.5rem 2.5rem .5rem .7rem}.mw-select select[data-v-b9468387]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mw-select__chevron[data-v-b9468387]{pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.mw-notice[data-v-6f53d0be]{border:1px solid var(--border);border-radius:var(--mw-radius,10px);background:var(--lift);color:var(--text);border-left-width:3px;margin:0;padding:.6rem .8rem;font-size:.9rem}.mw-notice--error[data-v-6f53d0be]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-6f53d0be]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { type PanelVariant, type PanelColors } from '../internal/panel';
|
|
2
2
|
type __VLS_Props = {
|
|
3
|
-
/**
|
|
3
|
+
/** light | dark | transparent — default transparent (footers sit over the page background). */
|
|
4
4
|
variant?: PanelVariant;
|
|
5
|
+
/** Per-instance colour overrides; token values are used by default. */
|
|
5
6
|
colors?: PanelColors;
|
|
6
7
|
};
|
|
7
8
|
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { type PanelVariant, type PanelColors } from '../internal/panel';
|
|
2
2
|
type __VLS_Props = {
|
|
3
|
+
/** light | dark | transparent — default dark (token defaults, overridable). */
|
|
3
4
|
variant?: PanelVariant;
|
|
5
|
+
/** Per-instance colour overrides; token values are used by default. */
|
|
4
6
|
colors?: PanelColors;
|
|
5
|
-
/** Sidebar width (CSS length). */
|
|
7
|
+
/** Sidebar width (CSS length, e.g. '280px'). Defaults to `--mw-sidebar-width` (240px). */
|
|
6
8
|
width?: string;
|
|
7
9
|
};
|
|
8
10
|
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
|
|
@@ -5,6 +5,7 @@ import type { ColorMode } from '../composables/useColorMode';
|
|
|
5
5
|
* the `useColorMode()` composable or your store.
|
|
6
6
|
*/
|
|
7
7
|
type __VLS_Props = {
|
|
8
|
+
/** The currently selected colour mode (`v-model`). */
|
|
8
9
|
modelValue: ColorMode;
|
|
9
10
|
/** Which modes to offer (default all three). */
|
|
10
11
|
modes?: ColorMode[];
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
|
+
/** Visual style — primary (accent fill), secondary, ghost (outline), or danger (red). */
|
|
2
3
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
4
|
+
/** HTML button type attribute. Use 'submit' inside forms; 'button' otherwise. */
|
|
3
5
|
type?: 'button' | 'submit' | 'reset';
|
|
6
|
+
/** When true, the button is rendered faded and blocks all interaction. */
|
|
4
7
|
disabled?: boolean;
|
|
5
8
|
};
|
|
6
9
|
declare var __VLS_1: {};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
/** Inline notice/alert. Abstracted from the token-deployer `AppNotice.vue`. */
|
|
2
1
|
type __VLS_Props = {
|
|
2
|
+
/**
|
|
3
|
+
* Semantic intent — controls colour and ARIA role.
|
|
4
|
+
* - `'info'` (default): neutral informational note.
|
|
5
|
+
* - `'error'`: danger-coloured, sets `role="alert"` for assistive technologies.
|
|
6
|
+
* - `'ok'`: success-coloured, sets `role="status"`.
|
|
7
|
+
*/
|
|
3
8
|
type?: 'info' | 'error' | 'ok';
|
|
4
9
|
};
|
|
5
10
|
declare var __VLS_1: {};
|
package/dist/internal/panel.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { CSSProperties } from 'vue';
|
|
2
|
+
/** Panel colour scheme: theme-independent `light`/`dark` panel tokens, or `transparent`. */
|
|
2
3
|
export type PanelVariant = 'light' | 'dark' | 'transparent';
|
|
3
4
|
/** Optional per-instance colour overrides (win over the token defaults). */
|
|
4
5
|
export interface PanelColors {
|
package/dist/ui.js
CHANGED
|
@@ -79,7 +79,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
79
79
|
t.$slots.foot ? (l(), r("div", E, [f(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
|
|
80
80
|
], 6));
|
|
81
81
|
}
|
|
82
|
-
}), [["__scopeId", "data-v-
|
|
82
|
+
}), [["__scopeId", "data-v-5aa0ef5a"]]), O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = { class: "mw-footer__end" }, j = /*#__PURE__*/ S(/* @__PURE__ */ a({
|
|
83
83
|
__name: "AppFooter",
|
|
84
84
|
props: {
|
|
85
85
|
variant: { default: "transparent" },
|
|
@@ -96,7 +96,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
96
96
|
i("div", A, [f(t.$slots, "end", {}, void 0, !0)])
|
|
97
97
|
], 6));
|
|
98
98
|
}
|
|
99
|
-
}), [["__scopeId", "data-v-
|
|
99
|
+
}), [["__scopeId", "data-v-c646b8e1"]]), M = {
|
|
100
100
|
class: "mw-mode",
|
|
101
101
|
role: "group",
|
|
102
102
|
"aria-label": "Colour mode"
|
|
@@ -134,7 +134,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
134
134
|
onClick: (t) => o.$emit("update:modelValue", e)
|
|
135
135
|
}, [i("span", P, p(a[e]), 1), i("span", te, p(n[e]), 1)], 10, N))), 128))]));
|
|
136
136
|
}
|
|
137
|
-
}), [["__scopeId", "data-v-
|
|
137
|
+
}), [["__scopeId", "data-v-e4a6bf1d"]]), I = ["type", "disabled"], L = /*#__PURE__*/ S(/* @__PURE__ */ a({
|
|
138
138
|
__name: "UiButton",
|
|
139
139
|
props: {
|
|
140
140
|
variant: { default: "primary" },
|
|
@@ -151,7 +151,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
151
151
|
class: s(["mw-btn", `mw-btn--${e.variant}`])
|
|
152
152
|
}, [f(t.$slots, "default", {}, void 0, !0)], 10, I));
|
|
153
153
|
}
|
|
154
|
-
}), [["__scopeId", "data-v-
|
|
154
|
+
}), [["__scopeId", "data-v-299de2c3"]]), R = { class: "mw-card" }, z = {
|
|
155
155
|
key: 0,
|
|
156
156
|
class: "mw-card__header"
|
|
157
157
|
}, B = { class: "mw-card__title" }, V = { class: "mw-card__body" }, H = {
|
|
@@ -167,7 +167,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
167
167
|
t.$slots.footer ? (l(), r("footer", H, [f(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
|
|
168
168
|
]));
|
|
169
169
|
}
|
|
170
|
-
}), [["__scopeId", "data-v-
|
|
170
|
+
}), [["__scopeId", "data-v-fd2fd7ab"]]), W = { class: "mw-select" }, G = /*#__PURE__*/ S(/* @__PURE__ */ a({
|
|
171
171
|
inheritAttrs: !1,
|
|
172
172
|
__name: "UiSelect",
|
|
173
173
|
props: {
|
|
@@ -199,7 +199,7 @@ var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b =
|
|
|
199
199
|
role: i.value
|
|
200
200
|
}, [f(t.$slots, "default", {}, void 0, !0)], 10, K));
|
|
201
201
|
}
|
|
202
|
-
}), [["__scopeId", "data-v-
|
|
202
|
+
}), [["__scopeId", "data-v-6f53d0be"]]), J = "mw-color-mode", Y = u("system"), X = !1;
|
|
203
203
|
function Z() {
|
|
204
204
|
return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
205
205
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meddleware/ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Shared Vue 3 component library for @meddleware UIs
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "Shared Vue 3 component library for @meddleware UIs \u2014 layout shell (header/sidebar/footer), colour-mode control, and primitives. Built on @meddleware/design-tokens.",
|
|
5
5
|
"license": "0BSD",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sideEffects": [
|
|
@@ -41,4 +41,4 @@
|
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
}
|
|
44
|
-
}
|
|
44
|
+
}
|