1.3.0 Release Notes

Overview

This update introduces several new features for PD tags and functions, enhancing style setting, case adjustment, and date conversion capabilities.

PD

New Features

Added support for quick style settings with the following PD tags: :hide, :padding, :margin, :border, :border-radius, :outline, :box-shadow.
Added attribute :once, which supports actions that are executed only once.

Added UPPER() and LOWER() functions to adjust string case.

Example

<body id="app">
      <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
      const app = new PD({
              id: "app",
              data: {
                  test1: "upper",
                  test2: "LOWER"
              }
      });
</script>

Result

<body id="app">
    <p>UPPER lower</p>
</body>

Added DATE() function to convert a timestamp into a formatted date.

Example

<body id="app">
    <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
</body>
<script>
    const app = new PD({
        id: "app",
        data: {
            now: Math.floor(Date.now() / 1000)
        }
    });
</script>

Result

<body id="app">
    <p>2024-08-17 03:40:47</p>
</body>

概述

此更新為 PD 引入��多項新功能，增強了樣式設置、大小寫調整以及日期轉換的功能。

PD

新功能

新增對以下 PD 標籤快速設置樣式的支持：:hide、:padding、:margin、:border、:border-radius、:outline、:box-shadow。
新增 PD 標籤 :once，支援僅執行一次的操作。

新增 UPPER() 和 LOWER() 函數來調整字串大小寫。

範例

<body id="app">
      <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
      const app = new PD({
              id: "app",
              data: {
                  test1: "upper",
                  test2: "LOWER"
              }
      });
</script>

結果

<body id="app">
    <p>UPPER lower</p>
</body>

新增 DATE() 函數將 timestamp 轉換為格式化日期。

範例

<body id="app">
    <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
</body>
<script>
    const app = new PD({
        id: "app",
        data: {
            now: Math.floor(Date.now() / 1000)
        }
    });
</script>

結果

<body id="app">
    <p>2024-08-17 03:40:47</p>
</body>