if_else sugar

Author: syf20020816

docs/v0.1.0/en/doc/tutorial/template/basic.mdx

@@ -210,3 +210,24 @@ Callback means a method called after a component triggers an event, using `@` as
 > There may not be any parameters in the callback, but you still need to add `()`
 >
 > If the component uses a callback, you must add `id` as an identifier
+
+### Automatic ID strategy
+
+Since `v0.1.2`, GenUI has introduced the **automatic ID allocation strategy**. During the component construction process, the system automatically checks whether each component has explicitly specified an `id`. If not, a random unique ID will be generated for it.
+
+This mechanism is extremely useful in many scenarios, including:
+
+- Property binding (`:prop="..."`)
+- Event callback (`@event="..."`)
+- Computed property association
+- Various syntax sugar processing
+
+The introduction of automatic ID greatly reduces the tediousness of manual identifier management and improves the simplicity and maintainability of template code.
+
+#### ID generation rules
+
+Instead of using `ulid` or other third-party libraries, we generate IDs according to the following custom strategy:
+
+1. **Start with an English letter**: Ensure that the variable naming specification is met to avoid potential syntax conflicts.
+2. **Length limit**: The ID length is controlled between `6 ~ 12` characters to avoid conflicts caused by being too short or redundant due to being too long.
+3. **Character composition**: only contain **English letters and numbers**, no special characters, to maintain compatibility and readability.

docs/v0.1.0/en/doc/tutorial/template/sugar_syntax.mdx

@@ -28,12 +28,6 @@ The followings are details:
 
 ### Examples
 
-> [!DANGER]
->
-> When using syntax sugar, you need to bind the id just like the bind type
->
-> We plan to introduce an automatic id strategy in the `v0.1.3` version (automatically generate an id for each component that does not have an id added during static compilation)
-
 #### Single for
 
 ```html
@@ -56,4 +50,48 @@ The followings are details:
 </view>
 ```
 
-## `If_ElseIf_Else` <Badge text="Comming Soon" type="warning" />
+## `If_ElseIf_Else`
+
+The `if_else` syntax sugar allows users to conditionally render components. The component will only be rendered if the expression returns `true`.
+
+### Syntax
+
+```html
+<label :if="$if_bind_condition"></label>
+$($(<label :else_if="$else_if_bind_condition"></label>)*)?
+$(<label else></label>)?
+```
+
+> - `$if_bind_condition`: if conditional statement condition
+> - `$else_if_bind_condition`: else_if conditional statement condition
+> - `$()*`: many1, 1 or more
+> - `$()?`: recognize, 0 or 1
+
+> [!NOTE]
+>
+> Among them, `$($(<label :else_if="$else_if_bind_condition"></label>)*)?` means that `else_if` can be present or absent, and if present, it can be multiple
+
+### Example
+
+For specific writing and examples, see: [if_sugar tests](https://github.com/Privoce/made_with_GenUI/tree/main/tests/if_sugar/views)
+
+#### Only if
+
+```html
+<label :if="vis" text="'hello'"></label>
+```
+
+#### if else
+
+```html
+<label :if="vis" text="'hello'"></label>
+<label else text="'world'"></label>
+```
+
+#### if else_if else
+
+```html
+<label :if="is_a()" text="'Vis A'"></label>
+<label :else_if="is_b()" text="'Vis B'"></label>
+<label else text="'world'"></label>
+```

docs/v0.1.0/zh/doc/tutorial/template/basic.mdx

@@ -205,3 +205,24 @@ import { Tab, Tabs } from "rspress/theme";
 > 回调中可能没有任何参数，但依然需要添加`()`
 >
 > 若组件使用了回调一定要添加`id`作为标识符
+
+### 自动 ID 策略
+
+自 `v0.1.2` 起，GenUI 引入了**自动 ID 分配策略**。在组件构建过程中，系统会自动检查每个组件是否已显式指定 `id`，若未指定，则会为其生成一个随机的唯一 ID。
+
+这一机制在多个场景下都极为有用，包括：
+
+- 属性绑定（`:prop="..."`）  
+- 事件回调（`@event="..."`）  
+- 计算属性关联  
+- 各类语法糖处理
+
+自动 ID 的引入极大地减少了手动管理标识符的繁琐，提高了模板代码的简洁性和可维护性。
+
+#### ID 生成规则
+
+我们并未采用 `ulid` 或其他第三方库，而是根据以下自定义策略生成 ID：
+
+1. **以英文字母开头**：确保符合变量命名规范，避免潜在语法冲突。  
+2. **长度限制**：ID 长度控制在 `6 ~ 12` 个字符之间，避免过短冲突或过长冗余。  
+3. **字符组成**：仅包含**英文字母与数字**，不含特殊字符，以保持兼容性和可读性。

docs/v0.1.0/zh/doc/tutorial/template/sugar_syntax.mdx

@@ -27,12 +27,6 @@ import { Badge } from '@theme';
 
 ### 例子
 
-> [!DANGER]
-> 
-> 在使用语法糖时和bind类型一样都需要进行id绑定
->
-> 我们计划在`v0.1.3`版本引入自动id策略 (在静态编译时为每个没有添加id的组件自动生成id)
-
 #### 单个
 
 ```html
@@ -55,4 +49,48 @@ import { Badge } from '@theme';
 </view>
 ```
 
-## `If_ElseIf_Else` <Badge text="Comming Soon" type="warning" />
+## `If_ElseIf_Else`
+
+`if_else`语法糖允许使用者条件性地渲染组件。该组件只会在表达式返回`true`时才被渲染。
+
+### 语法
+
+```html
+<label :if="$if_bind_condition"></label>
+$($(<label :else_if="$else_if_bind_condition"></label>)*)?
+$(<label else></label>)?
+```
+
+> - `$if_bind_condition`: if条件语句条件
+> - `$else_if_bind_condition`: else_if条件语句条件
+> - `$()*`: many1，1 个或多个
+> - `$()?`: recognize，0 个或 1 个
+
+> [!NOTE]
+>
+> 其中`$($(<label :else_if="$else_if_bind_condition"></label>)*)?`表示`else_if`可以有也可以没有，如果有也可以有多个
+
+### 例子
+
+具体写法与示例见: [if_sugar tests](https://github.com/Privoce/made_with_GenUI/tree/main/tests/if_sugar/views)
+
+#### 单个if
+
+```html
+<label :if="vis" text="'hello'"></label>
+```
+
+#### if else
+
+```html
+<label :if="vis" text="'hello'"></label>
+<label else text="'world'"></label>
+```
+
+#### if else_if else
+
+```html
+<label :if="is_a()" text="'Vis A'"></label>
+<label :else_if="is_b()" text="'Vis B'"></label>
+<label else text="'world'"></label>
+```