# vuepy

## 简介
vuep.py是一个用于构建用户界面的python框架。它基于标准html、python构建，并提供一套声明式、组件化的编程模型，与Vue3.js组合式API几乎完全兼容。

核心功能：
* 声明式渲染：Vue.py 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 Python 状态之间的关系。
* 响应性：Vue.py 会自动跟踪 Python 状态并在其发生变化时响应式地更新 DOM。

## 安装vuepy

```
pip install vuepy-core
```

## 单文件组件 SFC

语法和vue.js一致，不同点在与使用`<script lang='py'></script>`来包裹实现组件逻辑的python代码，以下为vuepy组合式API构建的SFC组件示例：

```vue
<template>
  <Button :label="f'Count is: {count.value}'"
          @click='counter()'
  ></Button>
</template>

<script lang='py'>
from vuepy import ref

count = ref(0)

def counter():
    count.value += 1
</script>
```

### SFC 语法定义

一个 Vue.py 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue.py 组件。一个 Vue.py 单文件组件在语法上是兼容 HTML 的。和vue.js的sfc组件非常相似。

`<template>`：每个vue文件最多可以包含一个顶层template块。

`<script lang='py'>`：每个vue文件最多可以包含一个。 script内为python代码，每一个组件实例都会执行该段代码，其中的变量、函数声明、import导入等都将自动暴露给模板。props, context, app等变量会自动传入，也会自动暴露给模板，script内可以直接使用。
```vue
<template>
 <p>{{ msg.value }}</p>
</template>
<script lang='py'>
from vuepy import ref
msg = ref("Hello World!")
</script>
```

`<script src="./xxx.py"></script>`：每个vue文件最多可以包含一个。通过src导入一个外部python文件。src为相对路径时以`./`开头，表示相对于当前vue文件的路径，该python文件中需要定义setup函数。
```python
def setup(props, context, app):
    # 声明变量、函数等
    ...
    # 手动调用 locals 将局部变量暴露给模版
    return locals()
```

`<script lang='py'>`和`<script src="./xxx.py"></script>`只能选一种

`<script setup>`：只作为IDE的自动补全提示使用，对实际运行没有影响。

`<style>`：暂不支持，可以在template中直接编写。

## 创建Vue.py应用

```python
from vuepy import create_app, import_sfc
App = import_sfc("./App.vue")
app = create_app(App)
app.mount()
```
## 模板语法

和vue.js基本一致，不同的是表达式是 python 表达式。

文本插值
```vue
<span>{{ exp }}</span>
```

Attribute绑定
```vue
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
```

使用Python表达式，支持完整的Python表达式，以当前组件实例为作用域解析执行
```vue
<span>
{{ var.value + 1 }}
{{ 'Y' if ok.value else 'N' }}
{{ ','.join(msgs) }}
{{ format(data) }}
</span>
<Input :value="f'list-{did.value}'"></Input>
```

指令 Directives：带有`v-`前缀的特殊attribute。指令attribute的期望值一般为一个Python表达式。其表达式的值变化时会响应式地更新UI。
```vue

```
## 响应式基础

ref、reactive和vue.js的基本一致。  
不同点：
* 获取ref对象的值需要显式地访问ref对象的value属性。

示例
```vue
<template>
  <p>{{ state.count }}</p>
  <InputNumber v-model="state.count"></InputNumber>
  <Button @click="add()">add</Button>
</template>
<script lang='py'>
from vuepy import reactive

state = reactive({'count': 0})

def add():
    state.count += 1
</script>
```

shallowRef是ref的浅层作用形式，可以放弃深层响应性，和vue.js的基本一致。

## 计算属性

computed和vue.js的基本一致。  
不同点：
* 可以使用装饰器声明计算属性
```python
from vuepy import ref, computed

count = ref(1)

@computed
def plus_one():
  return count.value + 1
```
## 条件渲染

v-if、v-else-if、v-else、v-show和vue.js的基本一致。
## 列表渲染

v-for指令：
* 特别注意：当有v-for有两个参数时，第一个参数index是循环索引，更符合python习惯。
  ```vue
  <li v-for="(index, item) in items">
  ```
* Vue.py 能够侦听响应式数组的变更方法：append ,clear ,extend ,insert ,pop ,remove ,reverse ,sort。

示例：
```vue
<template>
  <!-- list with index: The order is different from vue.js -->
  <div>
    <span v-for="(index, item) in l">
      {{ index }}: {{ item }}
    </span>
  </div>

  <!-- list -->
  <div>
    <span v-for="item in l">
      {{ item }}
    </span>
  </div>

  <!-- iter(dict) -->
  <div>
    <span v-for="key in d">
      {{ key }}
    </span>
  </div>

  <!-- ref dict -->
  <div>
    <span v-for="i, value in d_ref.value.values()">
      {{ i }}: {{ value }}
    </span>
  </div>

  <!-- list with func -->
  <div>
    <span v-for="i in filter(lambda x: x % 2 == 0, l)">
      {{ i }}
    </span>
  </div>
</template>
<script lang='py'>
from vuepy import ref

d = {'a': 1, 'b': 2}
d_ref = ref(d)
l = [1, 2, 3, 4, 5]
</script> 
```

## 事件处理

v-on和vue.js的基本一致。  
不同点：
* 只支持自定义组件(如 Button等)，暂不支持原生 html 元素（如 span等）
* 只实现了最基础的功能

支持函数和`async def`的异步函数
```vue
<template>
  <Button button_style="info" @click="async_click()">btn1</Button>
  <Button button_style="info" @click="click()">btn2</Button>
</template>

<script lang="py">
import asyncio

async def async_click():
    print('async_click: start')
    await asyncio.sleep(2)
    print('async_click: end')

def click():
    print('sync_click: click')
</script>
```
先点击btn1，马上再点击btn2，打印的结果如下：
```
async_click: start
sync_click: click
async_click: end
```
## 表单输入绑定

v-model和vue.js的基本一致。  
不同点：
* 只支持自定义组件(如 Input、Dropdown等)，暂不支持原生 html 元素（如 input 等）
* 只实现了最基础的功能
## 生命周期钩子

当前版本未实现。
## 帧听器

watch和vue.js的基本一致。  
不同点：
* 只实现了最基础的功能
* 支持装饰器的使用方式
```py
# 单个 ref
@watch(x)
def x_update(newX, oldX, on_cleanup):
    print(f'x is {newX}')

# 停止帧听器
x_update()
```

## 模板引用

ref和vue.js的基本一致。  
不同点：
* ref引用的是元素对应的widget对象
* ref未实现自动解包
## 组件

### 组件定义
和vue.js的SFC基本一致，可以定义在`.vue`文件中。  
不同点：
* 组件逻辑包裹在`<script lang='py'></script>`中，使用python语言
```vue
<template>
  <Button :label="f'Count is: {count.value}'"
          @click='counter()'
  ></Button>
</template>

<script lang='py'>
from vuepy import ref

count = ref(0)

def counter():
    count.value += 1
</script>
```


### 使用组件

1. 局部注册的方式

```vue
<template>
  <h1>hello</h1>
  <Counter></Counter>
</template>

<script lang='py'>
from vuepy import import_sfc
Counter = import_sfc('./Counter.vue')
</script>
```

2. 全局注册的方式

```python
from vuepy import import_sfc

MyComponent = import_sfc('./Component.vue')
app.component('MyComponent', MyComponent)
```

### 传递props

defineProps和vue.js基本相同。  
不同点：
* 需要显式导入`from vuepy import defineProps`
* 需要显示地访问value来获取值`props.title.value`

在`<script lang='py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <p>hello {{ props.name.value }}</p>
</template>
<script lang='py'>
from vuepy import defineProps

props = defineProps(['name'])
</script>
```

```vue
<!-- App.vue -->
<template>
  <Hello name="world"></Hello>
</template>
```

在`<script src='xxx.py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <p>hello {{ props.name.value }}</p>
</template>
<script src='hello.py'></script>
```

```python
# hello.py
from vuepy import defineProps

def setup(props, ctx, app):
    props = defineProps(['name'])
    return locals()
```

```vue
<!-- App.vue -->
<template>
  <Hello name="world"></Hello>
</template>
```
### 监听事件

defineEmits和vue.js基本相同。  
不同点：
* 需要显式导入`from vuepy import defineEmits`
* 原生html标签的监听事件暂不支持

在`<script lang='py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <p>hello</p>
  <Button @click="submit">submit</Button>
</template>
<script lang='py'>
from vuepy import defineEmits

emit = defineEmits(['submit'])

def submit(ev):
    print(ev) # Button(description='submit', ...)
    emit('submit', 1, 2, 3)
</script>
```

