インターフェースを、ビューの中へ。

<script setup lang="ts">
import { AgmButton, AgmPanel, AgmSelect, AgmSlider, AgmSwitch } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const enabled = shallowRef(true)
const opacity = shallowRef(80)
const options = [
  { label: '集中', value: 'focus' },
  { label: '探索', value: 'explore' },
]
function reset() {
  mode.value = 'focus'
  enabled.value = true
  opacity.value = 80
}
</script>

<template>
  <AgmPanel title="コントロールパネル" class="control-example">
    <AgmSelect v-model="mode" label="シーンモード" :options="options" />
    <AgmSwitch v-model="enabled" label="ナビゲーションを表示" />
    <AgmSlider v-model="opacity" label="ナビゲーションの不透明度" :min="30" />
    <output>
      現在：{{ mode === 'focus' ? '集中' : '探索' }} · ナビゲーション{{
        enabled ? 'オン' : 'オフ'
      }}
      · {{ opacity }}%
    </output>
    <AgmButton variant="outline" @click="reset">初期設定に戻す</AgmButton>
  </AgmPanel>
</template>

<style scoped>
.control-example {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
output {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

<script setup lang="ts">
import { AgmHudProgress, AgmHudStatus, AgmPanel } from 'augma'
</script>

<template>
  <AgmPanel title="ミッションの状態" class="hud-example">
    <div>
      <AgmHudStatus>UI の準備完了</AgmHudStatus>
      <AgmHudStatus tone="warning">許可待ち</AgmHudStatus>
      <AgmHudStatus tone="danger">デバイスがオフライン</AgmHudStatus>
    </div>
    <AgmHudProgress label="リソースの読み込み" :value="72" variant="ring" />
    <AgmHudProgress label="デバイスの接続待ち" indeterminate-text="処理中" />
    <p>サンプルの状態です。デバイスへのアクセスや権限の要求は行いません。</p>
  </AgmPanel>
</template>

<style scoped>
.hud-example {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: 100%;
}
.hud-example > div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hud-example > .agm-progress:not(.agm-progress--ring) {
  width: 100%;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

<script setup lang="ts">
import { AgmButton, AgmHudProgress, AgmPanel } from 'augma'
import { shallowRef } from 'vue'

const value = shallowRef(25)
</script>

<template>
  <AgmPanel title="アクセントカラーのカスタマイズ" class="theme-example">
    <AgmHudProgress label="サンプルの進捗" :value="value" />
    <AgmButton @click="value = value >= 100 ? 0 : value + 25">
      進捗を進める
    </AgmButton>
    <p>セマンティック変数で色をカスタマイズしても、コンポーネントの構造とキーボード操作はそのままです。</p>
  </AgmPanel>
</template>

<style scoped>
.theme-example {
  --agm-accent: #7951bd;
  --agm-accent-hover: #65419e;
  --agm-on-accent: #fff;
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>