@bluerobotics/bluevue 0.1.0 → 0.2.0

package/src/components/BlueSpinner.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * A turning ring, for a wait with no measure to it. A wait that does have one belongs in a
+ * BlueProgressBar, and one that blocks the whole page in a BlueLoadingDialog.
+ */
+const props = defineProps<{
+  /** Diameter, in pixels when given as a number (default 20). */
+  size?: number | string
+  /** The colour of the arc that turns (default the accent token). */
+  color?: string
+  /** Ring thickness in pixels (default 2). */
+  width?: number
+  /** What is being waited for, read out by assistive technology. */
+  label?: string
+}>()
+
+const box = computed(() => {
+  const size = props.size ?? 20
+  return typeof size === 'number' ? `${size}px` : size
+})
+</script>
+
+<template>
+  <span
+    class="bluevue-spinner"
+    role="status"
+    :aria-label="label"
+    :style="{
+      width: box,
+      height: box,
+      borderWidth: `${width ?? 2}px`,
+      borderTopColor: color,
+    }"
+  />
+</template>

package/src/components/BlueStat.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * One read-only fact about the vehicle: a quiet label over its value. Meant to sit in a row of
+ * them, each taking an equal share of the width and wrapping to the next line when there is none.
+ */
+defineProps<{
+  label: string
+  value?: string | number | null
+  /** What to show when there is no value yet (default an em dash). */
+  placeholder?: string
+}>()
+</script>
+
+<template>
+  <div class="bluevue-elevation-1 min-w-[120px] flex-1 rounded-[6px] bg-[#00000022] px-3 py-2">
+    <div class="truncate text-[11px] uppercase tracking-wide text-[#ffffff66]">
+      {{ label }}
+    </div>
+    <div
+      class="truncate text-sm text-white"
+      :title="value === null || value === undefined || value === '' ? undefined : String(value)"
+    >
+      {{ value === null || value === undefined || value === '' ? placeholder ?? '—' : value }}
+    </div>
+  </div>
+</template>