```vue
<!-- App.vue -->
<template>
  <Hello @submit="on_child_submit"></Hello>
</template>
<script lang='py'>
def on_child_submit(a, b, c):
    print(a, b, c) # 1 2 3
</script>
```

在`<script src='xxx.py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <p>hello</p>
  <Button @click="submit">submit</Button>
</template>
<script src='hello.py'></script>
```

```python
# hello.py
from vuepy import defineEmits

def setup(props, ctx, app):
    emit = defineEmits(['submit'])

    def submit(ev):
        print(ev) # Button(description='submit', ...)
        emit('submit', 1, 2, 3)

    return locals()
```

```vue
<!-- App.vue -->
<template>
  <Hello @submit="on_child_submit"></Hello>
</template>
<script lang='py'>
def on_child_submit(a, b, c):
    print(a, b, c) # 1 2 3
</script>
```

### 组件 v-model

definModel和vue.js基本相同  
不同点：
* 需要显式导入`from vuepy import defineModel`
* 需要显示地访问value来获取值`xxx.value`
* 不支持处理v-model修饰符

在`<script lang='py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <Input v-model="model.value" placeholder="name"></Input>
  <p>child:hello {{ model.value }}</p>
</template>
<script lang='py'>
from vuepy import defineModel

model = defineModel('model_a')
model.value = 'world'
</script>
```

```vue
<!-- App.vue -->
<template>
  <Hello v-model:model_a="m.value"></Hello>
  <p>parent: hello {{ m.value }}</p>
</template>
<script lang='py'>
from vuepy import ref

m = ref('world')
</script>
```

在`<script src='xxx.py'>`中的使用示例：

```vue
<!-- Hello.vue -->
<template>
  <Input v-model="model.value" placeholder="name"></Input>
  <p>child:hello {{ model.value }}</p>
</template>
<script src='hello.py'></script>
```

```python
# hello.py
from vuepy import defineModel

def setup(props, ctx, app):
    model = defineModel() # default
    model.value = 'world'

    return locals()
```

```vue
<!-- App.vue -->
<template>
  <Hello v-model="m.value"></Hello>
  <p>parent: hello {{ m.value }}</p>
</template>
<script lang='py'>
from vuepy import ref

m = ref('world')
</script>
```
### 通过slot分配内容

slot和vue.js基本相同  
不同点：
* 只实现了最基本的功能
* 不支持动态插槽名
* 不支持作用域插槽

### 模版解析注意事项

和vue.js基本相同  
不同点：
* 不支持闭合标签，必须显式地写出关闭标签`<A></A>`
* 元素位置限制，在HTML元素中不支持嵌套自定义组件，例如div中不能放置Input等自定义组件，可以使用VBox或HBox替代div作为一种解决方案。
```vue
<!-- 原生html标签中不能嵌套自定义组件 -->
<div><Input></Input></div>
```
可用VBox代替
```vue
<VBox><Input></Input></VBox>
```
## 插件

和vue.js基本相同。  
不同点：
* 编写插件，继承`VuePlugin`并实现install方法。
```python
# plugins/i18n.py
from vuepy import VuePlugin

class I18nPlugin(VuePlugin):
    @classmethod
    def install(cls, app, options):
        # 在这里编写插件代码
        def s1_translate(key):
            # 获取 `options` 对象的深层属性
            # 使用 `key` 作为索引
            ret = option
            for k in key.split('.'):
                ret = option.get(k, {})
            return ret
            
        # 注入一个全局可用的 s1_translate() 方法
        # s1_ 与vue.js的$类似
        app.config.globalProperties.s1_translate = s1_translate
```
* 使用插件
```python
from plugin.i18n import I18nPlugin

app.use(I18nPlugin, options={
  'greetings': {
    'hello': 'Bonjour!',
  },
})
```
## ipython magic函数

需要先通过`%load_ext vuepy`或者`from vuepy.utils import magic`导入。

### 导入SFC组件

1. `%vuepy_import`通过文件导入组件
```python
from vuepy.utils import magic
# 导入 test.vue 组件
App=%vuepy_import test.vue
```
2. `%%vuepy_import`通过字符串导入组件，并将组件对象赋值给`{Component1}`变量
```python
%%vuepy_import Component1
<template>
  <Button description="add"
  ></Button>
</template>
```
如果需要访问当前jupyter笔记本中的变量可以通过以下方式
```python
# --- cell 1 ---
a = 1
# --- cell 2 ---
%%vuepy_import A
<template>
  <p>{{ a }}</p>
</template>
<script lang='py'>
from IPython import get_ipython
# 获取jupyter笔记本中的变量
locals().update(get_ipython().user_ns)
</script>
```

### 运行vuepy应用

1. `%vuepy_run`通过文件或组件变量运行应用
```python
%vuepy_run app.vue
```
```python
from vuepy import import_sfc
App = import_sfc("App.vue")
# 通过$$来引用变量
%vuepy_run $$App
```
2. `%%vuepy_run`通过字符串运行应用
```python
%%vuepy_run
<template>
  <Button description="add"
          button_style="info"
  ></Button>
</template>
```
如果需要访问当前jupyter笔记本中的变量可以通过以下方式
```python
# --- cell 1 ---
a = 1
# --- cell 2 ---
%%vuepy_run
<template>
  <p>{{ a }}</p>
</template>
<script lang='py'>
from IPython import get_ipython
# 获取jupyter笔记本中的变量
locals().update(get_ipython().user_ns)
</script>
```

### 实时获取vuepy运行日志

```python
# 打印所有日志
%vuepy_log
# 打印日志，但会清除之前的日志。
%vuepy_log clear
```
## 集成 Anywidget

示例演示与 anywidget 组件进行状态同步，并实现事件机制。

```vue
<template>
  <p>count: {{ count.value }}</p>
  <Counter v-model="count.value"></Counter>
</template>

<script lang="py">
import anywidget
import traitlets

from vuepy import ref, VueComponent

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    function render({ model, el }) {
      let count = () => model.get("value");
      let btn = document.createElement("button");
      btn.classList.add("counter-button");
      btn.innerHTML = `count is ${count()}`;
      btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
      });
      el.appendChild(btn);
    }
    export default { render };
    """
    _css = """
    .counter-button {
      background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);
      border: 0;
      border-radius: 10px;
      padding: 10px 50px;
      color: white;
    }
    """
    value = traitlets.Int(0).tag(sync=True)

class Counter(VueComponent):
    def render(self, ctx, props, setup_returned):
        attrs = ctx.get('attrs', {})
        return CounterWidget(**props, **attrs)

count = ref(0)
</script>
```

实现 container 类型的组件并集成 ipywui 组件 Button。

```vue
<template>
  <Container>
    <Button label="btn"></Button>
  </Container>
</template>

<script lang="py">
import anywidget
import traitlets
import ipywidgets as widgets

from vuepy import ref, VueComponent

# 使用anywidget开发Widget
class ContainerWidget(anywidget.AnyWidget):
    _esm = """
    async function unpack_models(model_ids, manager) {
      return Promise.all(
        model_ids.map(id => manager.get_model(id.slice("IPY_MODEL_".length)))
      );
    }
    export async function render(view) {
      let model = view.model;
      let el = view.el;
      let div = document.createElement("div");
      div.innerHTML = `<p>hello world</p>`;

      // 将子组件添加到父组件中
      let model_ids = model.get("children"); /* ["IPY_MODEL_{model_id>}", ...] */
      let children_models = await unpack_models(model_ids, model.widget_manager);
      for (let model of children_models) {
        let child_view = await model.widget_manager.create_view(model);
        div.appendChild(child_view.el);
      }

      el.appendChild(div);
    }
    """
    # slot
    children = traitlets.List(trait=traitlets.Instance(widgets.DOMWidget)) \
        .tag(sync=True, **widgets.widget_serialization)

# 集成ContainerWidget
class Container(VueComponent):
    def render(self, ctx, props, setup_returned):
        attrs = ctx.get('attrs', {})
        slots = ctx.get('slots', {})
        # 从slot中取出子组件并赋值给children
        return ContainerWidget(children=slots.get('default', []), **props, **attrs)

</script>
```

# ipywui

## ipywui组件库

IPywUI 是基于 Vue.py 和 ipywidgets 开发的 UI 组件库。当前作为 Vue.py 内置的 UI 组件库。

**安装**

```
pip install vuepy-core
```

ipywui组件作为Vuepy的插件提供，在`create_app`时会自动注册，也可以选择选择不自动注册`create_app(..., use_wui=False)`，显示调用`use`来注册：
```py
from vuepy import create_app, import_sfc
from ipywui import wui
App = import_sfc('App.vue')
app = create_app(App, use_wui=False)
app.use(wui)
app.mount()
```

