@bluerobotics/bluevue 0.1.0

package/src/components/BlueSwitch.vue

@@ -0,0 +1,117 @@
+<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
+        class="block truncate text-start mr-6"
+        :title="label"
+        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+      >{{ label }}</label>
+    </div>
+    <div class="flex items-center min-w-0 shrink-[1000]">
+      <div
+        v-if="infoTooltip"
+        class="relative group inline-flex items-center shrink-0 mr-2"
+      >
+        <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>
+      <!-- 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. -->
+      <div
+        name="switch-track"
+        class="relative grid grid-cols-2 rounded-[8px] bluevue-elevation-1 cursor-pointer overflow-hidden"
+        :class="[theme === 'dark' ? 'bg-[#464646AA]' : 'bg-[#00000011]', disabled ? 'opacity-30 cursor-not-allowed' : '']"
+        :style="{ minWidth: width || '75px', height: height || '30px' }"
+        @click="toggleSwitch"
+      >
+        <div
+          class="absolute top-[4px] bottom-[4px] w-[calc(50%-4px)] rounded-[8px] bluevue-elevation-1 transition-all duration-300"
+          :style="{
+            left: modelValue ? 'calc(50% + 2px)' : '2px',
+            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
+             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="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="labelClass(modelValue)"
+        >
+          {{ labelOn || 'On' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  /** Color of the switch's knob when it is on. */
+  color?: string
+  /** The current value of the switch. */
+  modelValue: boolean | null
+  /** Whether the switch is disabled. */
+  disabled?: boolean
+  /** Height of the switch container. */
+  height?: string
+  /** Label on the left side of the component. */
+  label?: string
+  /** Optional info tooltip shown via an info icon next to the control. */
+  infoTooltip?: string
+  /** Custom text for the switch when it is on. */
+  labelOn?: string
+  /** Custom text for the switch when it is off. */
+  labelOff?: string
+  /** Name of the component's container. */
+  name: string
+  /** Theme of the component. */
+  theme?: 'light' | 'dark'
+  /** Minimum width of the container. */
+  width?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const modelValue = ref(props.modelValue || false)
+
+// The label the knob sits under is white against its fill; the other one stays as a dim
+// reminder of what the far position says.
+const labelClass = (active: boolean): string[] =>
+  active ? ['text-white'] : ['opacity-20', props.theme === 'dark' ? 'text-white' : 'text-black']
+
+const toggleSwitch = (): void => {
+  if (props.disabled) return
+  modelValue.value = !modelValue.value
+  emit('update:modelValue', modelValue.value)
+}
+
+watch(
+  () => props.modelValue,
+  (v) => (modelValue.value = v ?? false),
+  { immediate: true }
+)
+</script>

package/src/composables/useBluePopover.ts

@@ -0,0 +1,153 @@
+import { autoUpdate, flip, offset, type Placement, shift, size, useFloating, type VirtualElement } from '@floating-ui/vue'
+import { computed, type CSSProperties, nextTick, ref, type Ref } from 'vue'
+
+interface BluePopoverOptions {
+  /** Where the menu hangs off its anchor (default 'bottom-end'). */
+  placement?: Placement
+  /** Give the menu at least its anchor's width, for a select whose list should line up with it. */
+  matchAnchorWidth?: boolean
+}
+
+interface BluePopover {
+  /** Goes on the element the menu hangs off, when it opens from a control rather than a pointer. */
+  anchorRef: Ref<HTMLElement | null>
+  /** Goes on the element carrying the `popover` attribute. */
+  popoverRef: Ref<HTMLElement | null>
+  /** The popover's id, for the `popovertarget` the activator is bound to. */
+  popoverId: string
+  /** Bind onto an activator `<button>` to let the browser own the open and close. */
+  activatorProps: { popovertarget: string }
+  isOpen: Ref<boolean>
+  /** False until the menu has been placed, so it can be held invisible for that first frame. */
+  isPositioned: Readonly<Ref<boolean>>
+  floatingStyles: Readonly<Ref<CSSProperties>>
+  /** Opens the menu, at a viewport position when one is given instead of an anchor element. */
+  show: (pointerTarget?: [number, number]) => Promise<void>
+  hide: () => void
+  /** Bind to the popover's `toggle` event, so a dismissal by the browser is reflected back. */
+  onToggle: (event: Event) => void
+}
+
+let popoverCount = 0
+
+// The browser dismisses an auto popover on the pointerup whose pointerdown landed before the
+// popover existed, which is every menu summoned mid-gesture: a right-click, a long press. Knowing
+// a button is still held is what lets such a menu wait for the release instead of being closed by
+// it. Tracked once for all popovers, and only from the first one that is created, so importing
+// the composable touches no document.
+let pointerIsDown = false
+let pointerTracked = false
+
+const trackPointerState = (): void => {
+  if (pointerTracked || typeof document === 'undefined') return
+  pointerTracked = true
+  const release = (): void => { pointerIsDown = false }
+  document.addEventListener('pointerdown', () => { pointerIsDown = true }, true)
+  document.addEventListener('pointerup', release, true)
+  document.addEventListener('pointercancel', release, true)
+}
+
+const afterPointerRelease = (): Promise<void> =>
+  new Promise((resolve) => {
+    const done = (): void => {
+      document.removeEventListener('pointerup', done)
+      document.removeEventListener('pointercancel', done)
+      // Resolved a task later, so the browser has already had its turn at dismissing on this
+      // release and the menu opens into the quiet after it.
+      setTimeout(resolve)
+    }
+    document.addEventListener('pointerup', done)
+    document.addEventListener('pointercancel', done)
+  })
+
+/**
+ * A menu that opens in the top layer, so it is never clipped by the panel it belongs to and
+ * needs no z-index of its own. The native popover dismisses it on outside click and on Escape;
+ * floating-ui keeps it beside its anchor and inside the viewport.
+ * @param {BluePopoverOptions} options Placement, and whether to match the anchor's width.
+ * @returns {BluePopover} Refs to bind, open state, and imperative open and close.
+ */
+export function useBluePopover(options: BluePopoverOptions = {}): BluePopover {
+  trackPointerState()
+
+  const anchorRef = ref<HTMLElement | null>(null)
+  const popoverRef = ref<HTMLElement | null>(null)
+  const isOpen = ref(false)
+  const popoverId = `bluevue-popover-${++popoverCount}`
+
+  // Set only when the menu is opened at a pointer position, as a right-click or long-press does.
+  const pointerTarget = ref<[number, number] | null>(null)
+
+  const virtualAnchor = computed<VirtualElement | null>(() => {
+    if (!pointerTarget.value) return null
+    const [x, y] = pointerTarget.value
+    return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) }
+  })
+
+  // Null while closed, so scroll and resize are only observed for a menu that is on screen.
+  const reference = computed(() => (isOpen.value ? virtualAnchor.value ?? anchorRef.value : null))
+
+  const { floatingStyles, isPositioned } = useFloating(reference, popoverRef, {
+    // Stated so isPositioned drops back to false on close, and a second open is held invisible
+    // until it has been placed rather than showing for a frame at wherever it last was.
+    open: isOpen,
+    placement: options.placement ?? 'bottom-end',
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(4),
+      flip({ padding: 8 }),
+      shift({ padding: 8 }),
+      ...(options.matchAnchorWidth
+        ? [size({
+          apply: ({ rects, elements }) => {
+            elements.floating.style.minWidth = `${rects.reference.width}px`
+          },
+        })]
+        : []),
+    ],
+  })
+
+  // Bumped by every open and close, so an open that waited out a pointer release can tell it is
+  // still the one wanted and does not arrive after something already asked for the opposite.
+  let request = 0
+
+  const show = async (target?: [number, number]): Promise<void> => {
+    const ticket = ++request
+    pointerTarget.value = target ?? null
+    await nextTick()
+    if (pointerIsDown) await afterPointerRelease()
+    if (ticket !== request) return
+    const el = popoverRef.value
+    if (!el || el.matches(':popover-open')) return
+    // Opening it is what sets isOpen, through the toggle event the browser fires.
+    el.showPopover()
+  }
+
+  const hide = (): void => {
+    request += 1
+    const el = popoverRef.value
+    if (el?.matches(':popover-open')) el.hidePopover()
+    else isOpen.value = false
+  }
+
+  const onToggle = (event: Event): void => {
+    isOpen.value = (event as ToggleEvent).newState === 'open'
+    // A menu placed at a pointer keeps its target only while it is up, so the next open off an
+    // activator is not still anchored to the last right-click.
+    if (!isOpen.value) pointerTarget.value = null
+  }
+
+  return {
+    anchorRef,
+    popoverRef,
+    popoverId,
+    activatorProps: { popovertarget: popoverId },
+    isOpen,
+    isPositioned,
+    floatingStyles,
+    show,
+    hide,
+    onToggle,
+  }
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { default as BlueButtonGroup } from './components/BlueButtonGroup.vue'
+export { default as BlueExpansiblePanel } from './components/BlueExpansiblePanel.vue'
+export { default as BlueInput } from './components/BlueInput.vue'
+export { default as BlueLoadingDialog } from './components/BlueLoadingDialog.vue'
+export { default as BlueMenu, type BlueMenuItem } from './components/BlueMenu.vue'
+export { default as BluePromptDialog } from './components/BluePromptDialog.vue'
+export { default as BlueSelect } from './components/BlueSelect.vue'
+export { default as BlueSlider } from './components/BlueSlider.vue'
+export { default as BlueSwitch } from './components/BlueSwitch.vue'
+
+export { useBluePopover } from './composables/useBluePopover'