package/src/components/BlueStepsDialog.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
+
+import BlueDialog from './BlueDialog.vue'
+import BlueIcon from './BlueIcon.vue'
+import BlueProgressBar from './BlueProgressBar.vue'
+
+/** One stage of the work, in the order it runs. */
+export interface BlueStep {
+  key: string
+  title: string
+  state: 'pending' | 'running' | 'done' | 'failed' | 'skipped'
+  /** What the step is doing, or why it failed. */
+  detail?: string
+}
+
+/**
+ * Reports on work with stages to it: installing firmware, writing parameters, restarting. The
+ * dialog holds the page while the work is running and lets go the moment it is not, so a run that
+ * ends in a failure can be read, retried or skipped from the footer.
+ */
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+  /** What the current stage is doing, under the title. */
+  subtitle?: string
+  /** Running holds the page; the other two release it. */
+  state: 'running' | 'failed' | 'done'
+  steps: BlueStep[]
+  /** The line above the bar, naming what is being worked through. */
+  progressLabel?: string
+  /** Percentage of the current stage, when the stage can count itself. */
+  progress?: number
+  /** For a stage that can only say it is waiting, such as a restart. */
+  indeterminate?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const slots = useSlots()
+
+// The step icons and the connectors between them share this height, which is what puts the line
+// on the icons' centre line.
+const STEP_ICON_SIZE = 22
+
+const STEP_STYLE = {
+  pending: { icon: 'mdi-circle-outline', color: '#ffffff44' },
+  running: { icon: 'mdi-progress-clock', color: '#42A5F5' },
+  done: { icon: 'mdi-check-circle', color: '#66BB6A' },
+  failed: { icon: 'mdi-alert-circle', color: '#EF5350' },
+  skipped: { icon: 'mdi-minus-circle-outline', color: '#ffffff44' },
+} as const
+
+const HEAD = {
+  running: { icon: 'mdi-cog-sync', color: '#42A5F5' },
+  failed: { icon: 'mdi-alert-circle', color: '#EF5350' },
+  done: { icon: 'mdi-check-circle', color: '#66BB6A' },
+} as const
+
+const head = computed(() => HEAD[props.state])
+
+const hasProgress = computed(() => props.progress !== undefined || props.indeterminate || Boolean(slots.log))
+
+const logRef = ref<HTMLElement | null>(null)
+let logObserver: MutationObserver | null = null
+
+// Follows the tail as records arrive, but only while the reader is already there: someone who has
+// scrolled up to read an earlier line is reading it, and yanking them back down is not help.
+const followLog = (): void => {
+  const el = logRef.value
+  if (!el) return
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) el.scrollTop = el.scrollHeight
+}
+
+watch(logRef, (el) => {
+  logObserver?.disconnect()
+  logObserver = null
+  if (!el) return
+  logObserver = new MutationObserver(followLog)
+  logObserver.observe(el, { childList: true, subtree: true, characterData: true })
+})
+
+onBeforeUnmount(() => logObserver?.disconnect())
+</script>
+
+<template>
+  <BlueDialog
+    :model-value="modelValue"
+    :persistent="state === 'running'"
+    width="620px"
+    body-class="px-5 pb-4 pt-3"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <BlueIcon
+        :name="head.icon"
+        :size="22"
+        :color="head.color"
+        class="mt-[2px]"
+      />
+      <div class="min-w-0 flex-1">
+        <div class="truncate text-base leading-tight">
+          {{ title }}
+        </div>
+        <div
+          v-if="subtitle"
+          class="mt-1 truncate text-xs text-[#ffffff88]"
+        >
+          {{ subtitle }}
+        </div>
+      </div>
+    </template>
+
+    <div class="flex items-start">
+      <template
+        v-for="(step, index) in steps"
+        :key="step.key"
+      >
+        <div
+          v-if="index"
+          class="flex flex-1 items-center"
+          :style="{ height: `${STEP_ICON_SIZE}px` }"
+        >
+          <div class="h-px w-full bg-[#ffffff1a]" />
+        </div>
+        <!-- Wide enough for the longest step title to stay on one line before the ellipsis. -->
+        <div class="flex w-[84px] shrink-0 flex-col items-center gap-1">
+          <BlueIcon
+            :name="STEP_STYLE[step.state].icon"
+            :size="STEP_ICON_SIZE"
+            :color="STEP_STYLE[step.state].color"
+          />
+          <span
+            class="w-full truncate text-center text-[10px] leading-tight"
+            :title="step.detail || step.title"
+            :class="step.state === 'running' ? 'text-white' : 'text-[#ffffff77]'"
+          >
+            {{ step.title }}
+          </span>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="hasProgress"
+      class="mt-4 border-t border-[#ffffff0d] pt-4"
+    >
+      <div class="mb-2 flex items-baseline justify-between">
+        <span class="truncate text-xs text-[#ffffffcc]">{{ progressLabel }}</span>
+        <div class="flex shrink-0 gap-2 pl-3">
+          <slot name="badges" />
+        </div>
+      </div>
+
+      <BlueProgressBar
+        :model-value="progress ?? 100"
+        :indeterminate="indeterminate && state === 'running'"
+        :color="state === 'failed' ? 'var(--bluevue-error)' : undefined"
+        :label="progressLabel"
+      />
+
+      <div
+        v-if="slots.log"
+        ref="logRef"
+        class="mt-3 max-h-[220px] overflow-y-auto rounded-[6px] bg-[#00000033] px-3 py-2 font-mono text-[11px]"
+      >
+        <slot name="log" />
+      </div>
+    </div>
+
+    <template
+      v-if="slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+  </BlueDialog>
+</template>

package/src/components/BlueSwitch.vue

@@ -14,20 +14,20 @@
       >{{ label }}</label>
     </div>
     <div class="flex items-center min-w-0 shrink-[1000]">
-      <div
+      <BlueTooltip
         v-if="infoTooltip"