设置ipywui组件的style属性可以改变其样式（与css非常相似）：
```
Sizes相关
* height
* width
* max_height
* max_width
* min_height
* min_width

颜色相关
* background-color
* color

Display相关
* visibility
* display
* overflow

Box model相关
* border
* margin
* padding

Positioning相关
* top
* left
* bottom
* right
```
示例
```vue
<Button style="background-color: #626aef;"></Button>
<Button style="width: 90px; height: 60px"></Button>
```
### Component, Button

特别注意：对于click的事件处理函数有两种方式：
1. 指定参数的方式：`@click=far()` 或 `@click=far(arg)`
2. 不指定参数的方式：`@click=handle`，会自动传入btn参数(当前按钮的widget对象)，所以handle函数必须接受一个参数：
```python
def handle(btn):
  ...
```

 可以通过icon属性为按钮添加图标，图标为fontawesome v5。

 支持Events

| 事件名 | 说明                  | 类型                                   |
| ---   | ---                  | ---                                    |
| click | 当按钮被点击时触发的事件 |  `Callable[button: Widget, None]` |

```vue
<!-- button/basic.vue -->
<template>
  <HBox>
    <Button @click="on_click()">Default</Button>
    <Button type="info" @click="async_click">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button label="Danger" type="danger"></Button>
  </HBox>
  <HBox>
    <Button icon="search" @click="on_click2"></Button>
    <Button type="info" icon="edit"></Button>
    <Button type="success" icon="check"></Button>
    <Button type="warning" icon="star">{{ count.value }}</Button>
    <Button type="danger" icon="trash-alt"></Button>
  </HBox>
</template>

<script setup>
import Button from "../../../src/ipywui/components/Button";
import HBox from "../../../src/ipywui/components/HBox";
</script>
<script lang="py">
import asyncio
from vuepy import ref

count = ref(1)

def on_click():
  count.value += 1
  print("on click")

def on_click2(btn):
  print(f"{btn} on click") # Button(icon='search', style=ButtonStyle()) on click

# support async def
async def async_click(btn):
  btn.loading = True
  await asyncio.sleep(1)
  btn.loading = False
</script>
```

```vue
<!-- button/loading.vue -->
<template>
  <Button type="info" loading @click="click1">Default Loading</Button>
  <Button loading-icon="snowflake"
          :loading="loading.value"
          @click="click2()"
  >Custom Loading</Button>
</template>
<script setup>
import Button from "../../../src/ipywui/components/Button";
</script>
<script lang="py">
from vuepy import ref

def click1(btn):
    btn.loading = not btn.loading


loading = ref(True)

def click2():
    loading.value = not loading.value
</script>
```

### Component, Layout

通过基础的24分栏创建布局。
```vue
<!-- layout/layout-basic.vue -->
<template>
  <Row>
    <Col :span="24">
      <Button label="span 24" style="width: auto; background-color: #9dacc1"></Button>
    </Col>
  </Row>

  <Row>
    <Col :span="12">
      <Button label="span 12" style="width: auto; background-color: #d4dde6"></Button>
    </Col>
    <Col :span="12">
      <Button label="span 12" style="width: auto; background-color: #e5e9f2"></Button>
    </Col>
  </Row>

  <Row>
    <Col :span="8">
      <Button label="span 8" style="width: auto; background-color: #d4dde6"></Button>
    </Col>
    <Col :span="8">
      <Button label="span 8" style="width: auto; background-color: #e5e9f2"></Button>
    </Col>
    <Col :span="8">
      <Button label="span 8" style="width: auto; background-color: #d4dde6"></Button>
    </Col>
  </Row>

  <Row>
    <Col :span="6">
      <Button label="span 6" style="width: auto; background-color: #d4dde6"></Button>
    </Col>
    <Col :span="6">
      <Button label="span 6" style="width: auto; background-color: #e5e9f2"></Button>
    </Col>
    <Col :span="6">
      <Button label="span 6" style="width: auto; background-color: #d4dde6"></Button>
    </Col>
    <Col :span="6">
      <Button label="span 6" style="width: auto; background-color: #e5e9f2"></Button>
    </Col>
  </Row>
</template>

<script setup>
import Col from "../../../src/ipywui/components/Col";
import Row from "../../../src/ipywui/components/Row";
import Button from "../../../src/ipywui/components/Button";
</script>
```

### Component, AppLayout

用于布局的容器组件，方便搭建页面的基本结构：
```vue
<!-- layout_app/layout-hc.vue -->
<template>
  <AppLayout>
    <template v-slot:header>
      <Button
          label="header"
          style="width: auto; height: auto; background-color: #c8e3fe"
      ></Button>
    </template>
    <template v-slot:center>
      <Button
          style="width: auto; height: auto; background-color: #ecf5fe"
      ></Button>
      <Button
          label="center"
          style="width: auto; height: auto; background-color: #ecf5fe"
      ></Button>
      <Button
          style="width: auto; height: auto; background-color: #ecf5fe"
      ></Button>
    </template>
  </AppLayout>
</template>

<script setup>
import Button from "../../../src/ipywui/components/Button";
import AppLayout from "../../../src/ipywui/components/AppLayout";
</script>
```

```vue
<!-- layout_app/custom.vue -->
<template>
  <AppLayout :pane_widths="['100px', 1, 1]" :pane_heights="[1, 3, '30px']">
    <template v-slot:header>
      <Button label="header" style="width: auto; height: auto; background-color: #c8e3fe"></Button>
    </template>
    <template v-slot:left_sidebar>
      <Button label="" style="width: auto; height: auto; background-color: #dbecfe"></Button>
      <Button label="left 100px" style="width: auto; height: auto; background-color: #dbecfe"></Button>
      <Button label="" style="width: auto; height: auto; background-color: #dbecfe"></Button>
    </template>
    <template v-slot:right_sidebar>
      <Button label="" style="width: auto; height: auto; background-color: #dbecfe"></Button>
      <Button label="right" style="width: auto; height: auto; background-color: #dbecfe"></Button>
      <Button label="" style="width: auto; height: auto; background-color: #dbecfe"></Button>
    </template>
    <template v-slot:center>
      <Button style="width: auto; height: auto; background-color: #ecf5fe"></Button>
      <Button label="center" style="width: auto; height: auto; background-color: #ecf5fe"></Button>
      <Button style="width: auto; height: auto; background-color: #ecf5fe"></Button>
    </template>
    <template v-slot:footer>
      <Button label="footer" style="width: auto; height: auto; background-color: #c8e3fe"></Button>
    </template>
  </AppLayout>
</template>

<script setup>
import Button from "../../../src/ipywui/components/Button";
import AppLayout from "../../../src/ipywui/components/AppLayout";
</script>
```

您还可以使用以下参数自定义面板宽高：
* `pane_widths`: 左侧边栏，主要区域，右侧边栏的绝对或相对宽度
* `pane_heights`: 顶栏，主要区域，底栏的绝对或相对高度

两者都接受3个元素的序列，每个元素要么是整数或`'1fr'`（与整数相同）表示相对占比。或者为`'100px'`形式，表示绝对占比。

注意使用绑定属性的形式：

```vue
<AppLayout :pane_widths="['100px', 1, 1]" :pane_heights="[1, 5, '60px']">
...
</AppLayout>
```
### Component, Box Layout 
```vue
<!-- layout_box/vbox-basic.vue -->
<template>
  <VBox>
    <Button label="1" style="width: auto; background-color: #c8e3fe"></Button>
    <Button label="2" style="width: auto; background-color: #ecf5fe"></Button>
    <Button label="3" style="width: auto; background-color: #c8e3fe"></Button>
  </VBox>
</template>

<script setup>
import Button from "../../../src/ipywui/components/Button";
import VBox from "../../../src/ipywui/components/VBox";
</script>
```

```vue
<!-- layout_box/hbox-basic.vue -->
<template>
  <HBox>
    <Button label="1" style="width: auto;background-color: #c8e3fe"></Button>
    <Button label="2" style="width: auto;background-color: #ecf5fe"></Button>
    <Button label="3" style="width: auto;background-color: #c8e3fe"></Button>
  </HBox>
</template>

<script setup>
import Button from "../../../src/ipywui/components/Button";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```

### Component, Checkbox
```vue
<!-- checkbox/basic.vue -->
<template>
  <HBox>
    <Checkbox v-model="checked1.value" label="Option1" @change="on_change"></Checkbox>
    <Checkbox v-model="checked2.value" label="Option2"></Checkbox>
    <Checkbox v-model="checked3.value" label="Option3"></Checkbox>
  </HBox>
  <HBox>
    <Checkbox v-model="checked1.value" label="Option1" :disabled="True"></Checkbox>
    <Checkbox v-model="checked2.value" label="Option2" :disabled="True"></Checkbox>
    <Checkbox v-model="checked3.value" label="Option3" :disabled="True"></Checkbox>
  </HBox>
</template>
<script setup>
import HBox from "../../../src/ipywui/components/HBox";
import Checkbox from "../../../src/ipywui/components/Checkbox";
</script>
<script lang="py">
from vuepy import ref

checked1 = ref(True)
checked2 = ref(True)
checked3 = ref(True)

def on_change(event):
    print(event) # {'new': True, 'old': False, 'owner': Checkbox(...)}
</script>
```

