@nexdom/uimed-vue 2.0.0-beta.53 → 2.0.0-beta.55

package/AGENTS.md

@@ -173,6 +173,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
   - A new component/composable must be listed in its guide page (`docs/guide/…`), its API page (`docs/api/…`), both sidebars in `docs/.vitepress/config.ts`, the guide index table (`docs/guide/index.md`) and the API index list (`docs/api/index.md`).
 - Never write CSS or `<style>` blocks, and expose styling to consumers only through props.
 - Adjustments that Vuetify exposes as Sass variables (e.g. a font family or a line height) go in `src/styles/settings.scss`, which `vitePluginUimed()` compiles into Vuetify's stylesheets in the apps. That file only configures variables: still no CSS rules.
+  - It also limits Vuetify's utility classes to the families the components use, without breakpoint and print variants, and its color classes to black, white and transparent, since the utility stylesheet blocks the apps' first render. Using a class from another family (e.g. `ga-2` or `overflow-hidden`) means enabling its key in `$utilities` there; the unit tests of `src/__tests__/plugins.test.ts` fail when a class used in `src` isn't generated. The theme's colors (`bg-primary`, `text-primary-text`, ...) don't depend on it.
 - Don't add spacing to Vuetify components: no padding or margin utility classes (`pa-*`, `pt-6`, `px-4`, `ma-2`, ...) and no spacing props overriding the defaults. Vuetify already applies Material Design 3 spacing, and overriding it breaks what it handles on its own, such as button paddings and the scrollbar of scrollable content. If the default spacing looks wrong, stop and ask instead of adjusting it. The one accepted layout margin is `mt-auto` on `v-card-actions` (as in `USection`), which pushes the actions to the bottom of a full-height card without setting any spacing value.
 - Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why. Props covered by the shared composables below are the exception: they always go through them.
 - Reuse the shared internal composables for props that recur across components, so every component maps them to Vuetify the same way, instead of mapping them again:

package/dist/components.js

@@ -168,6 +168,7 @@ var skeleton_loader_default = /* @__PURE__ */ defineComponent({
 		const { t } = useLocale();
 		const widthClass = useFullWidth(() => props.fullWidth);
 		const heightClass = useFullHeight(() => props.fullHeight);
+		const alignContentClass = computed(() => props.fullHeight ? "align-content-space-between" : void 0);
 		const loadingAttrs = computed(() => ({
 			ariaLabel: void 0,
 			ariaLive: void 0,
@@ -179,7 +180,11 @@ var skeleton_loader_default = /* @__PURE__ */ defineComponent({
 				loading: props.loading,
 				type: props.type,
 				color: props.color,
-				class: [unref(widthClass), unref(heightClass)]
+				class: [
+					unref(widthClass),
+					unref(heightClass),
+					alignContentClass.value
+				]
 			}, loadingAttrs.value), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/dist/styles/settings.scss

@@ -2,5 +2,154 @@
   $body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
   // Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
   // height, which clipped its descenders and accented capitals
-  $list-item-subtitle-line-height: normal
+  $list-item-subtitle-line-height: normal,
+  // The utility classes are a render-blocking stylesheet in the apps, so only the ones the
+  // components use are generated. The theme's colors (`primary`, ...) don't come from here, and
+  // the palettes are left out: only the shades (black, white and transparent) remain, since
+  // Vuetify uses `bg-transparent` itself (e.g. on the navigation drawer's list)
+  $colors: (
+    "red": (),
+    "pink": (),
+    "purple": (),
+    "deep-purple": (),
+    "indigo": (),
+    "blue": (),
+    "light-blue": (),
+    "cyan": (),
+    "teal": (),
+    "green": (),
+    "light-green": (),
+    "lime": (),
+    "yellow": (),
+    "amber": (),
+    "orange": (),
+    "deep-orange": (),
+    "brown": (),
+    "blue-grey": (),
+    "grey": (),
+  ),
+  // The utility families the components use, or that Vuetify applies to them (e.g. `rounded-0` on
+  // list items), without the breakpoint and print variants, which they don't use. A class from
+  // another family needs its key enabled here
+  $utilities: (
+    "display": (
+      responsive: false,
+      print: false,
+    ),
+    "flex": (
+      responsive: false,
+    ),
+    "flex-direction": (
+      responsive: false,
+    ),
+    "flex-wrap": (
+      responsive: false,
+    ),
+    "justify-content": (
+      responsive: false,
+    ),
+    "align-items": (
+      responsive: false,
+    ),
+    "align-content": (
+      responsive: false,
+    ),
+    "margin": (
+      responsive: false,
+    ),
+    "margin-top": (
+      responsive: false,
+    ),
+    "margin-left": (
+      responsive: false,
+    ),
+    "negative-margin-right": (
+      responsive: false,
+    ),
+    "padding": (
+      responsive: false,
+    ),
+    "padding-x": (
+      responsive: false,
+    ),
+    "padding-y": (
+      responsive: false,
+    ),
+    "padding-top": (
+      responsive: false,
+    ),
+    "text-align": (
+      responsive: false,
+    ),
+    "height": (
+      responsive: false,
+    ),
+    "width": (
+      responsive: false,
+    ),
+    "overflow": false,
+    "overflow-x": false,
+    "overflow-y": false,
+    "float": false,
+    "float:rtl": false,
+    "float:ltr": false,
+    "flex-grow": false,
+    "flex-shrink": false,
+    "justify-items": false,
+    "align-self": false,
+    "order": false,
+    "gap": false,
+    "gap-row": false,
+    "gap-column": false,
+    "margin-x": false,
+    "margin-y": false,
+    "margin-right": false,
+    "margin-bottom": false,
+    "margin-start": false,
+    "margin-end": false,
+    "negative-margin": false,
+    "negative-margin-x": false,
+    "negative-margin-y": false,
+    "negative-margin-top": false,
+    "negative-margin-bottom": false,
+    "negative-margin-left": false,
+    "negative-margin-start": false,
+    "negative-margin-end": false,
+    "padding-right": false,
+    "padding-bottom": false,
+    "padding-left": false,
+    "padding-start": false,
+    "padding-end": false,
+    "rounded-top": false,
+    "rounded-end": false,
+    "rounded-bottom": false,
+    "rounded-start": false,
+    "rounded-top-start": false,
+    "rounded-top-end": false,
+    "rounded-bottom-end": false,
+    "rounded-bottom-start": false,
+    "border-current": false,
+    "border-opacity": false,
+    "border-top": false,
+    "border-end": false,
+    "border-bottom": false,
+    "border-start": false,
+    "border-style": false,
+    "white-space": false,
+    "overflow-wrap": false,
+    "opacity": false,
+    "text-overflow": false,
+    "typography": false,
+    "text-transform": false,
+    "font-weight": false,
+    "font-italic": false,
+    "text-mono": false,
+    "position": false,
+    "top": false,
+    "right": false,
+    "bottom": false,
+    "left": false,
+    "cursor": false,
+    "fill-height": false,
+  )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.53",
+  "version": "2.0.0-beta.55",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",