-        class="relative group inline-flex items-center shrink-0 mr-2"
+        :text="infoTooltip"
+        :theme="theme"
+        class="items-center shrink-0 mr-2"
       >
-        <span
-          class="mdi mdi-information-outline text-[16px] opacity-60 cursor-help"
+        <BlueIcon
+          name="mdi-information-outline"
+          :size="16"
+          :label="infoTooltip"
+          class="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>
+      </BlueTooltip>
       <!-- Both labels are laid out rather than drawn over: two equal columns take their width
            from the longer of the two, so the track grows to whatever it has to say and the knob
            covering either side has the same room. -->
@@ -45,16 +45,16 @@
             backgroundColor: modelValue ? color || 'var(--bluevue-primary)' : '#777777',
           }"
         />
-        <!-- 6px, of which the knob's 2px inset takes the first two: what is left is the 4px the
+        <!-- 9px, of which the knob's 2px inset takes the first two: what is left is the 7px the
              label keeps from the knob's edge. -->
         <span
-          class="relative flex items-center justify-center px-[6px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
+          class="relative flex items-center justify-center px-[9px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
           :class="labelClass(!modelValue)"
         >
           {{ labelOff || 'Off' }}
         </span>
         <span
-          class="relative flex items-center justify-center px-[6px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
+          class="relative flex items-center justify-center px-[9px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
           :class="labelClass(modelValue)"
         >
           {{ labelOn || 'On' }}