### Component, ColorPicker
```vue
<!-- color_picker/basic.vue -->
<template>
  <ColorPicker label="Pick1"
               v-model="color1.value" @change="on_change"></ColorPicker>

  <ColorPicker label="Pick2"
               value="lightblue"></ColorPicker>

  <ColorPicker label="Concise"
               v-model="color2.value" concise></ColorPicker>
</template>

<script setup>
import ColorPicker from "../../../src/ipywui/components/ColorPicker";
</script>
<script lang="py">
from vuepy import ref

color1 = ref("#8f8fcc")
color2 = ref("green")

def on_change(event):
    print(event) # {'new': '#3737ae', 'old': '#8f8fcc', 'owner': ColorPicker(...)}
</script>
```

### Component, Combobox

Provide corresponding input suggestions based on the input content.
```vue
<!-- combobox/basic.vue -->
<template>
  <Combobox label="auto"
            placeholder="Choose someone"
            v-model="someone.value"
            :options="['Paul', 'John', 'George', 'Ringo']"
  ></Combobox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Combobox from "../../../src/ipywui/components/Combobox";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    someone = ref('')

    return locals()

```

### Component, DatePicker
```vue
<!-- date_picker/basic.vue -->
<template>
  <DatePicker label="Pick a day" v-model="date.value" @change="on_change"></DatePicker>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    date = ref(None)

    def on_change(event):
        print(event) # {'new': datetime.date(2025, 3, 22), 'old': None, 'owner': DatePicker(...)}

    return locals()

```

```vue
<!-- date_picker/basic-range.vue -->
<template>
  <Input :value="str(min_day) + ' to ' + str(max_day)"></Input>
  <DatePicker label="Pick a day"
              v-model="day.value"
              :min="min_day"
              :max="max_day"
  ></DatePicker>
</template>

<script src="./basic_range_setup.py"></script>
<script setup>
import DatePicker from "../../../src/ipywui/components/DatePicker";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_range_setup.py

import datetime

from vuepy import ref


def setup(props, ctx, vm):
    day = ref(None)

    min_day = datetime.date(2021, 1, 1)
    max_day = datetime.date(2024, 1, 1)

    return locals()

```

### Component, DateTimePicker
```vue
<!-- datetime_picker/basic.vue -->
<template>
  <DateTimePicker label="Pick a time"
                  v-model="datetime.value"
                  @change="on_change"
  ></DateTimePicker>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import DateTimePicker from "../../../src/ipywui/components/DateTimePicker";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    datetime = ref(None)

    def on_change(event):
        print(event) # {'new': datetime.datetime(2025, 3, 22, 12, 0), 'old': None, 'owner': DateTimePicker(...)}

    return locals()

```

```vue
<!-- datetime_picker/basic-range.vue -->
<template>
  <Input :value="str(min_time) + ' to ' + str(max_time)"></Input>
  <DateTimePicker label="Pick a day"
              v-model="time.value"
              :min="min_time"
              :max="max_time"
  ></DateTimePicker>
</template>

<script src="./basic_range_setup.py"></script>
<script setup>
import DateTimePicker from "../../../src/ipywui/components/DateTimePicker";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_range_setup.py

import datetime

from vuepy import ref


def setup(props, ctx, vm):
    time = ref(None)

    tz = datetime.timezone(datetime.timedelta(seconds=28800), 'CST')
    min_time = datetime.datetime(2021, 1, 1, tzinfo=tz)
    max_time = datetime.datetime(2024, 1, 1, tzinfo=tz)

    return locals()

```

### Component, TimePicker
```vue
<!-- time_picker/basic.vue -->
<template>
  <TimePicker label="HH::mm"
              v-model="time.value"
              @change="on_change"
  ></TimePicker>

  <TimePicker label="HH::mm::ss"
              v-model="time.value"
              :step="1"
  ></TimePicker>
</template>

<script setup>
import TimePicker from "../../../src/ipywui/components/TimePicker";
</script>
<script lang="py">
from vuepy import ref

time = ref(None)

def on_change(event):
    print(event) # {'new': datetime.time(12, 0), 'old': None, 'owner': TimePicker(...)}

</script>
```

```vue
<!-- time_picker/basic-range.vue -->
<template>
  <Input :value="str(min_time) + ' to ' + str(max_time)"></Input>
  <TimePicker label="HH::mm::ss"
              v-model="time.value"
              :min="min_time"
              :max="max_time"
              :step="1"
  ></TimePicker>
</template>

<script src="./basic_range_setup.py"></script>
<script setup>
import TimePicker from "../../../src/ipywui/components/TimePicker";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_range_setup.py

import datetime

from vuepy import ref


def setup(props, ctx, vm):
    time = ref(None)
    min_time = datetime.time(10, 10, 0)
    max_time = datetime.time(12, 10, 0)

    return locals()

```

### Component, Input

输入字符串
```vue
<!-- input/basic.vue -->
<template>
  <VBox>
    <Input label="input"
           placeholder="Please input"
           v-model="text1.value"
           @change="on_change"
    ></Input>

    <Input label="input"
           placeholder="continuous update"
           v-model="text2.value"
           continuous_update
           @change="on_change2"
    ></Input>
  </VBox>
</template>

<script setup>
import VBox from "../../../src/ipywui/components/VBox";
import Input from "../../../src/ipywui/components/Input";
</script>
<script lang="py">
from vuepy import ref

text1 = ref("")
text2 = ref("")

# called when enter key is pressed or the input is blurred
def on_change(value):
    print(value) # {'new': 'hello', 'old': '', 'owner': Text(...)}

# called when the input is changed
def on_change2(value):
    print(value) # {'new': 'hello', 'old': '', 'owner': Text(...)}
</script>

```

```vue
<!-- input/textarea.vue -->
<template>
  <Input label="Textarea" type="textarea" value="Please input"></Input>
</template>

<script setup>
import Input from "../../../src/ipywui/components/Input";
</script>
```

```vue
<!-- input/password.vue -->
<template>
  <Input label="Password" type="password" value="xxx"></Input>
</template>

<script setup>
import Input from "../../../src/ipywui/components/Input";
</script>
```

### Component, Input Number

输入标准的数字值，可定义范围
```vue
<!-- input_number/basic.vue -->
<template>
  <VBox>
    <InputNumber description="int number"
                 v-model="num.value"
                 :min="1"
                 :max="100"
                 @change="on_change"
    ></InputNumber>

    <InputNumber description="float number"
                 v-model="num_float.value"
                 :min="1"
                 :max="100"
    ></InputNumber>
  </VBox>
</template>

<script setup>
import InputNumber from "../../../src/ipywui/components/InputNumber";
import VBox from "../../../src/ipywui/components/VBox";
</script>
<script lang="py">
from vuepy import ref

num = ref(1)
num_float = ref(1.1)

# called when enter key is pressed or the input is blurred
def on_change(value):
    print(value) # {'new': 1, 'old': 1, 'owner': IntText(...)}
</script>

```

```vue
<!-- input_number/steps.vue -->
<template>
  <InputNumber description="step" :step="2"></InputNumber>
</template>

<script setup>
import InputNumber from "../../../src/ipywui/components/InputNumber";
</script>
```

### Component, RadioButtons

`v-model` 或初始值必须是 options 中的值或者为`None`。
```vue
<!-- radio_buttons/basic.vue -->
<template>
  <RadioButtons description="Options ['pepperoni', 'pineapple', 'anchovies']"
                v-model="choice1.value"
                :options="options1"
                @change="on_change1"
  ></RadioButtons>

  <RadioButtons description="Options [('One', 1), ('Two', 2), ('Three', 3)]"
                v-model="choice2.value"
                :options="options2"
                @change="on_change2"
  ></RadioButtons>

</template>

<script setup>
import RadioButtons from "../../../src/ipywui/components/RadioButtons";
</script>
<script lang="py">
from vuepy import ref

options1 = ['pepperoni', 'pineapple', 'anchovies']
choice1 = ref(options1[0])

options2 = [('One', 1), ('Two', 2), ('Three', 3)]
choice2 = ref(options2[0][1])

def on_change1(event):
    print(event) # {'new': 'pineapple', 'old': 'pepperoni', 'owner': RadioButtons(...)}

def on_change2(event):
    print(event) # {'new': 2, 'old': 1, 'owner': RadioButtons(...)} 
</script>
```

