@bluerobotics/bluevue 0.1.1 → 0.2.1

package/src/components/BlueInput.vue

@@ -11,7 +11,7 @@
         :for="name"
         class="block truncate text-start mr-6"
         :title="label"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
       >
         {{ label }}
       </label>
@@ -19,20 +19,20 @@
     <div v-else />
     <slot name="insetElement" />
 
-    <div
+    <BlueTooltip
       v-if="infoTooltip"
-      class="relative group inline-flex items-center shrink-0 mr-2 ml-auto"
+      :text="infoTooltip"
+      :theme="theme"
+      class="items-center shrink-0 mr-2 ml-auto"
     >
-      <span
-        class="mdi mdi-information-outline text-[16px] opacity-60 cursor-help"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+      <BlueIcon
+        name="mdi-information-outline"
+        :size="16"
+        :label="infoTooltip"
+        class="cursor-help"
+        :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
       />
-      <div
-        class="absolute bottom-full mb-1 right-0 hidden group-hover:block w-max max-w-[280px] px-2 py-1 text-xs rounded bg-gray-700 text-white z-[1000]"
-      >
-        {{ infoTooltip }}
-      </div>
-    </div>
+    </BlueTooltip>
 
     <div class="flex flex-col items-end min-w-0 shrink-[1000]">
       <!-- The inset shadow darkens a band along the top edge, which the eye takes for the rim of
@@ -55,6 +55,12 @@
       >
         <!-- Always a text input, even for numbers: a native number input reports a half-typed
              value ('-', '-27.') as an empty string, which would wipe the model mid-keystroke. -->
+        <div
+          v-if="$slots.prepend"
+          class="flex shrink-0 items-center pl-2"
+        >
+          <slot name="prepend" />
+        </div>
         <input
           :id="name"
           ref="inputRef"
@@ -65,8 +71,9 @@
           :disabled="disabled"
           :autofocus="autofocus"
           :inputmode="type === 'number' ? 'decimal' : undefined"
-          class="w-full min-w-0 bg-transparent pl-4 text-sm font-medium outline-none"
+          class="w-full min-w-0 bg-transparent text-sm font-medium outline-none"
           :class="[
+            $slots.prepend ? 'pl-1' : 'pl-4',
             suffix ? 'pr-1' : 'pr-4',
             theme === 'dark' ? 'text-white placeholder:text-[#ffffff44]' : 'text-black placeholder:text-[#00000055]',
           ]"