@@ -67,6 +67,9 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
+
 const props = defineProps<{
   /** Color of the switch's knob when it is on. */
   color?: string

package/src/components/BlueTable.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import BlueIcon from './BlueIcon.vue'
+
+/** One column of the table. */
+export interface BlueColumn {
+  /** The field it reads from each row, and the name of its cell slot. */
+  key: string
+  title: string
+  width?: string
+  align?: 'start' | 'center' | 'end'
+  /** Lets the header be pressed to order the rows by this column. */
+  sortable?: boolean
+}
+
+/**
+ * Rows of records under a header that stays put while they scroll. Sorting is its own, so a
+ * consumer hands it a list and gets an ordered table without keeping the order itself.
+ */
+const props = defineProps<{
+  columns: BlueColumn[]
+  rows: Record<string, unknown>[]
+  /** The field that identifies a row. Falls back to the row's place in the list. */
+  rowKey?: string
+  /** Column to order by before anyone presses a header. */
+  sortBy?: string
+  /** How tall the body may get before it scrolls under its header. */
+  maxHeight?: string
+  /** Tighter rows, for a table of many short ones. */
+  dense?: boolean
+  /** What to say instead of an empty body. */
+  emptyText?: string
+  theme?: 'light' | 'dark'
+}>()
+
+defineEmits<{
+  (event: 'row-click', row: Record<string, unknown>): void
+}>()
+
+const sortKey = ref(props.sortBy ?? '')
+const sortDesc = ref(false)
+
+const toggleSort = (column: BlueColumn): void => {
+  if (!column.sortable) return
+  if (sortKey.value === column.key) {
+    sortDesc.value = !sortDesc.value
+    return
+  }
+  sortKey.value = column.key
+  sortDesc.value = false
+}
+
+// Numbers compare as numbers and everything else as text, which is what keeps 9 above 10 from
+// happening in a column of counts. Absent values sink, since a row missing the field it is being
+// ordered by has nothing to say about where it belongs.
+const compare = (a: unknown, b: unknown): number => {
+  if (a == null) return b == null ? 0 : 1
+  if (b == null) return -1
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b), undefined, { numeric: true })
+}
+
+const sorted = computed(() => {
+  if (!sortKey.value) return props.rows
+  const direction = sortDesc.value ? -1 : 1
+  return [...props.rows].sort((a, b) => direction * compare(a[sortKey.value], b[sortKey.value]))
+})
+
+const alignment = (column: BlueColumn): string =>
+  column.align === 'end' ? 'text-end' : column.align === 'center' ? 'text-center' : 'text-start'
+</script>
+
+<template>
+  <div
+    class="w-full overflow-auto rounded-[6px]"
+    :class="theme === 'light' ? 'bg-[#00000006]' : 'bg-[#ffffff08]'"
+    :style="{ maxHeight }"
+  >
+    <table class="w-full border-collapse text-[13px]">
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            scope="col"
+            class="sticky top-0 z-[1] whitespace-nowrap border-b px-3 py-2 text-[11px] font-medium uppercase tracking-wide backdrop-blur-sm"
+            :class="[
+              alignment(column),
+              column.sortable ? 'cursor-pointer select-none' : '',
+              theme === 'light'
+                ? 'border-[#00000014] bg-[#f5f5f5cc] text-[#00000088]'
+                : 'border-[#ffffff14] bg-[#1e1e1ecc] text-[#ffffff88]',
+            ]"
+            :style="{ width: column.width }"
+            :aria-sort="sortKey === column.key ? (sortDesc ? 'descending' : 'ascending') : undefined"
+            @click="toggleSort(column)"
+          >
+            <span class="inline-flex items-center gap-1">
+              {{ column.title }}
+              <BlueIcon
+                v-if="column.sortable"
+                :name="sortKey === column.key ? (sortDesc ? 'mdi-arrow-down' : 'mdi-arrow-up') : 'mdi-arrow-up-down'"
+                :size="12"
+                :class="sortKey === column.key ? '' : 'opacity-30'"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="(row, index) in sorted"
+          :key="String(rowKey ? row[rowKey] : index)"
+          class="transition-colors"
+          :class="theme === 'light' ? 'hover:bg-[#0000000a]' : 'hover:bg-[#ffffff0a]'"
+          @click="$emit('row-click', row)"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            class="border-b px-3"
+            :class="[
+              alignment(column),
+              dense ? 'py-1' : 'py-2',
+              theme === 'light' ? 'border-[#0000000a] text-black' : 'border-[#ffffff0a] text-white',
+            ]"
+          >
+            <slot
+              :name="`cell-${column.key}`"
+              :row="row"
+              :value="row[column.key]"
+            >
+              {{ row[column.key] ?? '—' }}
+            </slot>
+          </td>
+        </tr>
+
+        <tr v-if="sorted.length === 0">
+          <td
+            :colspan="columns.length"
+            class="px-3 py-6 text-center text-[13px]"
+            :class="theme === 'light' ? 'text-[#00000066]' : 'text-[#ffffff66]'"
+          >
+            <slot name="empty">
+              {{ emptyText ?? 'Nothing here yet.' }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/BlueTabs.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import BlueChip from './BlueChip.vue'
+import BlueIcon from './BlueIcon.vue'
+
+/** One tab in the strip. */
+export interface BlueTab {
+  /** What comes back through v-model when it is chosen. */
+  value: string | number
+  label: string
+  icon?: string
+  disabled?: boolean
+  /** A count beside the label, such as how many things the tab holds. */
+  badge?: string | number
+}
+
+/**
+ * The strip that switches between the pages of a view. It reports which tab is current and
+ * nothing else: what each one shows is the consumer's, since a tab that renders its page only
+ * when it is current is what keeps the ones behind it from doing work.
+ */
+defineProps<{
+  modelValue: string | number
+  tabs: BlueTab[]
+  /** Fills the width it is given, each tab taking an equal share. */
+  stretch?: boolean
+  theme?: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | number): void
+}>()
+</script>
+
+<template>
+  <div
+    class="flex items-stretch gap-1 border-b"
+    :class="theme === 'light' ? 'border-[#00000014]' : 'border-[#ffffff14]'"
+    role="tablist"
+  >
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      type="button"
+      role="tab"
+      :aria-selected="modelValue === tab.value"
+      :disabled="tab.disabled"
+      class="relative flex items-center justify-center gap-2 whitespace-nowrap px-3 pb-2 pt-[6px] text-[13px] font-medium transition-colors"
+      :class="[
+        stretch ? 'flex-1' : '',
+        tab.disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer',
+        modelValue === tab.value
+          ? theme === 'light' ? 'text-black' : 'text-white'
+          : theme === 'light' ? 'text-[#00000088] hover:text-black' : 'text-[#ffffff88] hover:text-white',
+      ]"
+      @click="emit('update:modelValue', tab.value)"
+    >
+      <BlueIcon
+        v-if="tab.icon"
+        :name="tab.icon"
+        :size="16"
+      />
+      <span class="min-w-0 truncate">{{ tab.label }}</span>
+      <BlueChip
+        v-if="tab.badge !== undefined"
+        size="small"
+        :label="String(tab.badge)"
+      />
+
+      <!-- The underline sits on the strip's own border rather than beside it, so the current tab
+           reads as continuous with what it opens onto. -->
+      <span
+        v-if="modelValue === tab.value"
+        class="absolute inset-x-0 -bottom-px h-[2px] rounded-full bg-[var(--bluevue-accent)]"
+      />
+    </button>
+  </div>
+</template>

