@pienter/ui 0.11.0 → 0.14.0

package/components/layout/record-layout/Panel.vue

@@ -0,0 +1,44 @@
+<template>
+    <section class="pui-panel">
+        <header v-if="title || description" class="pui-panel__header">
+            <component
+                :is="`h${level}`"
+                v-if="title"
+                :id="titleId"
+                class="pui-panel__title"
+                >{{ title }}</component
+            >
+            <p v-if="description" class="pui-panel__description">
+                {{ description }}
+            </p>
+        </header>
+        <slot />
+    </section>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        title?: string;
+        description?: string;
+        /** Heading level of the title: `2` under a page heading, `3` under another section. */
+        level?: 2 | 3;
+        /** `id` for the title element, so the panel or a landmark can reference it through `aria-labelledby`. */
+        titleId?: string;
+    }>(),
+    {
+        title: undefined,
+        description: undefined,
+        level: 2,
+        titleId: undefined,
+    },
+);
+
+defineSlots<{
+    default?: () => unknown;
+}>();
+</script>
+
+<style>
+@import './record-layout.css';
+</style>

package/components/layout/record-layout/RecordLayout.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="pui-record-layout">
+        <aside
+            v-if="$slots.sidebar"
+            class="pui-record-layout__sidebar"
+            :aria-labelledby="sidebarLabelledby"
+        >
+            <slot name="sidebar" />
+        </aside>
+        <div class="pui-record-layout__main">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        /** `id` of the sidebar's heading; names the `<aside>` landmark through `aria-labelledby`. */
+        sidebarLabelledby?: string;
+    }>(),
+    {
+        sidebarLabelledby: undefined,
+    },
+);
+
+defineSlots<{
+    sidebar?: () => unknown;
+    default?: () => unknown;
+}>();
+</script>
+
+<style>
+@import './record-layout.css';
+</style>

package/components/layout/record-layout/record-layout.css

@@ -0,0 +1,94 @@
+@layer components {
+    .pui-record-layout {
+        display: grid;
+        grid-template-columns:
+            minmax(0, var(--space-sidebar-width))
+            minmax(0, 1fr);
+        gap: var(--space-m);
+        align-items: start;
+        min-inline-size: 0;
+
+        @media (max-width: 56em) {
+            grid-template-columns: minmax(0, 1fr);
+        }
+    }
+
+    .pui-record-layout__sidebar {
+        min-inline-size: 0;
+
+        & .pui-panel {
+            --pui-record-fields-columns: minmax(0, 1fr);
+        }
+
+        /* Same layer as record-details.css, so this has to outrank its field rule. */
+        & .pui-record-details .pui-record-details__field {
+            grid-template-columns: minmax(0, 1fr);
+            gap: var(--space-3xs);
+        }
+
+        @media (min-width: 24em) and (max-width: 56em) {
+            & .pui-panel {
+                --pui-record-fields-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+    }
+
+    .pui-record-layout__main {
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+
+    .pui-panel {
+        --pui-record-fields-columns: minmax(0, 1fr);
+
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+        padding: var(--space-m);
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+
+        &[hidden] {
+            display: none;
+        }
+
+        & .pui-field:has(textarea) {
+            grid-column: 1 / -1;
+        }
+
+        /* An editable block list draws its own boxes and needs the width for
+         * its controls; a read-only one is content and keeps the panel. */
+        &:has(> .pui-block-editor:not([data-readonly='true'])) {
+            padding: var(--space-2xs) 0 0;
+            border: 0;
+            background: transparent;
+        }
+
+        @media (min-width: 48em) {
+            --pui-record-fields-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        @media (max-width: 56em) {
+            padding: var(--space-s);
+        }
+    }
+
+    .pui-panel__header {
+        display: grid;
+        gap: var(--space-3xs);
+    }
+
+    .pui-panel__title {
+        margin: 0;
+        font-size: var(--step-0);
+        font-weight: var(--fw-semibold);
+    }
+
+    .pui-panel__description {
+        margin: 0;
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
+    }
+}

package/components/navigation/tabs/tabs.css

@@ -1,7 +1,9 @@
 @layer components {
     .pui-tabs {
         display: flex;
+        flex-wrap: wrap;
         gap: var(--space-s);
+        min-inline-size: 0;
         border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
     }
     .pui-tabs__item {

package/icons/index.ts

@@ -41,6 +41,8 @@ import send from './send.js';
 import settings from './settings.js';
 import tool from './tool.js';
 import trash from './trash.js';
+import sidebarLeft from './sidebar-left.js';
+import sidebarRight from './sidebar-right.js';
 
 export const icons = {
     info: info,
@@ -86,6 +88,8 @@ export const icons = {
     settings: settings,
     tool: tool,
     trash: trash,
+    'sidebar-left': sidebarLeft,
+    'sidebar-right': sidebarRight,
 } as const;
 
 export type IconName = keyof typeof icons;

package/icons/sidebar-left.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/></svg>';

package/icons/sidebar-right.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/></svg>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -64,6 +64,8 @@
     "./components/Collapsible.vue": "./components/layout/collapsible/Collapsible.vue",
     "./components/AppLayout.vue": "./components/layout/app-layout/AppLayout.vue",
     "./components/PageHeader.vue": "./components/layout/page-header/PageHeader.vue",
+    "./components/Panel.vue": "./components/layout/record-layout/Panel.vue",
+    "./components/RecordLayout.vue": "./components/layout/record-layout/RecordLayout.vue",
     "./components/Separator.vue": "./components/layout/separator/Separator.vue",
     "./components/Table.vue": "./components/layout/table/Table.vue",
     "./components/TableRow.vue": "./components/layout/table/TableRow.vue",

package/styles/4-components/form-field.css

@@ -96,6 +96,13 @@
         cursor: not-allowed;
     }
 
+    /* `data-readonly="true"`: same border, text and focus ring as the
+     * default state on a muted surface; the control stays in the tab order. */
+    .pui-field[data-readonly='true'] .pui-input,
+    .pui-field[data-readonly='true'] .pui-textarea {
+        background: var(--bg-clr-surface-2);
+    }
+
     .pui-field[data-status='error'] .pui-input,
     .pui-field[data-status='error'] .pui-textarea {
         border-color: var(--border-clr-danger);