@@ -108,6 +115,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
+
 const props = defineProps<{
   /**
    * Model value for v-model. A 'number' field emits numbers and never emits an empty value:

package/src/components/BlueLoadingDialog.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-
 import logo from '../assets/br-logo-white.svg'
+import BlueDialog from './BlueDialog.vue'
 
 /**
  * A blocking overlay for an operation that is under way, such as a vehicle restarting. It is up
  * for exactly as long as `modelValue` says it is, and unless it is dismissible there is no way
  * out of it.
  */
-const props = defineProps<{
+defineProps<{
   modelValue: boolean
   /** What the operation is, shown under the propeller. */
   message?: string
@@ -19,58 +18,28 @@ const props = defineProps<{
 const emit = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
 }>()
-
-const dialogRef = ref<HTMLDialogElement | null>(null)
-
-const sync = (show: boolean): void => {
-  const el = dialogRef.value
-  if (!el) return
-  if (show && !el.open) el.showModal()
-  if (!show && el.open) el.close()
-}
-
-const close = (): void => emit('update:modelValue', false)
-
-// Escape closes a dismissible overlay through the same path as the button, so the caller's
-// state follows the dialog instead of thinking it is still up.
-const onCancel = (event: Event): void => {
-  event.preventDefault()
-  if (props.dismissible) close()
-}
-
-onMounted(() => sync(props.modelValue))
-watch(() => props.modelValue, sync)
 </script>
 
 <template>
-  <!-- Escape is swallowed unless the wait is dismissible: an operation the user cannot
-       interrupt must not end up running under a live page. -->
-  <dialog
-    ref="dialogRef"
-    class="bluevue-dialog"
-    @cancel="onCancel"
+  <!-- Persistent unless the wait is dismissible: an operation the user cannot interrupt must not
+       end up running under a live page. -->
+  <BlueDialog
+    :model-value="modelValue"
+    :persistent="!dismissible"
+    width="320px"
+    body-class="flex flex-col items-center justify-center px-6 pt-7 pb-5"
+    @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="bluevue-panel relative flex w-[320px] flex-col items-center justify-center rounded-lg px-6 pt-7 pb-5">
-      <button
-        v-if="dismissible"
-        type="button"
-        class="absolute right-3 top-3 cursor-pointer text-[#ffffffaa] transition-colors hover:text-white"
-        title="Close"
-        @click="close"
-      >
-        <span class="mdi mdi-close text-[20px] leading-none" />
-      </button>
-      <img
-        :src="logo"
-        alt=""
-        class="bluevue-loading__icon mb-6 h-[100px] w-[100px]"
-      >
-      <span
-        v-if="message"
-        class="mt-[15px] text-center text-base text-white"
-      >
-        {{ message }}
-      </span>
-    </div>
-  </dialog>
+    <img
+      :src="logo"
+      alt=""
+      class="bluevue-loading__icon mb-6 h-[100px] w-[100px]"
+    >
+    <span
+      v-if="message"
+      class="mt-[5px] text-center text-base text-white"
+    >
+      {{ message }}
+    </span>
+  </BlueDialog>
 </template>

package/src/components/BlueProgressBar.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * How far along something is. Give it a value for work whose size is known, and set
+ * `indeterminate` for work that is under way but cannot say how much of it is left.
+ */
+const props = defineProps<{
+  /** Percentage complete, clamped to 0-100. */
+  modelValue?: number
+  /** Sweeps instead of filling, for progress that cannot be measured. */
+  indeterminate?: boolean
+  /** Bar thickness in pixels (default 4). */
+  height?: number
+  /** The fill (default the primary token). */
+  color?: string
+  theme?: 'light' | 'dark'
+  /** What is progressing, read out by assistive technology. */
+  label?: string
+}>()
+
+// A value outside the range is a caller's arithmetic, not a bar that should paint past its track.
+const percent = computed(() => Math.min(100, Math.max(0, props.modelValue ?? 0)))
+</script>
+
+<template>
+  <div
+    class="bluevue-progress w-full overflow-hidden rounded-full"
+    :class="theme === 'light' ? 'bg-[#00000022]' : 'bg-[#ffffff1a]'"
+    :style="{ height: `${height ?? 4}px` }"
+    role="progressbar"
+    :aria-label="label"
+    :aria-valuenow="indeterminate ? undefined : percent"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div
+      class="h-full rounded-full"
+      :class="indeterminate ? 'bluevue-progress__sweep' : 'transition-[width] duration-200 ease-out'"
+      :style="{
+        width: indeterminate ? undefined : `${percent}%`,
+        backgroundColor: color || 'var(--bluevue-primary)',
+      }"
+    />
+  </div>
+</template>

package/src/components/BluePromptDialog.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
+import BlueButton from './BlueButton.vue'
+import BlueDialog from './BlueDialog.vue'
 import BlueInput from './BlueInput.vue'
 
 /**
@@ -31,121 +33,71 @@ const emit = defineEmits<{
 
 const name = ref(props.initial ?? '')
 const notes = ref(props.notesInitial ?? '')
-const dialogRef = ref<HTMLDialogElement | null>(null)
+const dialogRef = ref<InstanceType<typeof BlueDialog> | null>(null)
 
 // Reset on open rather than on close, so the fields are right before the dialog animates in.
 watch(
   () => props.modelValue,
   (open) => {
-    if (open) {
-      name.value = props.initial ?? ''
-      notes.value = props.notesInitial ?? ''
-    }
-    const el = dialogRef.value
-    if (!el) return
-    if (open && !el.open) el.showModal()
-    if (!open && el.open) el.close()
+    if (!open) return
+    name.value = props.initial ?? ''
+    notes.value = props.notesInitial ?? ''
   }
 )
 
-onMounted(() => {
-  if (props.modelValue) dialogRef.value?.showModal()
-})
-
-function close(): void {
-  // Every way out of the dialog closes the element, and its close event is what reports back,
-  // so Escape and the backdrop need no separate handling.
-  dialogRef.value?.close()
-}
-
 function confirm(): void {
   const trimmed = name.value.trim()
   if (!trimmed) return
-  close()
+  dialogRef.value?.close()
   emit('confirm', trimmed, notes.value.trim())
 }
-
-// A click landing on the dialog itself is a click on the backdrop, since the panel covers the
-// whole of the element's own box.
-function onBackdropClick(event: MouseEvent): void {
-  if (event.target === dialogRef.value) close()
-}
 </script>
 
 <template>
-  <dialog
+  <BlueDialog
     ref="dialogRef"
-    class="bluevue-dialog"
-    @close="emit('update:modelValue', false)"
-    @click="onBackdropClick"
+    :model-value="modelValue"
+    :title="title"
+    :subtitle="subtitle"
+    :icon="icon || 'mdi-content-save-outline'"
+    body-class="flex flex-col gap-3 px-5 py-4"
+    @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="bluevue-panel w-[624px] max-w-full rounded-lg text-white">
-      <div class="flex items-start gap-3 px-5 pt-4 pb-3">
-        <span
-          class="mdi mt-[2px] shrink-0 text-[22px] leading-none text-[#42A5F5]"
-          :class="icon || 'mdi-content-save-outline'"
-        />
-        <div class="flex-1 min-w-0">
-          <div class="text-base leading-tight truncate">
-            {{ title }}
-          </div>
-          <div
-            v-if="subtitle"
-            class="text-xs text-[#ffffff88] mt-1 leading-relaxed"
-          >
-            {{ subtitle }}
-          </div>
-        </div>
-        <button
-          type="button"
-          class="cursor-pointer text-[#ffffffaa] transition-colors hover:text-white"
-          title="Close"
-          @click="close"
-        >
-          <span class="mdi mdi-close text-[20px] leading-none" />
-        </button>
-      </div>
-
-      <div class="flex flex-col gap-3 border-t border-[#ffffff0d] px-5 py-4">
-        <BlueInput
-          v-model="name"
-          name="bluevue-prompt-name"
-          :label="label"
-          theme="dark"
-          width="380px"
-          autofocus
-          @keydown.enter="confirm"
-        />
-        <BlueInput
-          v-if="notesLabel"
-          v-model="notes"
-          name="bluevue-prompt-notes"
-          :label="notesLabel"
-          theme="dark"
-          width="380px"
-          @keydown.enter="confirm"
-        />
-      </div>
+    <BlueInput
+      v-model="name"
+      name="bluevue-prompt-name"
+      :label="label"
+      theme="dark"
+      width="380px"
+      autofocus
+      @keydown.enter="confirm"
+    />
+    <BlueInput
+      v-if="notesLabel"
+      v-model="notes"
+      name="bluevue-prompt-notes"
+      :label="notesLabel"
+      theme="dark"
+      width="380px"
+      @keydown.enter="confirm"
+    />
 
-      <div class="flex items-center justify-between gap-3 border-t border-[#ffffff0d] px-5 py-3">
-        <button
-          type="button"
-          class="h-7 shrink-0 cursor-pointer rounded-[4px] bg-[#ffffff11] px-3 text-[13px] font-medium uppercase tracking-wide transition-colors hover:bg-[#ffffff22]"
-          @click="close"
-        >
-          Cancel
-        </button>
-        <span class="flex-1 text-center text-xs text-[#ffffff88]">{{ hint }}</span>
-        <button
-          type="button"
-          :disabled="!name.trim()"
-          class="h-7 shrink-0 rounded-[4px] bg-[var(--bluevue-primary)] px-3 text-[13px] font-medium uppercase tracking-wide transition-colors hover:brightness-125 disabled:cursor-not-allowed disabled:bg-[#9e9e9e80] disabled:text-[#afafaf] disabled:opacity-30 disabled:hover:brightness-100"
-          :class="name.trim() ? 'cursor-pointer' : ''"
-          @click="confirm"
-        >
-          {{ confirmLabel || 'Save' }}
-        </button>
-      </div>
-    </div>
-  </dialog>
+    <template #footer>
+      <BlueButton
+        density="compact"
+        @click="dialogRef?.close()"
+      >
+        Cancel
+      </BlueButton>
+      <span class="flex-1 text-center text-xs text-[#ffffff88]">{{ hint }}</span>
+      <BlueButton
+        variant="filled"
+        density="compact"
+        :disabled="!name.trim()"
+        @click="confirm"
+      >
+        {{ confirmLabel || 'Save' }}
+      </BlueButton>
+    </template>
+  </BlueDialog>
 </template>

package/src/components/BlueRadioGroup.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
+
+/** One of the choices in the group. */
+export interface BlueRadioItem {
+  label: string
+  value: string | number
+  disabled?: boolean
+  /** Why the choice is what it sounds like, or why it is out of reach. */
+  hint?: string
+}
+
+/**
+ * One choice out of a few, each spelled out. Where a BlueButtonGroup packs the options into a
+ * track, this gives every one of them a line of its own, which is what a choice needing an
+ * explanation apiece wants.
+ */
+defineProps<{
+  modelValue: string | number | null
+  items: BlueRadioItem[]
+  /** Name of the group, which is what makes the choices exclusive. */
+  name: string
+  /** Label above the choices. */
+  label?: string
+  /** Lays the choices out along a row instead of down a column. */
+  inline?: boolean
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | number): void
+}>()
+</script>
+
+<template>
+  <fieldset
+    class="w-full min-w-0"
+    :class="disabled ? 'opacity-30' : ''"
+  >
+    <legend
+      v-if="label"
+      class="mb-2 text-[13px]"
+      :class="theme === 'dark' ? 'text-white' : 'text-black'"
+    >
+      {{ label }}
+    </legend>
+
+    <div
+      class="flex"
+      :class="inline ? 'flex-wrap items-center gap-x-5 gap-y-2' : 'flex-col gap-2'"
+    >
+      <label
+        v-for="item in items"
+        :key="item.value"
+        class="flex items-center gap-2"
+        :class="[
+          disabled || item.disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer',
+          theme === 'dark' ? 'text-white' : 'text-black',
+        ]"
+      >
+        <input
+          type="radio"
+          class="peer absolute h-0 w-0 opacity-0"
+          :name="name"
+          :value="item.value"
+          :checked="modelValue === item.value"
+          :disabled="disabled || item.disabled"
+          @change="emit('update:modelValue', item.value)"
+        >
+        <!-- The dot is drawn rather than left to the platform, which paints a radio in its own
+             light colours whatever the surface around it is. -->
+        <span
+          class="flex h-[16px] w-[16px] shrink-0 items-center justify-center rounded-full border transition-colors peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--bluevue-accent)]"
+          :class="modelValue === item.value
+            ? 'border-[var(--bluevue-primary)]'
+            : theme === 'dark' ? 'border-[#ffffff44]' : 'border-[#00000044]'"
+        >
+          <span
+            v-if="modelValue === item.value"
+            class="h-[8px] w-[8px] rounded-full bg-[var(--bluevue-primary)]"
+          />
+        </span>
+
+        <span class="min-w-0 truncate text-[13px]">{{ item.label }}</span>
+
+        <BlueTooltip
+          v-if="item.hint"
+          :text="item.hint"
+          :theme="theme"
+          class="items-center"
+        >
+          <BlueIcon
+            name="mdi-information-outline"
+            :size="14"
+            :label="item.hint"
+            class="opacity-60"
+          />
+        </BlueTooltip>
+      </label>
+    </div>
+  </fieldset>
+</template>