### Component, Select
```vue
<!-- select/basic.vue -->
<template>
  <Select description="OS:"
          :rows="1"
          :options="['Linux', 'Win', 'macOS']"
          v-model="choice.value"
          @change="on_change"
  ></Select>

  <Select description="OS:"
          :options="radio_items"
          v-model="choice2.value"
          @change="on_change2"
  ></Select>
</template>

<script setup>
import Select from "../../../src/ipywui/components/Select";
</script>
<script lang="py">
from vuepy import ref

choice = ref('macOS')

radio_items = [('One', 1), ('Two', 2), ('Three', 3)]
choice2 = ref(radio_items[0][1])

def on_change(event):
    print(event) # {'new': 'Linux', 'old': 'macOS', 'owner': Select(...)}

def on_change2(event):
    print(event) # {'new': 2, 'old': 1, 'owner': Select(...)}

</script>
```

```vue
<!-- select/multiple.vue -->
<template>
  <Select description="OS:"
          :options="options"
          v-model="choices.value"
          :rows="2"
          @change="on_change"
          multiple
  ></Select>

  <Select description="OS:"
          :options="options"
          v-model="choices2.value"
          multiple
          @change="on_change2"
  ></Select>
</template>
<script setup>
import Select from "../../../src/ipywui/components/Select";
</script>
<script lang="py">
from vuepy import ref

options = ['Linux', 'Win', 'macOS']
choices = ref([])

choices2 = ref(options[:2])

def on_change(event):
    print(event) # {'new': ('Linux', 'macOS'), 'old': (), 'owner': Select(...)}

def on_change2(event):
    print(event) # {'new': ('Linux', ), 'old': ('Linux', 'Win'), 'owner': Select(...)}

</script>
```

### Component, SelectColors
```vue
<!-- select_colors/basic.vue -->
<template>
  <SelectColors v-model="colors.value"></SelectColors>
  <Input :value="', '.join(colors.value)"></Input>

  <SelectColors unique></SelectColors>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import SelectColors from "../../../src/ipywui/components/SelectColors";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    colors = ref(['red', 'green', '#0000ff'])
    return locals()

```

```vue
<!-- select_colors/allowed_tags.vue -->
<template>
  <SelectColors
      :value="['lightgreen', 'lightgray']"
      :allowed_tags="['lightgreen', 'lightgray', 'lightblue']"
  ></SelectColors>
</template>

<script setup>
import SelectColors from "../../../src/ipywui/components/SelectColors";
</script>
```

### Component, SelectNumbers
```vue
<!-- select_numbers/basic.vue -->
<template>
  <SelectNumbers v-model="nums.value"
                 @change="on_change"
  ></SelectNumbers>
  <p>float nums: {{ nums.value }}</p>

  <SelectNumbers v-model="int_nums.value"
                 data_type="int"
  ></SelectNumbers>
  <p>int nums: {{ int_nums.value }}</p>
</template>
<script setup>
import SelectNumbers from "../../../src/ipywui/components/SelectNumbers";
</script>
<script lang="py">
from vuepy import ref

nums = ref([1, 2, 3])
int_nums = ref([1, 2, 3])

# called when enter key is pressed or the input is blurred
def on_change(value):
    print(value) # {'new': [1, 2], 'old': [1, 2, 3], 'owner': FloatsInput(...)}

</script>

```

```vue
<!-- select_numbers/basic-range.vue -->
<template>
  <SelectNumbers :value="[1, 2, 3]" :min="1" :max="10"
                 data_type="int"></SelectNumbers>
</template>

<script setup>
import SelectNumbers from "../../../src/ipywui/components/SelectNumbers";
</script>
```

### Component, SelectTags
```vue
<!-- select_tags/basic.vue -->
<template>
  <SelectTags v-model="tags.value"
             @change="on_change"
  ></SelectTags>
  <p>basic: {{ tags.value }}</p>

  <SelectTags v-model="unique_tags.value" unique></SelectTags>
  <p>unique: {{ unique_tags.value }}</p>
</template>

<script setup>
import SelectTags from "../../../src/ipywui/components/SelectTags";
</script>
<script lang="py">
from vuepy import ref

tags = ref(['tag1', 'tag2', 'tag3'])
unique_tags = ref(['t1', 't2', 't3'])

# called when enter key is pressed or the input is blurred
def on_change(value):
    print(value) # {'new': ['tag1', 'tag2'], 'old': ['tag1', 'tag2', 'tag3'], 'owner': TagsInput(...)}
</script>

```

```vue
<!-- select_tags/allowed_tags.vue -->
<template>
  <Input value="allowed_tags ['a', 'b', 'c']"></Input>
  <SelectTags
      :value="['a', 'b']"
      :allowed_tags="['a', 'b', 'c']"
  ></SelectTags>
</template>

<script setup>
import Input from "../../../src/ipywui/components/Input";
import SelectTags from "../../../src/ipywui/components/SelectTags";
</script>
```

### Component, Slider
```vue
<!-- slider/basic.vue -->
<template>
  <Slider description="Default" v-model="default.value"></Slider>
  <Slider description="Init val 5" v-model="init_val.value"></Slider>
  <Slider description="Float"
          v-model="float_val.value"
          :min="0"
          :max="30"
          @change="on_change"
  ></Slider>
  <Slider description="Selection"
          v-model="selection_val.value"
          :options="selection_options"
  ></Slider>
  <Slider description="Disabled" :value="1" disabled></Slider>
</template>

<script setup>
import Slider from "../../../src/ipywui/components/Slider";
</script>
<script lang="py">
from vuepy import ref

default = ref(0)
init_val = ref(5)
float_val = ref(10.1)
selection_val = ref('a')
selection_options = ['a', 'b', 'c', 'd']

def on_change(event):
    print(event) # {'new': 10.1, 'old': 10.1, 'owner': Slider(...)}

</script>
```

```vue
<!-- slider/range-selection.vue -->
<template>
  <Slider description="Int range"
          v-model="int_range.value"
          :max="10"
          range
          @change="on_change"
  ></Slider>
  <Slider description="Float range"
          v-model="float_range.value"
          :min="0.0"
          :max="10.0"
          range
  ></Slider>
  <Slider description="Selection range"
          v-model="selection_range.value"
          :options="selection_options"
          style="description-width: 100px"
          range
  ></Slider>
</template>

<script setup>
import Slider from "../../../src/ipywui/components/Slider";
</script>
<script lang="py">
from vuepy import ref

int_range = ref([1, 3])
float_range = ref([1.1, 3.1])
selection_range = ref(['a', 'c'])
selection_options = ['a', 'b', 'c', 'd']

def on_change(event):
    print(event) # {'new': (1, 3), 'old': (1, 5), 'owner': Slider(...)}

</script>
```

```vue
<!-- slider/vertical.vue -->
<template>
  <HBox>
    <Slider description="Float"
            :value="3"
            :min="0.0"
            :max="30"
            vertical
    ></Slider>
    <Slider description="Selection"
            value="b"
            :options="['a', 'b', 'c']"
            vertical
    ></Slider>
  </HBox>
</template>

<script setup>
import Slider from "../../../src/ipywui/components/Slider";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```

```vue
<!-- slider/show-marks.vue -->
<template>
  <Input :value="str(selection.value)"></Input>
  <Slider description="Selection"
          v-model="selection.value"
          :options="selection_options"
          style="description-width: 100px"
  ></Slider>
  <Input :value="str(selection_range.value)"></Input>
  <Slider description="Selection range"
          v-model="selection_range.value"
          :options="selection_options"
          style="description-width: 100px"
          range
  ></Slider>
</template>

<script src="./show_marks_setup.py"></script>
<script setup>
import Slider from "../../../src/ipywui/components/Slider";
import Input from "../../../src/ipywui/components/Input";
</script>

```
```python
# ./show_marks_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    selection_options = [('0°C', 0), ('5°C', 5), ('10°C', 10), ('37°C', 37)]
    selection = ref(10)
    selection_range = ref([5, 37])

    return locals()

```

### Component, ToggleButton

表示两种相互对立的状态间的切换，多用于触发「开/关」
```vue
<!-- toggle_button/basic.vue -->
<template>
  <HBox>
    <ToggleButton label="on" :value="True" @change="on_change"></ToggleButton>
    <ToggleButton label="off" :value="False"></ToggleButton>
  </HBox>
  <HBox>
    <ToggleButton type="info" :value="True"></ToggleButton>
    <ToggleButton type="info" :value="False"></ToggleButton>
    </HBox>
  <HBox>
    <ToggleButton type="success" v-model="val1.value"></ToggleButton>
    <ToggleButton type="success" :value="False"></ToggleButton>
    </HBox>
  <HBox>
    <ToggleButton type="warning" :value="True"></ToggleButton>
    <ToggleButton type="warning"></ToggleButton>
    </HBox>
  <HBox>
    <ToggleButton type="danger" :value="True"></ToggleButton>
    <ToggleButton type="danger" :value="False"></ToggleButton>
  </HBox>
</template>

<script setup>
import ToggleButton from "../../../src/ipywui/components/ToggleButton";
import HBox from "../../../src/ipywui/components/HBox";
</script>
<script lang="py">
from vuepy import ref

val1 = ref(True)

def on_change(event):
    print(event) # {'new': False, 'old': True, 'owner': ToggleButton(...)}

</script>
```

