@bluerobotics/bluevue 0.1.0 → 0.2.0

package/src/components/BlueButtonGroup.vue

@@ -22,20 +22,20 @@
     <!-- Shrinks far more eagerly than the label, so a tight row ellipsizes the button names
          before it starts eating into the label. -->
     <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>
       <div
         ref="trackRef"
         class="relative flex min-w-0 justify-end overflow-hidden rounded-[6px] bluevue-elevation-1 z-[666]"
@@ -76,21 +76,21 @@
             @pointerleave="cancelLongPress"
             @pointercancel="cancelLongPress"
           >
-            <div class="relative group inline-block min-w-0">
-              <p
+            <BlueTooltip
+              :text="btn.tooltip || ''"
+              :theme="theme"
+              class="min-w-0"
+            >
+              <!-- A span rather than a paragraph: this is one line inside a button, and a
+                   paragraph brings margins of its own wherever the host page has no reset. -->
+              <span
                 data-bbg-label
-                class="truncate"
+                class="block truncate"
                 :class="[density === 'compact' ? 'text-[10px]' : 'text-xs', isWide ? 'max-w-[150px]' : '']"
               >
                 {{ btn.name }}
-              </p>
-              <div
-                v-if="btn.tooltip"
-                class="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 hidden group-hover:block whitespace-no-wrap px-2 py-1 text-xs rounded bg-gray-700 text-white"
-              >
-                {{ btn.tooltip }}
-              </div>
-            </div>
+              </span>
+            </BlueTooltip>
           </button>
           <div
             v-if="idx < buttonItems.length - 1"
@@ -156,6 +156,8 @@
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { useBluePopover } from '../composables/useBluePopover'
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
 
 /**
  * One button in the group
@@ -244,9 +246,9 @@ let longPressFired = false
 // The inset each density gives a button name, paired with the total width it costs so the
 // measurements below can reason about the group without reading it back from the DOM.
 const DENSITY_PADDING = {
-  compact: { class: 'px-2', total: 16 },
-  regular: { class: 'px-3', total: 24 },
-  comfortable: { class: 'px-4', total: 32 },
+  compact: { class: 'px-[11px]', total: 22 },
+  regular: { class: 'px-[15px]', total: 30 },
+  comfortable: { class: 'px-[19px]', total: 38 },
 } as const
 
 // Once the buttons' natural width would exceed this, cap each label so long names

package/src/components/BlueCard.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import BlueIcon from './BlueIcon.vue'
+
+/**
+ * The sheet an extension's page is laid out on: a titled bar over a body, raised off the backdrop.
+ * BlueApp puts one in the middle of the page for you; reach for it directly when a page needs more
+ * than one.
+ */
+defineProps<{
+  title?: string
+  /** An image beside the title, such as the extension's own mark. */
+  logo?: string
+  /** An mdi name beside the title, for a card with no mark of its own. */
+  icon?: string
+  /** How wide the card is allowed to get (default '615px'). */
+  width?: string
+  /** Replaces the body's own inset, for a body that lays itself out. */
+  bodyClass?: string
+}>()
+</script>
+
+<template>
+  <section
+    class="bluevue-elevation-5 mx-auto w-full rounded-[8px] bg-[var(--bluevue-surface)] text-white"
+    :style="{ maxWidth: width || '615px' }"
+  >
+    <!-- Relative, so the bar's own shadow paints over the body below it rather than under it. -->
+    <header
+      v-if="title || $slots.header || $slots.actions"
+      class="bluevue-elevation-1 relative flex items-center gap-5 rounded-t-[8px] bg-[#15151577] px-5 py-3"
+    >
+      <slot name="header">
+        <img
+          v-if="logo"
+          :src="logo"
+          alt=""
+          class="h-6 w-6 shrink-0"
+        >
+        <BlueIcon
+          v-else-if="icon"
+          :name="icon"
+          :size="24"
+        />
+        <span class="truncate text-lg font-medium">{{ title }}</span>
+      </slot>
+      <div class="ml-auto flex shrink-0 items-center gap-1">
+        <slot name="actions" />
+      </div>
+    </header>
+
+    <div :class="bodyClass || 'px-5 py-4'">
+      <slot />
+    </div>
+
+    <footer
+      v-if="$slots.footer"
+      class="flex items-center justify-between gap-3 border-t border-[#ffffff0d] px-5 py-3"
+    >
+      <slot name="footer" />
+    </footer>
+  </section>
+</template>