package/src/components/BlueSection.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * A subject inside a panel: a quiet heading over a stack of rows. Smaller than a
+ * BlueExpansiblePanel, which is a section of the page rather than a part of one, and not foldable.
+ */
+defineProps<{
+  title: string
+  /** Space between the rows, in pixels (default 12). */
+  gap?: number
+}>()
+</script>
+
+<template>
+  <section>
+    <div class="mb-2 flex items-center gap-2">
+      <span class="text-[13px] uppercase tracking-wide text-[#ffffff88]">{{ title }}</span>
+      <!-- Notes about the subject sit on its heading line, where they are read before the rows
+           they qualify rather than after them. The rest of the row is theirs. -->
+      <div
+        v-if="$slots.notes"
+        class="min-w-0 flex-1"
+      >
+        <slot name="notes" />
+      </div>
+    </div>
+    <div
+      class="flex flex-col"
+      :style="{ gap: `${gap ?? 12}px` }"
+    >
+      <slot />
+    </div>
+  </section>
+</template>

package/src/components/BlueSelect.vue

@@ -18,20 +18,20 @@
     <div v-else />
     <slot name="insetElement" />
 
-    <div
+    <BlueTooltip
       v-if="infoTooltip"
-      class="relative group inline-flex items-center shrink-0 mr-2 ml-auto"
+      :text="infoTooltip"
+      :theme="theme"
+      class="items-center shrink-0 mr-2 ml-auto"
     >