package/src/components/BlueTextarea.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
+
+/**
+ * A BlueInput with room for several lines: the same well cut into the panel, for a note, a
+ * description, or a block of parameters pasted in.
+ */
+const props = defineProps<{
+  modelValue: string | null
+  /** Label above the field, since a multi-line field beside its label leaves the label floating. */
+  label?: string
+  /** Name and id, tying the label to the field. */
+  name?: string
+  placeholder?: string
+  /** Lines of room it starts with (default 4). */
+  rows?: number
+  /** Grows with its content instead of scrolling, up to maxRows. */
+  autoGrow?: boolean
+  /** How far autoGrow goes before the field starts scrolling (default 12). */
+  maxRows?: number
+  disabled?: boolean
+  /** Validation messages, which also outline the field. */
+  errorMessages?: string[]
+  /** A hint behind an info icon beside the label. */
+  infoTooltip?: string
+  width?: string
+  theme?: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const hasError = computed(() => (props.errorMessages?.length ?? 0) > 0)
+
+// A grown field is as tall as its content, which is the line count it would need, capped so a
+// pasted log does not push the rest of the panel off the page.
+const rows = computed(() => {
+  if (!props.autoGrow) return props.rows ?? 4
+  const lines = (props.modelValue ?? '').split('\n').length
+  return Math.min(Math.max(lines, props.rows ?? 4), props.maxRows ?? 12)
+})
+</script>
+
+<template>
+  <div
+    class="flex w-full min-w-0 flex-col"
+    :style="{ width }"
+  >
+    <div
+      v-if="label"
+      class="mb-1 flex items-center gap-2"
+    >
+      <label
+        :for="name"
+        class="min-w-0 truncate text-[13px]"
+        :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
+      >{{ label }}</label>
+      <BlueTooltip
+        v-if="infoTooltip"
+        :text="infoTooltip"
+        :theme="theme"
+        class="items-center"
+      >
+        <BlueIcon
+          name="mdi-information-outline"
+          :size="16"
+          :label="infoTooltip"
+          class="opacity-60 cursor-help"
+        />
+      </BlueTooltip>
+    </div>
+
+    <textarea
+      :id="name"
+      :name="name"
+      :rows="rows"
+      :value="modelValue ?? ''"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="bluevue-inset-1 w-full resize-y rounded-[6px] px-3 py-2 text-sm outline-none transition-colors focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-[var(--bluevue-accent)]"
+      :class="[
+        theme === 'dark' ? 'bg-[#ffffff11] text-white placeholder:text-[#ffffff55]' : 'bg-[#00000008] text-black placeholder:text-[#00000055]',
+        disabled ? 'pointer-events-none opacity-30' : '',
+        hasError ? 'outline outline-2 outline-[var(--bluevue-error)]' : '',
+      ]"
+      @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+
+    <span
+      v-for="message in errorMessages ?? []"
+      :key="message"
+      class="mt-1 text-[11px] text-[var(--bluevue-error)]"
+    >
+      {{ message }}
+    </span>
+  </div>
+</template>