@bluerobotics/bluevue 0.1.0

package/src/components/BlueInput.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="flex w-full justify-between items-center">
+    <!-- shrink-0 keeps the label at its natural width: letting flex shrink it by the fraction
+         of a pixel that rounding introduces is enough for Chromium to ellipsize a label that
+         fits. The cap is what makes an outsized label ellipsize instead of eating the row. -->
+    <div
+      v-if="label"
+      class="min-w-0 max-w-[45%] shrink-0"
+    >
+      <label
+        :for="name"
+        class="block truncate text-start mr-6"
+        :title="label"
+        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+      >
+        {{ label }}
+      </label>
+    </div>
+    <div v-else />
+    <slot name="insetElement" />
+
+    <div
+      v-if="infoTooltip"
+      class="relative group inline-flex 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'"
+      />
+      <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>
+
+    <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
+           the well rather than part of its floor. That drops the centre the value looks centred
+           against by part of that band, which the top padding pushes the content down to meet. It
+           is set inline because a host reset can beat the equivalent utility class, as Vuetify's
+           does. -->
+      <div
+        class="relative flex items-center rounded-[6px] bluevue-inset-1 min-w-[90px] max-w-full"
+        :class="[
+          disabled ? 'opacity-30 pointer-events-none' : '',
+          hasError ? 'border-2 border-solid border-[var(--bluevue-error)]' : '',
+        ]"
+        :style="{
+          height: height || '30px',
+          width: width || 'auto',
+          backgroundColor: fieldBackground,
+          paddingTop: '2px',
+        }"
+      >
+        <!-- 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. -->
+        <input
+          :id="name"
+          ref="inputRef"
+          :name="name"
+          type="text"
+          :value="draft"
+          :placeholder="placeholder"
+          :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="[
+            suffix ? 'pr-1' : 'pr-4',
+            theme === 'dark' ? 'text-white placeholder:text-[#ffffff44]' : 'text-black placeholder:text-[#00000055]',
+          ]"
+          @input="onInput"
+          @keydown.up.prevent="nudge(1)"
+          @keydown.down.prevent="nudge(-1)"
+          @focus="focused = true"
+          @blur="onBlur"
+          @keydown.enter="normalize"
+        >
+        <span
+          v-if="suffix"
+          class="shrink-0 pr-4 pl-1 text-sm select-none"
+          :class="[
+            theme === 'dark' ? 'text-[#ffffff66]' : 'text-[#00000066]',
+            suffixRidesHigh ? 'translate-y-[0.22em]' : '',
+          ]"
+        >
+          {{ suffix }}
+        </span>
+        <!-- Focus reads as a hairline in the accent blue rather than a browser outline, so a
+             focused field sits at the same weight as a selected button group segment. It rides
+             on its own layer so the border costs the field no height. -->
+        <div
+          class="pointer-events-none absolute inset-0 rounded-[6px]"
+          :style="{ border: `1px solid ${focused ? 'var(--bluevue-accent)' : 'transparent'}` }"
+        />
+      </div>
+      <div
+        v-if="hasError"
+        class="text-[14px] text-[var(--bluevue-error)]"
+      >
+        {{ (errorMessages?.[0]) || '' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  /**
+   * Model value for v-model. A 'number' field emits numbers and never emits an empty value:
+   * clearing it leaves the last number in place until a new one is typed.
+   */
+  modelValue: string | number | null
+  /** Label on the left */
+  label?: string
+  /** Name and id for the input, tying the label to it */
+  name?: string
+  /** 'text' (default) or 'number' */
+  type?: 'text' | 'number'
+  /** Unit or short hint shown inside the field, after the value */
+  suffix?: string
+  /** Placeholder shown while the field is empty */
+  placeholder?: string
+  /**
+   * Take focus when the field appears. The attribute is what a dialog opening around the field
+   * honours, and the call below covers a field mounted into something already on screen.
+   */
+  autofocus?: boolean
+  /** Disable the field */
+  disabled?: boolean
+  /** light or dark theme */
+  theme?: 'light' | 'dark'
+  /** Control height (default '30px') */
+  height?: string
+  /** Control width (default fits the content) */
+  width?: string
+  /** Optional info tooltip shown via an info icon next to the control. */
+  infoTooltip?: string
+  /** Bounds and increment, forwarded to a number input */
+  min?: number
+  max?: number
+  step?: number
+  /** Error messages, used to give feedback from validators */
+  errorMessages?: string[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void
+}>()
+
+const hasError = computed(() => props.errorMessages && props.errorMessages.length > 0)
+
+// Degree and its relatives are cut at cap height, so on the baseline the value sits on their ink
+// lands near the top of the field. That is right against a number ('27°') but reads as floating
+// when the mark stands alone at the far edge, so it drops to the optical centre. Word suffixes
+// keep the shared baseline, which is where they belong.
+const suffixRidesHigh = computed(() => /^[°′″'"]+$/.test(props.suffix ?? ''))
+
+// Applied inline so it survives a host stylesheet whose reset is unlayered, as Vuetify's is:
+// utilities sit in a cascade layer, and unlayered rules win over layered ones outright.
+const fieldBackground = computed(() => (props.theme === 'dark' ? '#FFFFFF11' : '#00000011'))
+
+// Everything a number can look like on the way to being one, including the stages that are
+// not a number yet: '', '-', '-27.'.
+const PARTIAL_NUMBER = /^-?\d*\.?\d*$/
+
+const format = (value: string | number | null): string =>
+  value === null || value === undefined ? '' : String(value)
+
+// What the field shows, kept apart from the model so a half-typed number stays on screen
+// instead of being rewritten by the parent on every keystroke.
+const draft = ref<string>(format(props.modelValue))
+const inputRef = ref<HTMLInputElement | null>(null)
+const focused = ref(false)
+
+onMounted(() => {
+  if (props.autofocus) inputRef.value?.focus()
+})
+
+const parse = (raw: string): string | number | null => {
+  if (props.type !== 'number') return raw
+  if (raw.trim() === '') return null
+  const value = Number(raw)
+  return Number.isFinite(value) ? value : null
+}
+
+const clamp = (value: number): number => {
+  const low = props.min !== undefined ? Math.max(value, props.min) : value
+  return props.max !== undefined ? Math.min(low, props.max) : low
+}
+
+const onInput = (event: Event): void => {
+  const input = event.target as HTMLInputElement
+  if (props.type === 'number' && !PARTIAL_NUMBER.test(input.value)) {
+    // Nothing a number could grow into, so the keystroke never happened.
+    input.value = draft.value
+    return
+  }
+  draft.value = input.value
+  const parsed = parse(draft.value)
+  // An emptied or half-typed number field is a value being rewritten, not a value of none, so
+  // the model keeps the last real number until a new one is typed. Blur puts it back on screen.
+  if (parsed === null && props.type === 'number') return
+  emit('update:modelValue', parsed)
+}
+
+// Arrow keys walk a number field by its step, the way the spinners this control hides would.
+const nudge = (direction: number): void => {
+  if (props.type !== 'number' || props.disabled) return
+  const step = props.step ?? 1
+  const current = typeof props.modelValue === 'number' ? props.modelValue : Number(draft.value) || 0
+  const decimals = (String(step).split('.')[1] ?? '').length
+  const next = clamp(Number((current + direction * step).toFixed(decimals)))
+  draft.value = String(next)
+  emit('update:modelValue', next)
+}
+
+// On the way out, show the value the way the model holds it: '-27.5630' becomes '-27.563',
+// anything that never parsed goes back to the last good value, and a number outside its
+// bounds is pulled back in rather than silently applied.
+const normalize = (): void => {
+  if (props.type === 'number' && typeof props.modelValue === 'number') {
+    const bounded = clamp(props.modelValue)
+    if (bounded !== props.modelValue) {
+      emit('update:modelValue', bounded)
+      draft.value = String(bounded)
+      return
+    }
+  }
+  draft.value = format(props.modelValue)
+}
+
+const onBlur = (): void => {
+  focused.value = false
+  normalize()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (parse(draft.value) !== value) draft.value = format(value)
+  },
+)
+</script>

package/src/components/BlueLoadingDialog.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
+import logo from '../assets/br-logo-white.svg'
+
+/**
+ * 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<{
+  modelValue: boolean
+  /** What the operation is, shown under the propeller. */
+  message?: string
+  /** Offers a close button and lets Escape through, for a wait the user may walk away from. */
+  dismissible?: boolean
+}>()
+
+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"
+  >
+    <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>
+</template>

package/src/components/BlueMenu.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+
+import { useBluePopover } from '../composables/useBluePopover'
+
+/**
+ * A dropdown of actions, opened either from the activator slot or, with `target`, at a pointer
+ * position, which is what a right-click or a long press wants. Pass `target` to place it at a
+ * point; leave it out and the activator slot decides where it hangs.
+ */
+export interface BlueMenuItem {
+  title: string
+  icon: string
+  /** Renders in the warning colour, for the items that remove something. */
+  danger?: boolean
+  disabled?: boolean
+  /** Shown on hover, to say why an item is disabled. */
+  hint?: string
+  action: () => void
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  items: BlueMenuItem[]
+  target?: [number, number]
+}>()
+
+const emit = defineEmits<{ (event: 'update:modelValue', value: boolean): void }>()
+
+const {
+  anchorRef,
+  popoverRef,
+  popoverId,
+  activatorProps,
+  isOpen,
+  isPositioned,
+  floatingStyles,
+  show,
+  hide,
+  onToggle,
+} = useBluePopover()
+
+// The activator opens the menu through the browser, so the model follows the menu as well as
+// driving it: this keeps the two in step whichever of them moved first.
+watch(isOpen, (open) => emit('update:modelValue', open))
+
+watch(
+  () => [props.modelValue, props.target] as const,
+  ([open, target]) => {
+    if (open) show(target)
+    else hide()
+  },
+  { immediate: true }
+)
+
+function runItem(item: BlueMenuItem): void {
+  hide()
+  item.action()
+}
+</script>
+
+<template>
+  <span
+    v-if="!target"
+    ref="anchorRef"
+    class="inline-flex"
+  >
+    <slot
+      name="activator"
+      :props="activatorProps"
+    />
+  </span>
+
+  <div
+    :id="popoverId"
+    ref="popoverRef"
+    popover
+    class="bluevue-popover"
+    :style="floatingStyles"
+    @toggle="onToggle"
+  >
+    <ul
+      class="bluevue-elevation-5 min-w-[220px] max-h-[60vh] overflow-y-auto rounded-[4px] border border-[#ffffff1a] bg-[#2d2d2d]"
+      :class="isPositioned ? 'opacity-100' : 'opacity-0'"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="item.title"
+      >
+        <div
+          v-if="index"
+          class="h-px bg-[#ffffff0d]"
+        />
+        <button
+          type="button"
+          :disabled="item.disabled"
+          class="flex w-full items-start gap-3 px-4 py-2 text-left"
+          :class="[
+            item.danger ? 'text-[#ff6b6b]' : 'text-white',
+            item.disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-[#ffffff11]',
+          ]"
+          @click="runItem(item)"
+        >
+          <span
+            class="mdi shrink-0 mt-[2px] text-[18px] leading-none"
+            :class="item.icon"
+          />
+          <span class="min-w-0">
+            <span class="block text-[13px] leading-snug">{{ item.title }}</span>
+            <span
+              v-if="item.hint"
+              class="block text-[10px] text-[#ffffff66]"
+            >{{ item.hint }}</span>
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/BluePromptDialog.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
+import BlueInput from './BlueInput.vue'
+
+/**
+ * Asks for a name, and optionally a note to go with it: icon and title over a subtitle, the
+ * fields in their own section, then a footer whose middle explains what the buttons will do.
+ */
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+  /** Field label for the name. */
+  label: string
+  icon?: string
+  /** Explains what the name will be attached to. */
+  subtitle?: string
+  initial?: string
+  /** When given, a second optional field is shown and its value comes back with the name. */
+  notesLabel?: string
+  notesInitial?: string
+  confirmLabel?: string
+  /** Footer text, for anything worth saying about the outcome rather than the input. */
+  hint?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'confirm', name: string, notes: string): void
+}>()
+
+const name = ref(props.initial ?? '')
+const notes = ref(props.notesInitial ?? '')
+const dialogRef = ref<HTMLDialogElement | 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()
+  }
+)
+
+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()
+  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
+    ref="dialogRef"
+    class="bluevue-dialog"
+    @close="emit('update:modelValue', false)"
+    @click="onBackdropClick"
+  >
+    <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>
+
+      <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>