### Component, ToggleButtons

在一组备选项中进行单选
```vue
<!-- toggle_buttons/basic.vue -->
<template>
  <ToggleButtons description="Options ['pepperoni', 'pineapple', 'anchovies']"
                 v-model="choice1.value"
                 :options="options1"
                 @change="on_change"
  ></ToggleButtons>

  <ToggleButtons description="Options [('One', 1), ('Two', 2), ('Three', 3)]"
                 v-model="choice2.value"
                 :options="options2"
                 @change="on_change"
  ></ToggleButtons>

  <!--  style-->
  <ToggleButtons description="Style success"
                 type="success"
                 :options="options2"
  ></ToggleButtons>
  <ToggleButtons description="Style info"
                 type="info"
                 :options="options2"
  ></ToggleButtons>
  <ToggleButtons description="Style warning"
                 type="warning"
                 :options="options2"
  ></ToggleButtons>
  <ToggleButtons description="Style danger"
                 type="danger"
                 :options="options2"
  ></ToggleButtons>

  <!--  icon-->
  <ToggleButtons description="With icons"
                 :icons="['walking', 'car-side', 'plane']"
                 :options="['walking ', 'car ', 'plane ']"
  ></ToggleButtons>

</template>

<script setup>
import ToggleButtons from "../../../src/ipywui/components/ToggleButtons";
</script>
<script lang="py">
from vuepy import ref

options1 = ['pepperoni', 'pineapple', 'anchovies']
choice1 = ref(options1[0])

options2 = [('One', 1), ('Two', 2), ('Three', 3)]
choice2 = ref(options2[0][1])

def on_change(event):
    print(event) # {'new': 'pepperoni', 'old': 'pineapple', 'owner': ToggleButtons(...)}

def on_change2(event):
    print(event) # {'new': 1, 'old': 0, 'owner': ToggleButtons(...)}

</script>
```

### Component, File Upload
```vue
<!-- file_upload/basic.vue -->
<template>
  <FileUpload v-model="files.value" accept=".txt"></FileUpload>
  <Input label="file info"
         :value="upload_file.value"
         type="textarea"
         style="height: 200px"
  ></Input>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import FileUpload from "../../../src/ipywui/components/FileUpload";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_setup.py

import codecs
import json

from vuepy import computed
from vuepy import ref


def setup(props, ctx, vm):
    files = ref([])

    def get_first_file():
        file_info = {}
        if files.value:
            file_info = files.value[0]
            content = file_info['content']
            file_info['content'] = codecs.decode(content, encoding='utf-8')
            file_info['last_modified'] = str(file_info['last_modified'])

        return json.dumps(file_info, indent=2)

    upload_file = computed(get_first_file)

    return locals()

```

### Component, Accordion
```vue
<!-- accordion/basic.vue -->
<template>
  <Accordion v-model="selected.value" @change="on_change">
    <AccordionItem title="Item0">
      <Slider description="slider"></Slider>
    </AccordionItem>

    <AccordionItem title="Item1">
      <Input placeholder="input"></Input>
    </AccordionItem>

    <AccordionItem title="Item2">
      <Button label="click" type="info"></Button>
    </AccordionItem>

  </Accordion>
</template>
<script setup>
import Accordion from "../../../src/ipywui/components/Accordion";
import AccordionItem from "../../../src/ipywui/components/AccordionItem";
import Slider from "../../../src/ipywui/components/Slider";
import Input from "../../../src/ipywui/components/Input";
import Button from "../../../src/ipywui/components/Button";
</script>
<script lang="py">
from vuepy import ref

selected = ref(1)

def on_change(event):
    print(event) # {'new': 1, 'old': 0, 'owner': Accordion(...)}
</script>
```

### Component, Display

支持IPython提供的所有display tools，如Video、Audio、HTML等，也可以用来集成并展示第三方组件。
展示 matplotlib 绘制的图，并利用布局组件进行排列。
```vue
<!-- display/matplotlib.vue -->
<template>
  <HBox>
    <Display :obj="plt1.value"></Display>
    <Display :obj="plt2.value"></Display>
  </HBox>
  <Display :obj="plt3.value" multi_thread></Display>
</template>

<script src="./matplotlib_setup.py"></script>
<script setup>
import Display from "../../../src/ipywui/components/Display";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```
```python
# ./matplotlib_setup.py

import matplotlib.pyplot as plt
import numpy as np

from vuepy import ref


def plt_to_img(title, xlabel, ylabel):
    """
    plt to matplotlib.figure.Figure
    """
    plt.xlabel(xlabel)
    plt.ylabel(ylabel)
    plt.title(title)
    plt.grid(True)
    # plt.show()
    im = plt.gcf()
    plt.close()
    return im


def plt_sin():
    x = np.arange(0, 5 * np.pi, 0.1)
    y = np.sin(x)
    plt.plot(x, y, color='green')
    return plt_to_img('Sine Curve using Matplotlib', 'x', 'sin(x)')


def plt_cos():
    x = np.arange(0, 5 * np.pi, 0.1)
    y = np.cos(x)
    plt.plot(x, y, color='blue')
    return plt_to_img('Cosine Curve using Matplotlib', 'x', 'sin(x)')


def plt_scatter():
    np.random.seed(1)
    data_x = np.random.randn(100)
    data_y = np.random.randn(100)
    plt.scatter(data_x, data_y, color='blue', alpha=0.5)
    return plt_to_img('Scatter Plot Example', 'x', 'y')


def setup(props, ctx, vm):
    plt1 = ref(plt_sin())
    plt2 = ref(plt_scatter())
    plt3 = ref(plt_cos())

    return locals()

```

展示 PIL 图片
```vue
<!-- pil.vue -->
<template>
  <Display :obj="pil_img"></Display>
</template>

<script setup>
import Display from "../../../src/ipywui/components/Display";
</script>
<script lang="py">
from PIL import Image

pil_img = Image.open("jupyter_logo.jpg")

</script>
```
展示 Video、Audio
```vue
<!-- display/video_audio.vue -->
<template>
  <Display :obj="video"></Display>
  <p>注意：先调节音量</p>
  <Display :obj="audio"></Display>
</template>

<script setup>
import Display from "../../../src/ipywui/components/Display";
</script>
<script lang="py">
import numpy as np
from IPython.display import Video
from IPython.display import Audio

video_src = "https://github.com/vuepy/vuepy/raw/refs/heads/master/examples/ipywui/display/sora.mp4"
video = Video(video_src, width=350)

# gen sound
sr = 22050
T = 0.5
t = np.linspace(0, T, int(T * sr), endpoint=False)
x = 0.5 * np.sin(2 * np.pi * 440 * t)

audio = Audio(x, rate=sr)


</script>

```

展示 Pandas Dataframe
```vue
<!-- display/pandas-dataframe.vue -->
<template>
  <Display :obj="df1"></Display>
  <Display :obj="df2"></Display>
</template>

<script setup>
import Display from "../../../src/ipywui/components/Display";
</script>
<script lang="py">
import pandas as pd

df1 = pd.DataFrame(data={
    'col1': [1, 2],
    'col2': [3, 4],
    'col3': [5, 6],
})

df2 = pd.DataFrame(data={
    'col1': ['a', 'b'],
    'col2': ['c', 'd'],
    'col3': ['e', 'f'],
})

</script>

```

利用 Display 组件集成基于 plotly 的绘图组件。
```vue
<!-- display/plotly.vue -->
<template>
  <Dropdown v-model="freq.value" :options="frequencies" description="Frequency"></Dropdown>
  <Slider v-model="amplitude.value" description="Amplitude"></Slider>
  <Display :obj="fig"></Display>
</template>

<script setup>
import Display from "../../../src/ipywui/components/Display";
import Dropdown from "../../../src/ipywui/components/Dropdown";
import Slider from "../../../src/ipywui/components/Slider";
</script>
<script lang="py">
import plotly.graph_objects as go
import numpy as np
from vuepy import ref, watch

frequencies = [1, 2, 3, 4]

freq = ref(frequencies[0])
amplitude = ref(1.0)

fig = go.FigureWidget()
x = np.linspace(0, 10, 400)
waves = {f: np.sin(x * f) for f in frequencies}
fig.add_trace(go.Scatter(x=x, y=waves[freq.value], name=f'Frequency {freq.value}'))


@watch([freq, amplitude])
def update_figure(new_val, _, __):
    frequency, amplitude = new_val
    fig.data[0].y = waves[frequency] * amplitude
    fig.data[0].name = f'Frequency {frequency} (Amp: {amplitude:.1f})'
    fig.update_layout(title=f'Interactive Sine Wave (Frequency: {frequency}, Amplitude: {amplitude:.1f})')

</script>

```

