@greendrake/ui 0.7.0 → 0.8.0

package/README.md

@@ -27,13 +27,14 @@ Read with no fallback, so the app defines them:
 
 | Property | Read by |
 | --- | --- |
-| `--font-color` | text throughout: `AsyncSearch`, `BottomNav`, `Checkbox`, `ContextMenu`, `Gallery`, `Modal`, `Password`, `SearchField`, `TreeView` |
+| `--font-color` | text throughout: `AsyncSearch`, `BottomNav`, `Checkbox`, `ContextMenu`, `Gallery`, `Modal`, `Password`, `SearchField`, `SwitchRow`, `TreeView` |
 | `--background-color` | `AsyncSearch` narrow panel |
 | `--form-background`, `--form-background-hover` | control surfaces: `AsyncSearchResults`, `BottomNav`, `ContextMenu`, `SegmentedControl`, `TabBar`, `ThumbnailGrid`, `TreeView` |
 | `--input-background` | `Checkbox` box |
 | `--border-color`, `--border-color-light`, `--border-color-hover` | control and container borders; `--border-color-light` is also the `SplitPane` handle |
 | `--border-radius` | `AsyncSearch`, `AsyncSearchResults`, `Checkbox`, `ThumbnailGrid` (`FieldTip` falls back to 4px) |
-| `--accent-color` | active and checked states: `BottomNav`, `Checkbox`, `SegmentedControl`, `TabBar`, toasts; the hovered `SplitPane` handle; `TreeView` drop targets |
+| `--border-radius-pill` | `SwitchRow` track |
+| `--accent-color` | active and checked states: `BottomNav`, `Checkbox`, `SegmentedControl`, `SwitchRow`, `TabBar`, toasts; the hovered `SplitPane` handle; `TreeView` drop targets |
 | `--space-1` … `--space-5` | spacing |
 | `--font-xs`, `--font-md`, `--font-lg` | `BottomNav` and `ThumbnailGrid` labels, `FieldTip`, `Modal` title |
 | `--line-height-normal` | `Password` |
@@ -217,7 +218,7 @@ Full-screen image viewer in an expanded `Modal`. Props: `items: GalleryItem[]` (
 
 ### MenuButton
 
-Hover/click dropdown built on `vue-tippy`'s `Tippy` (theme `HMenu`, placement `bottom-end`); any click inside the menu closes it. Slots: `main` (trigger), `menuitems` (menu content, wrapped in `.Menubutton-Menu`). Props: `menuClass` (on the wrapper), `boxClass` (on the tippy box, applied once on create), `offset` (default `[0, -1]`), `matchTriggerWidth` (pins the popper width to the trigger's).
+Hover/click dropdown built on `vue-tippy`'s `Tippy` (theme `HMenu`, placement `bottom-end`), appended to `body`, or to the element filling the screen while one does; any click inside the menu closes it. Slots: `main` (trigger), `menuitems` (menu content, wrapped in `.Menubutton-Menu`). Props: `menuClass` (on the wrapper), `boxClass` (on the tippy box, applied once on create), `offset` (default `[0, -1]`), `matchTriggerWidth` (pins the popper width to the trigger's).
 
 ### ContextMenu
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/ui",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "Vue 3 component library: form controls, modals, search, tabs, toasts, layout",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",
@@ -33,9 +33,9 @@
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/domains": "0.7.0",
-        "@greendrake/scss-kit": "0.7.0",
-        "@greendrake/util": "0.7.0",
+        "@greendrake/domains": "^0.7.0",
+        "@greendrake/scss-kit": "^0.8.0",
+        "@greendrake/util": "^0.8.0",
         "vue-tippy": "^6.7.1"
     },
     "peerDependencies": {

package/src/MenuButton.vue

@@ -8,7 +8,9 @@
 // coordinates as top/left.
 const popperOptions = { modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }
 
-const appendTo = () => document.body
+// The body, or the element filling the screen while one does, outside which nothing
+// shows: a menu opened in a fullscreen video player, say. Asked on every show.
+const appendTo = () => document.fullscreenElement ?? document.body
 </script>
 <script setup lang="ts">
 import { computed } from 'vue'