package/src/components/BlueCheckbox.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import BlueIcon from './BlueIcon.vue'
+import BlueTooltip from './BlueTooltip.vue'
+
+/**
+ * A plain yes or no, laid out as the other controls are: what it is on the left, the box on the
+ * right. A native checkbox drives it, so it is reached and toggled from the keyboard as one.
+ */
+const props = defineProps<{
+  modelValue: boolean | null
+  /** Label on the left of the row. */
+  label?: string
+  /** Name and id, tying the label to the box. */
+  name: string
+  /** Neither on nor off, for a box standing for several things that disagree. */
+  indeterminate?: boolean
+  disabled?: boolean
+  /** The fill when it is on (default the primary token). */
+  color?: string
+  /** A hint behind an info icon beside the box. */
+  infoTooltip?: string
+  theme?: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const checked = computed(() => props.modelValue === true)
+
+const toggle = (): void => {
+  if (props.disabled) return
+  // An indeterminate box is answering for several things at once, and the answer it takes is yes.
+  emit('update:modelValue', props.indeterminate ? true : !checked.value)
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center justify-between">
+    <label
+      v-if="label"
+      :for="name"
+      class="min-w-0 max-w-[45%] shrink-0 truncate text-start mr-6"
+      :title="label"
+      :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : 'cursor-pointer']"
+    >{{ label }}</label>
+    <div v-else />
+
+    <div class="ml-auto flex shrink-0 items-center">
+      <BlueTooltip
+        v-if="infoTooltip"
+        :text="infoTooltip"
+        :theme="theme"
+        class="items-center mr-2"
+      >
+        <BlueIcon
+          name="mdi-information-outline"
+          :size="16"
+          :label="infoTooltip"
+          class="opacity-60 cursor-help"
+          :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        />
+      </BlueTooltip>
+
+      <!-- The native box is the control; the square beside it is what is actually seen, and the
+           two are one element to the pointer and to the keyboard because the label wraps both. -->
+      <label
+        class="relative inline-flex items-center"
+        :class="disabled ? 'opacity-30' : 'cursor-pointer'"
+      >
+        <input
+          :id="name"
+          type="checkbox"
+          class="peer absolute h-0 w-0 opacity-0"
+          :name="name"
+          :checked="checked"
+          :disabled="disabled"
+          :aria-checked="indeterminate ? 'mixed' : checked"
+          @change="toggle"
+        >
+        <span
+          class="bluevue-elevation-1 flex h-[18px] w-[18px] items-center justify-center rounded-[4px] 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="[
+            checked || indeterminate ? 'border-transparent' : theme === 'dark' ? 'border-[#ffffff44] bg-[#00000022]' : 'border-[#00000044] bg-white',
+          ]"
+          :style="{ backgroundColor: checked || indeterminate ? color || 'var(--bluevue-primary)' : undefined }"
+        >
+          <BlueIcon
+            v-if="checked || indeterminate"
+            :name="indeterminate ? 'mdi-minus' : 'mdi-check'"
+            :size="14"
+            color="#ffffff"
+          />
+        </span>
+      </label>
+    </div>
+  </div>
+</template>

package/src/components/BlueChip.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import BlueIcon from './BlueIcon.vue'
+
+/**
+ * A small standing label: a state, a tag, a count. It says what something is rather than doing
+ * anything, so anything that acts on a press belongs in a BlueButton instead.
+ */
+const props = defineProps<{
+  /** The text. A default slot takes its place when given. */
+  label?: string
+  /** 'tonal' (default) is a fill of the colour at low alpha, 'filled' the colour itself. */
+  variant?: 'tonal' | 'filled' | 'outlined'
+  /** Any CSS colour, or one of the standard meanings. */
+  color?: 'success' | 'error' | 'warning' | 'info' | 'neutral' | string
+  /** An mdi name before the text. */
+  icon?: string
+  /** Offers a cross that emits close. */
+  closable?: boolean
+  size?: 'small' | 'regular'
+}>()
+
+defineEmits<{
+  (event: 'close'): void
+}>()
+
+const MEANING: Record<string, string> = {
+  success: '#66BB6A',
+  error: '#EF5350',
+  warning: '#FFB74D',
+  info: '#42A5F5',
+  neutral: '#90A4AE',
+}
+
+const tone = computed(() => MEANING[props.color ?? 'neutral'] ?? props.color ?? MEANING.neutral)
+
+const filled = computed(() => props.variant === 'filled')
+
+// A tonal chip is the tone at a tenth of itself, which reads as a tint of the surface rather than
+// as something sitting on top of it. Colour-mix rather than an alpha suffix, since the tone may
+// arrive as any CSS colour, including a variable.
+const look = computed(() => ({
+  color: filled.value ? '#ffffff' : tone.value,
+  backgroundColor: filled.value ? tone.value : props.variant === 'outlined' ? 'transparent' : `color-mix(in srgb, ${tone.value} 18%, transparent)`,
+  borderColor: props.variant === 'outlined' ? tone.value : 'transparent',
+}))
+</script>
+
+<template>
+  <span
+    class="inline-flex max-w-full shrink-0 items-center gap-1 whitespace-nowrap rounded-full border"
+    :class="size === 'small' ? 'h-[18px] px-2 text-[11px]' : 'h-[22px] px-[10px] text-[12px]'"
+    :style="look"
+  >
+    <BlueIcon
+      v-if="icon"
+      :name="icon"
+      :size="size === 'small' ? 12 : 14"
+    />
+    <span class="min-w-0 truncate">
+      <slot>{{ label }}</slot>
+    </span>
+    <button
+      v-if="closable"
+      type="button"
+      class="-mr-1 cursor-pointer opacity-70 transition-opacity hover:opacity-100"
+      :aria-label="`Remove ${label}`"
+      @click="$emit('close')"
+    >
+      <BlueIcon
+        name="mdi-close"
+        :size="size === 'small' ? 12 : 14"
+      />
+    </button>
+  </span>
+</template>

package/src/components/BlueConfirmDialog.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import BlueButton from './BlueButton.vue'
+import BlueDialog from './BlueDialog.vue'
+
+/**
+ * Asks before something that cannot be taken back. The question is the title, what it will cost
+ * is the message, and the committing button says what it does rather than saying yes.
+ */
+defineProps<{
+  modelValue: boolean
+  title: string
+  /** What confirming will do, and to what. */
+  message?: string
+  /** Names the action rather than agreeing with the question: 'Delete', 'Restart', 'Overwrite'. */
+  confirmLabel?: string
+  cancelLabel?: string
+  /** Colours the committing button as a warning, for anything destructive. */
+  danger?: boolean
+  icon?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'confirm'): void
+}>()
+
+const dialogRef = ref<InstanceType<typeof BlueDialog> | null>(null)
+
+function confirm(): void {
+  dialogRef.value?.close()
+  emit('confirm')
+}
+</script>
+
+<template>
+  <BlueDialog
+    ref="dialogRef"
+    :model-value="modelValue"
+    :title="title"
+    :icon="icon || (danger ? 'mdi-alert-outline' : 'mdi-help-circle-outline')"
+    :icon-color="danger ? 'var(--bluevue-error)' : undefined"
+    width="440px"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <p
+      v-if="message"
+      class="text-sm leading-relaxed text-[#ffffffcc]"
+    >
+      {{ message }}
+    </p>
+    <slot />
+
+    <template #footer>
+      <BlueButton
+        variant="text"
+        density="compact"
+        @click="dialogRef?.close()"
+      >
+        {{ cancelLabel || 'Cancel' }}
+      </BlueButton>
+      <BlueButton
+        variant="filled"
+        density="compact"
+        :color="danger ? 'var(--bluevue-error)' : undefined"
+        @click="confirm"
+      >
+        {{ confirmLabel || 'Confirm' }}
+      </BlueButton>
+    </template>
+  </BlueDialog>
+</template>