利用 Display 组件集成基于 ipywidgets 的任意 widget。
```vue
<!-- display/ipywidgets.vue -->
<template>
<Display :obj="widget.value"></Display>
</template>

<script src="./ipywidgets_setup.py"></script>
<script setup>
import Display from "../../../src/ipywui/components/Display";
</script>
```
```python
# ./ipywidgets_setup.py

import ipywidgets as widgets
from IPython.display import display

from vuepy import ref


def setup(props, ctx, vm):
    a = widgets.IntSlider(description='a')
    b = widgets.IntSlider(description='b')
    c = widgets.IntSlider(description='c')

    def f(a, b, c):
        html = '<p style="color: red">{}*{}*{}={}</p>'.format(a, b, c, a * b * c)
        display(widgets.HTML(html))

    out = widgets.interactive_output(f, {'a': a, 'b': b, 'c': c})
    vbox = widgets.VBox([widgets.VBox([a, b, c]), out])
    widget = ref(vbox)

    return locals()

```

### Component, Image
```vue
<!-- image/basic.vue -->
<template>
  <Image v-model="img.value" format="png" style="width: 200px"></Image>

  <Image
      v-model="img.value" format="png"
      style="width: 200px; border: 2px solid deepskyblue"
  ></Image>

  <Image
      v-model="img.value" format="png"
      :style="'width: 200px; border: 2px solid {}'.format('blue')"
  ></Image>
</template>

<script setup>
import Image from "../../../src/ipywui/components/Image";
</script>
<script lang="py">
from vuepy import ref

file = open("jupyter_logo.png", "rb")
img = ref(file.read())
</script>
```

```vue
<!-- image/pil_img.vue -->
<template>
  <Image :value="pil_img" style="width: 200px"></Image>
</template>

<script setup>
import Image from "../../../src/ipywui/components/Image";
</script>
<script lang="py">
from vuepy import ref
from PIL import Image

pil_img = Image.open("jupyter_logo.png")
</script>
```

```vue
<!-- image/numpy_ndarray.vue -->
<template>
  <Image :value="rgb_png" width="30%"></Image>
  <Image :value="gray_png" width="100px"></Image>
  <Image :value="img_png" width="100px"></Image>
</template>

<script src="./numpy_ndarray.py"></script>
<script>
import Image from "../../../src/ipywui/components/Image";
</script>

```
```python
# ./numpy_ndarray.py

import numpy as np
from PIL import Image

from vuepy.utils.image_processer import convert_opencv_image_to_bin
from vuepy.utils.image_processer import convert_pil_image_to_bin


def setup(props, ctx, vm):
    img_array = np.zeros([100, 100, 3], dtype=np.uint8)
    img_array[:, :, 2] = 200
    # ndarray to rgb img
    rgb_png = Image.fromarray(img_array, mode='RGB')
    # 必须指定format
    rgb_png.format = 'PNG'


    img_array = np.zeros([100, 100, 1], dtype=np.uint8)
    img_array += 122
    # ndarray to gray img
    img = Image.fromarray(img_array.squeeze(), 'L')
    gray_png = convert_pil_image_to_bin(img, 'PNG')


    import cv2 as cv
    cv_img = cv.imread("jupyter_logo.png", cv.IMREAD_UNCHANGED)

    # method1: opencv to pil
    img_png = Image.fromarray(cv.cvtColor(cv_img, cv.COLOR_BGRA2RGBA))
    img_png.format = "PNG"

    # # method2: opencv to bin
    # img_png = convert_opencv_image_to_bin(cv_img, '.png')

    return locals()

```

### Component, Label
```vue
<!-- label/basic.vue -->
<template>
  <HBox>
    <Label>The $E=mc^2$ </Label><Slider :value="1.0"></Slider>
  </HBox>
  <HBox>
    <Label>Value {{ val.value }}</Label><Slider v-model="val.value"></Slider>
  </HBox>
  <HBox>
    <Label value="slider"></Label><Slider :value="1.0"></Slider>
  </HBox>
</template>

<script setup>
import Label from "../../../src/ipywui/components/Label";
import Slider from "../../../src/ipywui/components/Slider";
import HBox from "../../../src/ipywui/components/HBox";
</script>
<script lang="py">
from vuepy import ref

val = ref(1)
</script>
```

```vue
<!-- label/custom.vue -->
<template>
  <Label value="background lightblue" style="background: lightblue"></Label>
  <Label value="description-width: 100px" style="description-width: 100px"></Label>
  <Label value="font-size 16px" style="font-size: 16px"></Label>
  <Label value="font-style italic" style="font-style: italic"></Label>
  <Label value="font-weight bold" style="font-weight: bold"></Label>
  <Label value="color red" style="color: red"></Label>
  <Label value="text-decoration: underline" style="text-decoration: underline"></Label>
</template>

<script setup>
import Label from "../../../src/ipywui/components/Label";
</script>
```

### Component, MarkdownViewer
```vue
<!-- markdown_viewer/basic.vue -->
<template>
  <HBox>
    <Input v-model="md.value" type="textarea" style="height: 400px">
    </Input>
    <MarkdownViewer :value="md.value"></MarkdownViewer>
  </HBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Input from "../../../src/ipywui/components/Input";
import MarkdownViewer from
      "../../../src/ipywui/components/MarkdownViewer";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref

md_src = r"""
### H3

This is a **bold** text and this is an *italic* text.   
link to [vuepy](https://github.com/vuepy)

### Code

    def foo():
        print("hello world")
        return 1

### List

- item1
- item2

### LaTeX
$$
a > b,b > c \Rightarrow a > c 
$$

$$
\begin{array}{c} 
  \forall A \in S \\ 
  P \left( A \right) \ge 0 
\end{array}
$$
"""

def setup(props, ctx, vm):
    md = ref(md_src)
    return locals()

```

### Component, Play
```vue
<!-- play/basic.vue -->
<template>
  <VBox>
    <Input :value="str(frame.value)"></Input>
    <Play label="int"
          v-model="frame.value"
          :min="1"
          :max="10"
          :step="1"
          :interval="500"
    ></Play>

    <Input :value="str(frame2.value)"></Input>
    <Play label="int"
          v-model="frame2.value"
          :min="1"
          :max="10"
          :step="1"
          :interval="1000"
    ></Play>
  </VBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import VBox from "../../../src/ipywui/components/VBox";
import Play from "../../../src/ipywui/components/Play";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    frame = ref(1)
    frame2 = ref(1)
    return locals()

```

### Component, Progress
```vue
<!-- progress/basic.vue -->
<template>
  <VBox>
    <Progress label="Default"
              :value="80" :min="1" :max="100"></Progress>

    <Progress label="Info" type="info"
              :value="60" :min="1" :max="100"></Progress>

    <Progress label="Success" type="success"
              :value="50" :min="1" :max="100"></Progress>

    <Progress label="Warning" type="warning"
              :value="40" :min="1" :max="100"></Progress>

    <Progress label="Danger" type="danger"
              :value="30" :min="1" :max="100"></Progress>
  </VBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Progress from "../../../src/ipywui/components/Progress";
import VBox from "../../../src/ipywui/components/VBox";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    progress = ref(0)
    return locals()

```

```vue
<!-- progress/vertical.vue -->

<template>
  <HBox>
    <Progress label="Default" vertical
              :value="80" :min="1" :max="100"></Progress>

    <Progress label="Info" type="info" vertical
              :value="60" :min="1" :max="100"></Progress>

    <Progress label="Success" type="success" vertical
              :value="50" :min="1" :max="100"></Progress>

    <Progress label="Warning" type="warning" vertical
              :value="40" :min="1" :max="100"></Progress>

    <Progress label="Danger" type="danger" vertical
              :value="30" :min="1" :max="100"></Progress>
  </HBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Progress from "../../../src/ipywui/components/Progress";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    progress = ref(0)
    return locals()

```

```vue
<!-- progress/custom.vue -->

<template>
  <VBox>
    <Progress label="lightblue"
              style="color: lightblue"
              :value="80" :min="1" :max="100"></Progress>

    <Progress label="#8a54a8"
              style="color: #8a54a8"
              :value="60" :min="1" :max="100"></Progress>
  </VBox>
</template>
```

