Common Components - Bng* UI Elements

// From base components
import { 
  BngButton, 
  BngIcon, 
  BngInput, 
  BngCard,
  BngSlider,
  BngSwitch,
  BngDropdown,
  BngBinding,
  ACCENTS,
  icons 
} from '@/common/components/base'

// From utility components
import { Drawer } from '@/common/components/utility'

// Directives
import { 
  vBngBlur, 
  vBngTooltip, 
  vBngOnUiNav,
  vBngScopedNav,
  vBngDisabled 
} from '@/common/directives'

<BngButton @click="handleClick">
  Click Me
</BngButton>

<BngButton :icon="icons.save" @click="save">
  Save
</BngButton>

<script setup>
import { BngButton, ACCENTS } from '@/common/components/base'
</script>

<template>
  <BngButton :accent="ACCENTS.primary">Primary</BngButton>
  <BngButton :accent="ACCENTS.secondary">Secondary</BngButton>
  <BngButton :accent="ACCENTS.outlined">Outlined</BngButton>
  <BngButton :accent="ACCENTS.ghost">Ghost</BngButton>
  <BngButton :accent="ACCENTS.attention">Attention</BngButton>
</template>

ACCENTS = {
  primary,      // Orange filled
  secondary,    // Gray filled
  outlined,     // Bordered, transparent
  ghost,        // Minimal, text only
  attention,    // Red/warning
  confirm       // Green/success
}

<BngIcon type="save" />
<BngIcon :type="icons.engine" />

<BngIcon type="car" style="--bng-icon-size: 2em" />

<BngIcon :externalImage="'/path/to/image.png'" />

import { icons } from '@/common/components/base'

// Access icons by name
icons.save
icons.engine
icons.car
icons.arrowLargeLeft
icons.sprayCan

<BngInput v-model="searchText" placeholder="Search..." />

<BngInput 
  v-model="name" 
  label="Vehicle Name"
  :maxlength="50"
/>

<BngSlider 
  v-model="volume"
  :min="0"
  :max="100"
  :step="1"
  label="Volume"
/>

<BngSwitch v-model="enabled" label="Enable Feature" />

import { LABEL_ALIGNMENTS } from '@/common/components/base'

<BngSwitch 
  v-model="enabled" 
  label="Enable"
  :labelAlignment="LABEL_ALIGNMENTS.left"
/>

<BngDropdown 
  v-model="selectedOption"
  :items="options"
  placeholder="Select..."
/>

<script setup>
const options = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
  { label: 'Option 3', value: 'opt3' }
]
</script>

<BngCard>
  <template #heading>
    <BngCardHeading>Card Title</BngCardHeading>
  </template>
  
  <div class="card-content">
    Content goes here
  </div>
</BngCard>

<BngScreenHeading>
  <template #title>{{ $t('ui.myModule.title') }}</template>
  <template #subtitle>{{ vehicleName }}</template>
</BngScreenHeading>

<!-- Show binding for "back" action -->
<BngBinding ui-event="back" />

<!-- Controller only (hide on keyboard) -->
<BngBinding ui-event="confirm" controller />

<!-- Show even if unassigned -->
<BngBinding ui-event="action_4" show-unassigned />

<BngList 
  :items="items"
  :layout="LIST_LAYOUTS.grid"
  @itemClick="onItemClick"
>
  <template #item="{ item }">
    <div class="list-item">{{ item.name }}</div>
  </template>
</BngList>

import { LIST_LAYOUTS } from '@/common/components/base'

LIST_LAYOUTS = {
  list,     // Vertical list
  grid,     // Grid layout
  carousel  // Horizontal scroll
}

<BngProgressBar 
  :value="progress" 
  :max="100"
  :showLabel="true"
/>

<div v-bng-blur>
  This content has a blur background
</div>

<!-- Conditional blur -->
<div v-bng-blur="isBlurred">...</div>

<BngButton v-bng-tooltip="'Click to save'">Save</BngButton>

<!-- With position -->
<BngButton v-bng-tooltip:top="'Tooltip above'">Hover me</BngButton>
<BngButton v-bng-tooltip:bottom="'Tooltip below'">Hover me</BngButton>

<BngButton v-bng-disabled="!isReady">Submit</BngButton>

<div 
  v-bng-on-ui-nav:back="goBack"
  v-bng-on-ui-nav:confirm="submit"
  v-bng-on-ui-nav:menu="openMenu"
>
  <!-- Content -->
</div>

<div 
  v-bng-scoped-nav="{ 
    activateOnMount: true, 
    bubbleWhitelistEvents: ['menu'] 
  }"
  @deactivate="onExit"
>
  <BngButton :bng-scoped-nav-autofocus="true">
    First focused button
  </BngButton>
  <BngButton>Another button</BngButton>
</div>

<BngInput v-bng-focus-if="shouldFocus" />

<div v-bng-frustum-mover:left="true">
  Moves with camera
</div>

<Drawer v-model="isExpanded" position="left">
  <template #header>
    <BngButton @click="isExpanded = !isExpanded">
      Toggle Drawer
    </BngButton>
  </template>
  <template #expanded-content>
    <div class="drawer-content">
      Drawer content here
    </div>
  </template>
</Drawer>

<BngOverflowContainer>
  <div class="long-content">
    <!-- Lots of content -->
  </div>
</BngOverflowContainer>

<div class="button-group">
  <BngButton 
    v-for="option in options" 
    :key="option.id"
    :accent="selectedId === option.id ? ACCENTS.primary : ACCENTS.outlined"
    @click="selectedId = option.id"
  >
    {{ option.label }}
  </BngButton>
</div>

<div class="form">
  <div class="form-row">
    <BngInput v-model="form.name" label="Name" />
  </div>
  <div class="form-row">
    <BngDropdown v-model="form.type" :items="typeOptions" />
  </div>
  <div class="form-row">
    <BngSlider v-model="form.value" :min="0" :max="100" label="Value" />
  </div>
  <div class="form-actions">
    <BngButton :accent="ACCENTS.primary" @click="submit">Save</BngButton>
    <BngButton :accent="ACCENTS.secondary" @click="cancel">Cancel</BngButton>
  </div>
</div>

<BngButton 
  :icon="icons.settings" 
  :accent="ACCENTS.ghost"
  v-bng-tooltip:top="'Settings'"
/>

<BngIcon 
  :type="isComplete ? icons.checkmark : icons.clock" 
  :class="{ 'icon-success': isComplete }"
/>

// Common CSS variables available
.my-component {
  color: var(--bng-off-white);
  background: rgba(var(--bng-off-black-rgb), 0.5);
  border-radius: var(--bng-corners-1);
  font-family: var(--fnt-defs);
}

.my-icon {
  --bng-icon-size: 2em;
  --bng-icon-color: var(--bng-orange);
}