package/src/styles/bluevue.css

@@ -0,0 +1,124 @@
+/* Tokens and component classes: everything the controls need that is not a Tailwind utility.
+   Import this on its own when your app compiles the utilities itself (see the README), or get
+   it folded into dist/style.css when it does not. */
+
+:root {
+  --bluevue-primary: #0B5087;
+  --bluevue-error: #CF6679;
+  --bluevue-surface: #363636;
+  --bluevue-accent: #6699CC;
+  --bluevue-panel-bg: rgba(30, 30, 30, 0.96);
+  --bluevue-hairline: rgba(255, 255, 255, 0.08);
+  /* Material's three-part shadow, at the two depths the controls use: a resting control, and
+     one raised above its neighbours (a selected segment, an open menu). */
+  --bluevue-elevation-1: 0 2px 1px -1px #0003, 0 1px 1px 0 #00000024, 0 1px 3px 0 #0000001f;
+  --bluevue-elevation-5: 0 3px 5px -1px #0003, 0 5px 8px 0 #00000024, 0 1px 14px 0 #0000001f;
+  /* The opposite of an elevation: a well cut into the surface, for somewhere a value is typed
+     rather than somewhere that is pressed. The light line along the bottom edge is what sells
+     the depth, by reading as the lit far wall of the recess. */
+  --bluevue-inset-1: inset 0 1px 2px #00000056, inset 0 0.5px 0.5px #0000003a, inset 0 -0.5px 0 #ffffff0b;
+}
+
+.bluevue-elevation-1 {
+  box-shadow: var(--bluevue-elevation-1);
+}
+
+.bluevue-elevation-5 {
+  box-shadow: var(--bluevue-elevation-5);
+}
+
+.bluevue-inset-1 {
+  box-shadow: var(--bluevue-inset-1);
+}
+
+/* The surface the dialogs are built on: a frosted near-black card with a hairline edge. */
+.bluevue-panel {
+  background-color: var(--bluevue-panel-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--bluevue-hairline);
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
+}
+
+/* A modal <dialog> carries the browser's own centring, borders and padding. Strip them so the
+   panel inside is the whole of what shows, and dim the page behind it. */
+.bluevue-dialog {
+  margin: auto;
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: min(92vw, 624px);
+  max-height: 92vh;
+  overflow: visible;
+}
+
+/* showModal() moves focus into the dialog, and with nothing focusable inside it the dialog
+   itself takes it and the browser rings the whole panel. The ring belongs on controls, not on
+   the surface holding them, and the controls inside keep their own. */
+.bluevue-dialog:focus,
+.bluevue-dialog:focus-visible,
+.bluevue-popover:focus,
+.bluevue-popover:focus-visible {
+  outline: none;
+}
+
+.bluevue-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.88);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* A popover is promoted to the top layer, so it needs no z-index and is not clipped by the
+   panel it opens from. Only the browser's default centring and chrome have to go, since
+   floating-ui writes the real position. */
+.bluevue-popover {
+  position: fixed;
+  margin: 0;
+  border: none;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+/* BlueExpansiblePanel's open and close. */
+.bluevue-expand-enter-active,
+.bluevue-expand-leave-active {
+  transition: max-height 0.3s ease;
+  overflow: hidden;
+}
+
+.bluevue-expand-enter-from,
+.bluevue-expand-leave-to {
+  max-height: 0;
+}
+
+.bluevue-expand-enter-to,
+.bluevue-expand-leave-from {
+  max-height: 500px;
+}
+
+/* BlueLoadingDialog's mark is a propeller, so it turns like one: a creep of 80 degrees over two
+   seconds, then the balance of four turns over the next two, carrying it round to where it
+   started. */
+.bluevue-loading__icon {
+  animation: bluevue-prop 4s infinite;
+}
+
+@keyframes bluevue-prop {
+  /* Each segment carries its own easing, which is what gives the blade its weight: it takes a
+     moment to get moving, settles at the end of the creep, then winds up into the spins and
+     bleeds the speed off again rather than stopping dead. The cycle ends on a whole turn, so
+     the loop restarts from the orientation it began at and the seam is invisible. */
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+  }
+  /* 80deg at the halfway mark, leaving the other two seconds for the 1360deg that follow. */
+  50% {
+    transform: rotate(80deg);
+    animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1);
+  }
+  100% {
+    transform: rotate(1440deg);
+  }
+}

package/src/styles/bundled.css

@@ -0,0 +1,9 @@
+/* Source for the ready-made dist/style.css, for apps that do not run Tailwind themselves.
+   Theme and utilities only: Preflight is deliberately left out, because a component library
+   has no business resetting the base styles of the app that imports it. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "../components";
+
+@import "./bluevue.css";