### Component, Valid
```vue
<!-- valid/basic.vue -->
<template>
  <Valid :value="True" description="Valid"></Valid>
  <Valid :value="False" description="Invalid"></Valid>
</template>

<script setup>
import Valid from "../../../src/ipywui/components/Valid";
</script>
```

### Component, Dropdown

v-model 或初始值必须是 options 中的值或者为`None`
```vue
<!-- dropdown/basic.vue -->
<template>
  <VBox>
    <Dropdown description="dropdown1"
              v-model="choice1.value"
              :options="dropdown_items1"
              @change="on_change"
    ></Dropdown>

    <Dropdown description="dropdown2"
              v-model="choice2.value"
              :options="dropdown_items2"
              @change="on_change2"
    ></Dropdown>
  </VBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import VBox from "../../../src/ipywui/components/VBox";
import Dropdown from "../../../src/ipywui/components/Dropdown";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    dropdown_items1 = ['A', 'B', 'C']
    choice1 = ref(dropdown_items1[0])

    # list of (name, val)
    dropdown_items2 = [('One', 1), ('Two', 2), ('Three', 3)]
    choice2 = ref(dropdown_items2[0][1])

    def on_change(event):
        print(event) # {'new': 'A', 'old': 'B', 'owner': Dropdown(...)}

    def on_change2(event):
        print(event) # {'new': 1, 'old': 2, 'owner': Dropdown(...)}

    return locals()

```

### Component, Tabs
```vue
<!-- tabs/basic.vue -->
<template>
  <Tabs v-model="selected.value" @change="on_change">
    <TabPane title="Tab1">
      <Slider description="slider"></Slider>
    </TabPane>

    <TabPane title="Tab2">
      <Input placeholder="input"></Input>
    </TabPane>

    <TabPane title="Tab3">
      <Button label="click" type="info"></Button>
    </TabPane>

  </Tabs>
</template>

<script setup>
import Tabs from "../../../src/ipywui/components/Tabs";
import TabPane from "../../../src/ipywui/components/TabPane";
import Slider from "../../../src/ipywui/components/Slider";
import Input from "../../../src/ipywui/components/Input";
import Button from "../../../src/ipywui/components/Button";
</script>
<script lang="py">
from vuepy import ref

selected = ref(1)

def on_change(event):
    # get selected index
    print(event) # {'new': 0, 'old': 1, 'owner': Tabs(...)}

</script>
```

### Component, Stack
```vue
<!-- stack/basic.vue -->
<template>
  <HBox>
    <Button label="s1" style="width: auto" @click="to('s1')"></Button>
    <Button label="s2" style="width: auto" @click="to('s2')"></Button>
    <Button label="s3" style="width: auto" @click="to('s3')"></Button>
  </HBox>

  <Stack v-model="selected.value" @change="on_change">
    <StackItem label="s1">
      <Slider description="s1 slider"></Slider>
    </StackItem>

    <StackItem label="s2">
      <Input placeholder="s2 input"></Input>
    </StackItem>

    <StackItem label="s3">
      <Button label="s3 click" type="info"></Button>
    </StackItem>

  </Stack>
</template>

<script setup>
import Stack from "../../../src/ipywui/components/Stack";
import StackItem from "../../../src/ipywui/components/StackItem";
import Slider from "../../../src/ipywui/components/Slider";
import Input from "../../../src/ipywui/components/Input";
import Button from "../../../src/ipywui/components/Button";
import HBox from "../../../src/ipywui/components/HBox";
</script>
<script lang="py">
from vuepy import ref

selected = ref('s1')

def to(label):
    selected.value = label

def on_change(event):
    # get selected index
    print(event) # {'new': 1, 'old': 0, 'owner': Stack(...)}

</script>
```

### Component, Dialog
```vue
<!-- dialog/basic.vue -->
<template>
  <Button label="show dialog" type='info' @click="show()"></Button>
  <Label value="Placeholder" style="height: 200px"></Label>
  <Dialog title="Shipping address" v-model="is_show.value" width="55%">
    <template>
      <Input placeholder="name"></Input>
    </template>
    <template v-slot:footer>
      <HBox>
        <Button label="Cancel" type="warning" @click="close()"></Button>
        <Button label="Ok" type="info" @click="close()"></Button>
      </HBox>
    </template>
  </Dialog>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Dialog from "../../../src/ipywui/components/Dialog";
import Button from "../../../src/ipywui/components/Button";
import Label from "../../../src/ipywui/components/Label";
import Input from "../../../src/ipywui/components/Input";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    is_show = ref(True)

    def show():
        is_show.value = True

    def close():
        is_show.value = False

    return locals()

```

```vue
<!-- dialog/events.vue -->
<template>
  <Button label="show dialog" type='info' @click="show()"></Button>
  <Label :value="state.value" style="height: 200px"></Label>
  <Dialog title="Shipping address" v-model="is_show.value" width="55%"
          @close="handle_close()"
          @open="handle_open()"
  >
    <template>
      <Input placeholder="name"></Input>
    </template>
    <template v-slot:footer>
      <HBox>
        <Button label="Cancel" type="warning" @click="close()"></Button>
        <Button label="Ok" type="info" @click="close()"></Button>
      </HBox>
    </template>
  </Dialog>
</template>

<script src="./events_setup.py"></script>
<script setup>
import Dialog from "../../../src/ipywui/components/Dialog";
import Button from "../../../src/ipywui/components/Button";
import Label from "../../../src/ipywui/components/Label";
import Input from "../../../src/ipywui/components/Input";
import HBox from "../../../src/ipywui/components/HBox";
</script>
```
```python
# ./events_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    is_show = ref(True)

    state = ref("-")

    def show():
        is_show.value = True

    def close():
        is_show.value = False

    def handle_open():
        state.value = 'open'

    def handle_close():
        state.value = 'close'

    return locals()

```

### Component, Message 
```vue
<!-- message/basic.vue -->
<template>
  <Button label="Show Message" type="info" @click="show_msg()"></Button>
  <Label value="" style="height: 80px"></Label>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Button from "../../../src/ipywui/components/Button";
import Label from "../../../src/ipywui/components/Label";
</script>
```
```python
# ./basic_setup.py


def setup(props, ctx, vm):
    def show_msg():
        vm.message.info({
            'message': 'This is message.',
            'duration': 2000,
        })

    return locals()

```

```vue
<!-- message/different-types.vue -->
<template>
  <Button label="Success" type="info" @click="show_success()"></Button>
  <Button label="Info" type="info" @click="show_info()"></Button>
  <Button label="Warning" type="info" @click="show_warning()"></Button>
  <Button label="Error" type="info" @click="show_error()"></Button>
  <Label value="" style="height: 80px"></Label>
</template>

<script src="./different_types_setup.py"></script>
<script setup>
import Button from "../../../src/ipywui/components/Button";
import Label from "../../../src/ipywui/components/Label";
</script>
```
```python
# ./different_types_setup.py


def setup(props, ctx, vm):
    def show_success():
        vm.message.success({
            'message': 'Congrats, this is a success message.',
        })

    def show_info():
        vm.message.info({
            'message': 'This is message.',
        })

    def show_warning():
        vm.message.warning({
            'message': 'Warning, this is a warning message.',
        })

    def show_error():
        vm.message.error({
            'message': 'Oops, this is a error message.',
        })

    return locals()

```

```vue
<!-- message/closeable.vue -->
<template>
  <Button label="show" type="info" @click="show()"></Button>
  <Label value="" style="height: 80px"></Label>
</template>

<script src="./closeable_setup.py"></script>
<script setup>
import Button from "../../../src/ipywui/components/Button";
import Label from "../../../src/ipywui/components/Label";
</script>
```
```python
# ./closeable_setup.py


def setup(props, ctx, vm):
    def show():
        msg = vm.message.success({
            'message': 'Congrats, this is a success message.',
            'show_close': True,
        })
        # tips: you can use msg.close() to close the message box
        # msg.close()

    return locals()

```

### Component, Clipboard
```vue
<!-- clipboard/basic.vue -->
<template>
  <HBox>
    <Input v-model="copytext.value"></Input>
    <Clipboard :copy="copytext.value">
      <Button label="copy" type="info"></Button>
    </Clipboard>
  </HBox>
</template>

<script src="./basic_setup.py"></script>
<script setup>
import Clipboard from "../../../src/ipywui/components/Clipboard";
import Button from "../../../src/ipywui/components/Button";
import HBox from "../../../src/ipywui/components/HBox";
import Input from "../../../src/ipywui/components/Input";
</script>
```
```python
# ./basic_setup.py

from vuepy import ref


def setup(props, ctx, vm):
    copytext = ref("hello")

    return locals()

```


注意：
1. vuepy中v-for的写法。
2. html标签内不能包含自定义组件，如：`<div><Button></Button></div>`是错误的，替代方案是`<VBox><Button></Button></VBox>