ADV.JS

Appearance

AGUI - @advjs/gui ​

GUI for Engine Editor.

Usage ​

Todo

bash
pnpm add @advjs/gui
pnpm add @advjs/gui

Checkbox ​

Checkbox Demo
vue
<template>
  <AGUIDemoBlock title="Checkbox Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUICheckbox />
      </AGUIFormItem>
      <AGUIFormItem label="Checked" description="Checked Checkbox">
        <AGUICheckbox checked />
      </AGUIFormItem>
      <AGUIFormItem label="Disabled">
        <AGUICheckbox disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>
<template>
  <AGUIDemoBlock title="Checkbox Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUICheckbox />
      </AGUIFormItem>
      <AGUIFormItem label="Checked" description="Checked Checkbox">
        <AGUICheckbox checked />
      </AGUIFormItem>
      <AGUIFormItem label="Disabled">
        <AGUICheckbox disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

Input ​

Input Demo
vue
<script lang="ts" setup>
import { ref } from 'vue'

const text = ref('Hello, World!')
</script>

<template>
  <AGUIDemoBlock title="Input Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUIInput v-model="text" />
      </AGUIFormItem>

      <AGUIFormItem label="Disabled">
        <AGUIInput v-model="text" disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const text = ref('Hello, World!')
</script>

<template>
  <AGUIDemoBlock title="Input Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUIInput v-model="text" />
      </AGUIFormItem>

      <AGUIFormItem label="Disabled">
        <AGUIInput v-model="text" disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

InputNumber ​

Input Demo
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { Vector2, Vector3 } from '../../../../packages/gui/src'

const num = ref(6)

const vector2 = ref<Vector2>({
  x: 0,
  y: 0,
})

const vector3 = ref<Vector3>({
  x: 0,
  y: 0,
  z: 0,
})
</script>

<template>
  <AGUIDemoBlock title="Input Demo">
    <AGUIForm>
      <AGUIFormItem label="Number">
        <AGUIInputNumber v-model="num" />
      </AGUIFormItem>

      <AGUIFormItem label="Min 0 Max 180">
        <AGUIInputNumber v-model="num" :min="0" :max="180" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector2">
        <AGUIInputVector v-model="vector2" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector3">
        <AGUIInputVector v-model="vector3" />
      </AGUIFormItem>

      <AGUIFormItem label="Custom Label">
        <AGUIInputVector />
        <AGUIInputVector />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { Vector2, Vector3 } from '../../../../packages/gui/src'

const num = ref(6)

const vector2 = ref<Vector2>({
  x: 0,
  y: 0,
})

const vector3 = ref<Vector3>({
  x: 0,
  y: 0,
  z: 0,
})
</script>

<template>
  <AGUIDemoBlock title="Input Demo">
    <AGUIForm>
      <AGUIFormItem label="Number">
        <AGUIInputNumber v-model="num" />
      </AGUIFormItem>

      <AGUIFormItem label="Min 0 Max 180">
        <AGUIInputNumber v-model="num" :min="0" :max="180" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector2">
        <AGUIInputVector v-model="vector2" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector3">
        <AGUIInputVector v-model="vector3" />
      </AGUIFormItem>

      <AGUIFormItem label="Custom Label">
        <AGUIInputVector />
        <AGUIInputVector />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

Slider ​

Slider Demo
vue
<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(0)
</script>

<template>
  <AGUIDemoBlock title="Slider Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUISlider v-model="num" />
      </AGUIFormItem>
      <AGUIFormItem label="With Input (Todo)" description="Slider + Input">
        <AGUISlider v-model="num" show-input disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(0)
</script>

<template>
  <AGUIDemoBlock title="Slider Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUISlider v-model="num" />
      </AGUIFormItem>
      <AGUIFormItem label="With Input (Todo)" description="Slider + Input">
        <AGUISlider v-model="num" show-input disabled />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

Select ​

Slider Demo
vue
<template>
  <AGUIDemoBlock title="Slider Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUISelect />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>
<template>
  <AGUIDemoBlock title="Slider Demo">
    <AGUIForm>
      <AGUIFormItem label="Default">
        <AGUISelect />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

Tabs ​

Project
vue
<script lang="ts" setup>
import { ref } from 'vue'

const tabList = ref([
  { title: 'Project', key: 'project', icon: 'i-ri-folder-line' },
  { title: 'Console', key: 'console', icon: 'i-ri-terminal-box-line' },
])
</script>

<template>
  <AGUIDemoBlock :in-panel="false">
    <AGUITabs :list="tabList">
      <AGUITabPanel>
        <div p="4">
          Project
        </div>
      </AGUITabPanel>
      <AGUITabPanel>
        <div p="4">
          Console
        </div>
      </AGUITabPanel>
      <slot />
    </AGUITabs>
  </AGUIDemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const tabList = ref([
  { title: 'Project', key: 'project', icon: 'i-ri-folder-line' },
  { title: 'Console', key: 'console', icon: 'i-ri-terminal-box-line' },
])
</script>

<template>
  <AGUIDemoBlock :in-panel="false">
    <AGUITabs :list="tabList">
      <AGUITabPanel>
        <div p="4">
          Project
        </div>
      </AGUITabPanel>
      <AGUITabPanel>
        <div p="4">
          Console
        </div>
      </AGUITabPanel>
      <slot />
    </AGUITabs>
  </AGUIDemoBlock>
</template>

Copyright © 2021-PRESENT YunYouJun