package/src/components/BlueDialog.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, useSlots, watch } from 'vue'
+
+import BlueButton from './BlueButton.vue'
+import BlueIcon from './BlueIcon.vue'
+
+/**
+ * The surface every dialog in the kit is built on: a frosted panel in the browser's top layer,
+ * with an optional header, a body and an optional footer. Being a native modal, it dims the page
+ * itself, traps focus, and closes on Escape and on the backdrop unless it is told not to.
+ */
+const props = defineProps<{
+  modelValue: boolean
+  /** The heading. Without one, and without a header slot, the dialog is only its body. */
+  title?: string
+  /** An mdi name beside the title. */
+  icon?: string
+  iconColor?: string
+  /** A line under the title, for what the dialog is about to act on. */
+  subtitle?: string
+  /**
+   * Takes away Escape, the backdrop and the close button. For an operation that must not end up
+   * running under a live page.
+   */
+  persistent?: boolean
+  /** Panel width (default '624px'). It never exceeds the viewport. */
+  width?: string
+  /** Replaces the body's own inset, for a dialog laying its contents out differently. */
+  bodyClass?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const slots = useSlots()
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+const hasHeader = computed(() => Boolean(props.title || slots.header))
+
+const sync = (show: boolean): void => {
+  const el = dialogRef.value
+  if (!el) return
+  if (show && !el.open) el.showModal()
+  if (!show && el.open) el.close()
+}
+
+onMounted(() => sync(props.modelValue))
+watch(() => props.modelValue, sync)
+
+// Every way out closes the element, and its close event is what reports back, so Escape and the
+// backdrop need no separate answer.
+const close = (): void => dialogRef.value?.close()
+
+const onCancel = (event: Event): void => {
+  if (props.persistent) event.preventDefault()
+}
+
+// A click landing on the dialog itself landed on the backdrop, since the panel covers the whole of
+// the element's own box.
+const onBackdropClick = (event: MouseEvent): void => {
+  if (!props.persistent && event.target === dialogRef.value) close()
+}
+
+defineExpose({ close })
+</script>
+
+<template>
+  <dialog
+    ref="dialogRef"
+    class="bluevue-dialog"
+    @close="emit('update:modelValue', false)"
+    @cancel="onCancel"
+    @click="onBackdropClick"
+  >
+    <div
+      class="bluevue-panel relative max-w-full rounded-lg text-white"
+      :style="{ width: width || '624px' }"
+    >
+      <header
+        v-if="hasHeader"
+        class="flex items-start gap-3 px-5 pt-4 pb-3"
+      >
+        <slot name="header">
+          <BlueIcon
+            v-if="icon"
+            :name="icon"
+            :size="22"
+            :color="iconColor || '#42A5F5'"
+            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 text-xs leading-relaxed text-[#ffffff88]"
+            >
+              {{ subtitle }}
+            </div>
+          </div>
+        </slot>
+        <BlueButton
+          v-if="!persistent"
+          variant="icon"
+          icon="mdi-close"
+          tooltip="Close"
+          @click="close"
+        />
+      </header>
+
+      <!-- With no header to hold it, the way out sits over the corner of the panel. -->
+      <BlueButton
+        v-else-if="!persistent"
+        variant="icon"
+        icon="mdi-close"
+        tooltip="Close"
+        class="absolute right-3 top-3 z-10"
+        @click="close"
+      />
+
+      <div :class="[bodyClass || 'px-5 py-4', hasHeader ? 'border-t border-[#ffffff0d]' : '']">
+        <slot />
+      </div>
+
+      <footer
+        v-if="slots.footer"
+        class="flex items-center justify-between gap-3 border-t border-[#ffffff0d] px-5 py-3"
+      >
+        <slot name="footer" />
+      </footer>
+    </div>
+  </dialog>
+</template>

package/src/components/BlueFileDrop.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import BlueIcon from './BlueIcon.vue'
+
+/**
+ * A place to drop a file on, which is also a place to press for the file picker. It hands the
+ * files over and keeps none of them, so what is done with one, and whether it is any good, stays
+ * with the consumer.
+ */
+const props = defineProps<{
+  /** What the picker offers, as the accept attribute takes it (e.g. '.json,.param'). */
+  accept?: string
+  /** Takes more than one file at a time. */
+  multiple?: boolean
+  /** The line under the invitation, usually naming the formats that are understood. */
+  hint?: string
+  /** The invitation itself. */
+  label?: string
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+}>()
+
+const emit = defineEmits<{
+  (event: 'files', files: File[]): void
+}>()
+
+const input = ref<HTMLInputElement>()
+const hovering = ref(false)
+// Dragging over a child fires leave on the parent, so the crossings are counted rather than
+// treated as one, and the zone only cools down when the pointer has really left it.
+const depth = ref(0)
+
+const take = (files: FileList | null): void => {
+  if (props.disabled || !files?.length) return
+  emit('files', Array.from(files))
+}
+
+const onDrop = (event: DragEvent): void => {
+  depth.value = 0
+  hovering.value = false
+  take(event.dataTransfer?.files ?? null)
+}
+
+const onPick = (event: Event): void => {
+  const element = event.target as HTMLInputElement
+  take(element.files)
+  // Cleared so picking the same file twice in a row is still an event the second time.
+  element.value = ''
+}
+</script>
+
+<template>
+  <div
+    class="w-full"
+    :class="disabled ? 'pointer-events-none opacity-30' : ''"
+  >
+    <button
+      type="button"
+      class="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-[8px] border border-dashed px-4 py-6 text-center transition-colors"
+      :class="[
+        hovering
+          ? 'border-[var(--bluevue-accent)] bg-[var(--bluevue-accent)]/10'
+          : theme === 'light' ? 'border-[#00000033] hover:bg-[#00000006]' : 'border-[#ffffff33] hover:bg-[#ffffff08]',
+        theme === 'light' ? 'text-black' : 'text-white',
+      ]"
+      @click="input?.click()"
+      @dragenter.prevent="depth += 1; hovering = true"
+      @dragover.prevent
+      @dragleave.prevent="depth -= 1; hovering = depth > 0"
+      @drop.prevent="onDrop"
+    >
+      <BlueIcon
+        name="mdi-tray-arrow-up"
+        :size="24"
+        class="opacity-70"
+      />
+      <span class="text-[13px]">{{ label ?? 'Drop a file here, or press to choose one' }}</span>
+      <span
+        v-if="hint"
+        class="text-[11px] opacity-60"
+      >{{ hint }}</span>
+    </button>
+
+    <input
+      ref="input"
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onPick"
+    >
+  </div>
+</template>

package/src/components/BlueIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * A Material Design Icon in a square box, so a row of them lines up whichever glyphs it carries
+ * and however wide each one happens to advance.
+ */
+const props = defineProps<{
+  /** Icon name, with or without the `mdi-` prefix. */
+  name: string
+  /** Side of the box, in pixels when given as a number (default 20). */
+  size?: number | string
+  color?: string
+  /** Turns, for something under way. */
+  spin?: boolean
+  /** Read out in place of the icon. Without one the icon is hidden from assistive technology. */
+  label?: string
+}>()
+
+const iconClass = computed(() => (props.name.startsWith('mdi-') ? props.name : `mdi-${props.name}`))
+
+const box = computed(() => {
+  const size = props.size ?? 20
+  return typeof size === 'number' ? `${size}px` : size
+})
+</script>
+
+<template>
+  <span
+    class="mdi bluevue-icon"
+    :class="[iconClass, spin ? 'bluevue-icon--spin' : '']"
+    :style="{ width: box, height: box, fontSize: box, color }"
+    :role="label ? 'img' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  />
+</template>