@greendrake/ui 0.6.0 → 0.8.0

package/src/SwitchRow.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// An on/off switch shaped as a row: the label at the leading edge, a track and
+// knob trailing, showing the current state rather than leaving an ambiguous
+// label to imply it.
+//
+// An <a role="switch"> rather than a checkbox: in a menu the row sits among
+// menu items and has to read and be styled as one of them (the host classes it
+// `menu-item`), while the role keeps its on/off state honest to assistive tech.
+// Layout comes from the host's class, which side the label sits on included —
+// everything here is the switch itself.
+const on = defineModel<boolean>({ required: true })
+defineProps<{
+    label: string
+    // Tooltip, where what the switch DOES is worth naming apart from what it
+    // is: the colour-mode row is labelled "Dark mode" but offers "Light mode"
+    // while dark. Defaults to the label.
+    title?: string
+}>()
+</script>
+<template>
+    <!-- .stop, because MenuButton's popper dismisses itself on any click within
+         it: right for an item that IS a choice, wrong for a control that acts in
+         place. Without it the menu vanishes on the very frame the knob would
+         have moved, and the setting can only be read back by reopening it. -->
+    <a href="#" class="SwitchRow" role="switch" :aria-checked="on" :title="title ?? label" @click.prevent.stop="on = !on">
+        <span class="SwitchRow__text">{{ label }}</span>
+        <span class="SwitchRow__toggle" :class="{ 'SwitchRow__toggle--on': on }"><span class="SwitchRow__knob"></span></span>
+    </a>
+</template>
+<style lang="scss">
+.SwitchRow {
+    // The row is an <a> (for role="switch"), so the global `a, a span` rule would
+    // paint it violet — but it's a toggle, not a link. Pin the label span too
+    // (the `a span` rule explicitly colours it, so the anchor colour alone won't
+    // reach it).
+    color: var(--font-color);
+    text-decoration: none;
+    gap: var(--space-2);
+    &__text {
+        color: var(--font-color);
+    }
+    &__toggle {
+        flex: 0 0 auto;
+        width: 40px;
+        height: 22px;
+        border-radius: var(--border-radius-pill);
+        background: var(--border-color);
+        transition: background 0.15s;
+        position: relative;
+    }
+    &__knob {
+        position: absolute;
+        top: 2px;
+        inset-inline-start: 2px;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #fff;
+        transition: transform 0.15s;
+    }
+    &__toggle--on {
+        background: var(--accent-color);
+        .SwitchRow__knob {
+            // The knob travels toward the inline end, which is leftwards under
+            // an RTL layout — transforms have no logical form, so the direction
+            // is stated rather than derived.
+            transform: translateX(18px);
+        }
+        [dir='rtl'] & .SwitchRow__knob {
+            transform: translateX(-18px);
+        }
+    }
+}
+</style>

package/src/TabBar.vue

@@ -1,9 +1,20 @@
 <script lang="ts">
+import type { Component } from 'vue'
+
 export interface TabDef {
     id: string
     label: string
     closable?: boolean
 }
+
+// A component and the props its host binds it with.
+export interface Pane {
+    component: Component
+    props?: Record<string, unknown>
+}
+
+// A tab and the pane it shows.
+export interface TabPane extends TabDef, Pane {}
 </script>
 <script setup lang="ts">
 import { computed } from 'vue'

package/src/TabPanels.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { TabPane } from './TabBar.vue'
+
+/** A tab: the tab strip's entry plus the panel it shows. */
+export interface TabPanel extends TabPane {
+    // The panel outlives being switched away from: kept as it was, not mounted again
+    // on coming back. Unset, it is unmounted, and whatever it holds open closes.
+    keepAlive?: boolean
+}
+</script>
+<script setup lang="ts">
+// A tab strip over one panel at a time, the tabs declared as data. The strip and the
+// panel are the host's children, laid out as it lays out its own.
+import { computed } from 'vue'
+import TabBar from './TabBar.vue'
+
+const props = defineProps<{ tabs: TabPanel[] }>()
+
+// The open tab's id: bound by a host that opens tabs itself, kept here otherwise.
+const active = defineModel<string>('active')
+
+// Only ever a registry id, so the lookup always resolves.
+const activeTab = computed({
+    get: () => active.value ?? props.tabs[0]!.id,
+    set: id => {
+        active.value = id
+    }
+})
+const panel = computed(() => props.tabs.find(t => t.id === activeTab.value)!)
+</script>
+<template>
+    <TabBar v-model="activeTab" :tabs="tabs" />
+    <!-- A kept panel is deactivated rather than unmounted while another shows. -->
+    <KeepAlive>
+        <component :is="panel.component" v-if="panel.keepAlive" :key="panel.id" v-bind="panel.props" />
+    </KeepAlive>
+    <component :is="panel.component" v-if="!panel.keepAlive" v-bind="panel.props" />
+</template>

package/src/{FieldTip.scss → Tip.scss}

@@ -1,10 +1,10 @@
-// Styling for the field-validation tooltips FieldTip.ts creates, scoped to the
-// `fieldTip` theme it applies. Self-contained (there is no global tippy.js base
-// stylesheet) so it styles only these tips and never the other themed,
-// arrow-less tippies (menus, async-search): a filled box with a pointer arrow,
-// its box/arrow geometry mirroring tippy.js' own tippy.css. The fill is the
-// --tippy-background-color token, defaulting to violet.
-.tippy-box[data-theme~='fieldTip'] {
+// Styling for the text tooltips FieldTip.ts and InfoTip.vue show, scoped to the `tip`
+// theme they apply. Self-contained (there is no global tippy.js base stylesheet) so it
+// styles only these tips and never the other themed, arrow-less tippies (menus,
+// async-search): a filled box with a pointer arrow, its box/arrow geometry mirroring
+// tippy.js' own tippy.css. The fill is the --tippy-background-color token, defaulting
+// to violet.
+.tippy-box[data-theme~='tip'] {
     position: relative;
     background-color: var(--tippy-background-color, #5335e8);
     color: #fff;