-      <span
-        class="mdi mdi-information-outline text-[16px] opacity-60 cursor-help"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+      <BlueIcon
+        name="mdi-information-outline"
+        :size="16"
+        :label="infoTooltip"
+        class="cursor-help"
+        :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
       />
-      <div
-        class="absolute bottom-full mb-1 right-0 hidden group-hover:block w-max max-w-[280px] px-2 py-1 text-xs rounded bg-gray-700 text-white z-[1000]"
-      >
-        {{ infoTooltip }}
-      </div>
-    </div>
+    </BlueTooltip>
 
     <div class="flex flex-col items-end min-w-0 shrink-[1000]">
       <button
@@ -112,6 +112,8 @@
 import { computed, ref, watch } from 'vue'
 
 import { useBluePopover } from '../composables/useBluePopover'
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
 
 /**
  * Option in the select

package/src/components/BlueSlider.vue

@@ -13,9 +13,7 @@
         :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
       >{{ label }}</label>
     </div>
-    <!-- Shrinks far more eagerly than the label, so a tight row narrows the track first and
-         only ellipsizes the label once the track is down to its floor. -->
-    <div class="flex justify-between items-center min-w-0 shrink-[1000]">
+    <div class="flex w-1/2 min-w-0 items-center justify-between">
       <div
         name="slider-track"
         class="relative overflow-visible rounded-[6px] bluevue-elevation-1 min-w-[140px] max-w-full"

package/src/components/BlueSnackbar.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { type BlueNoticeSeverity, useBlueSnackbar } from '../composables/useBlueSnackbar'
+import BlueButton from './BlueButton.vue'
+import BlueIcon from './BlueIcon.vue'
+
+/**
+ * Puts the application's notices on screen, newest nearest the edge. Mount it once, at the root;
+ * BlueApp already does. Raising a notice is useBlueSnackbar's job, from wherever it happened.
+ */
+const props = defineProps<{
+  /** Which corner they gather in (default 'bottom-right'). */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+}>()
+
+const { notices, dismiss } = useBlueSnackbar()
+
+const LOOK: Record<BlueNoticeSeverity, { icon: string; color: string }> = {
+  success: { icon: 'mdi-check-circle-outline', color: '#66BB6A' },
+  error: { icon: 'mdi-alert-circle-outline', color: 'var(--bluevue-error)' },
+  warning: { icon: 'mdi-alert-outline', color: '#FFB74D' },
+  info: { icon: 'mdi-information-outline', color: '#42A5F5' },
+}
+
+const corner = computed(() => {
+  switch (props.position) {
+    case 'bottom-left':
+      return 'bottom-4 left-4 items-start'
+    case 'top-right':
+      return 'top-4 right-4 items-end'
+    case 'top-left':
+      return 'top-4 left-4 items-start'
+    default:
+      return 'bottom-4 right-4 items-end'
+  }
+})
+
+// Newest nearest the edge the stack grows from, so the one that just arrived is where the eye
+// already is.
+const stacked = computed(() => (props.position?.startsWith('top') ? [...notices.value].reverse() : notices.value))
+</script>
+
+<template>
+  <div
+    class="pointer-events-none fixed z-[2000] flex max-w-[min(90vw,420px)] flex-col gap-2"
+    :class="corner"
+    role="status"
+    aria-live="polite"
+  >
+    <TransitionGroup name="bluevue-notice">
+      <div
+        v-for="notice in stacked"
+        :key="notice.id"
+        class="bluevue-panel pointer-events-auto flex items-center gap-3 rounded-[6px] py-2 pl-3 pr-2 text-white"
+      >
+        <BlueIcon
+          :name="LOOK[notice.severity].icon"
+          :size="18"
+          :color="LOOK[notice.severity].color"
+        />
+        <span class="min-w-0 flex-1 text-[13px] leading-snug">
+          {{ notice.text }}
+          <span
+            v-if="notice.repeats > 1"
+            class="text-[#ffffff88]"
+          >(×{{ notice.repeats }})</span>
+        </span>
+        <BlueButton
+          variant="icon"
+          density="compact"
+          icon="mdi-close"
+          tooltip="Dismiss"
+          @click="dismiss(notice.id)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>