1.5.2

Overview

fix span.svg render and improve DOM operations.

1.5.0

Overview

This release introduces several new features and improvements across various modules, including global functions, string operations, number utilities, array manipulations, object handling, map operations, image processing, and element manipulations. We've also marked some functions for deprecation in the upcoming 2.0.0 release to streamline our API.

Global

New Features

• $random(target_length: number): Returns a random string of specified length (default 8). Replaces $key(target_length: number).

Deprecated (will be removed in 2.0.0)

• $key: Use $random instead.

String

New Features

• $regexp(flags: any, force_replace: any): Added force_replace parameter to forcibly convert symbols \^\$\{\}\|\,\[\]\(\)\=\!\*\+\.\?. Default is false.

Number

New Features

• $random: Returns a random string of specified length.
• $ASCII: Returns the specified ASCII character.

Array

New Features

• $sum: Calculates the sum of all numeric elements in an array.
• $shuffle: Returns a new array with randomly shuffled elements. Replaces $random.

Deprecated (will be removed in 2.0.0)

• $random: Use $shuffle instead.

Object

New Features

• $values: Returns all values of an object. Replaces $vals.
• _: (target_key: string | number, target_value: any, replace_value?: boolean): Sets or updates the value of a specified key in an object. By default, it replaces existing values.

Deprecated (will be removed in 2.0.0)

• $vals: Use $values instead.

Map

New Features

• $values: Returns all values of a Map. Replaces $vals.

Deprecated (will be removed in 2.0.0)

• $vals: Use $values instead.

Image

New Features

• copy(): Copies the image to the clipboard.

Element

New Features

• $$class(class_value: string | string[]): Added support for String[] to check multiple class types.
• $$class_(check_bool?: any, class_value?: any): Modified to add or remove classes based on class_value if check_bool is not provided.
• New shorthand methods for padding and margin:
  • _paddingT, _paddingL, _paddingB, _paddingR
  • _marginT, _marginL, _marginB, _marginR

Deprecated (will be removed in 2.0.0)

• $$_class: Use $$class_ with inverted logic instead.
• Full-name padding and margin methods (e.g., _paddingTop): Use shorthand versions instead.

---

概述

本次更新引入了多項新功能和改進，涵蓋全局函數、字串操作、數字工具、陣列操作、物件處理、映射操作、圖像處理和元素操作等多個模組。我們還標記了一些將在即將發布的 2.0.0 版本中棄用的函數，以簡化我們的 API。

全局

新功能

• $random(target_length: number): 返回指定長度的隨機字串，預設長度為 8。取代 $key(target_length: number)。

即將棄用（將在 2.0.0 版本中移除）

• $key: 請改用 $random。

字串

新功能

• $regexp(flags: any, force_replace: any): 增加 force_replace 參數，用於強制轉換符號 \^\$\{\}\|\,\[\]\(\)\=\!\*\+\.\?。預設為 false。

數字

新功能

• $random: 返回指定長度的隨機字串。
• $ASCII: 返回指定的 ASCII 字符。

陣列

新功能

• $sum: 計算陣列中所有數值元素的總和。
• $shuffle: 返回隨機打亂元素順序後的新陣列。取代 $random。

即將棄用（將在 2.0.0 版本中移除）

• $random: 請改用 $shuffle。

物件

新功能

• $values: 返回物件的所有值。取代 $vals。
• _: (target_key: string | number, target_value: any, replace_value?: boolean): 設置或更新物件指定鍵的值，預設會替換已存在的值。

即將棄用（將在 2.0.0 版本中移除）

• $vals: 請改用 $values。

映射（Map）

新功能

• $values: 返回映射的所有值。取代 $vals。

即將棄用（將在 2.0.0 版本中移除）

• $vals: 請改用 $values。

圖像

新功能

• copy(): 將圖像複製到剪貼簿。

元素

新功能

• $$class(class_value: string | string[]): 增加對 String[] 的支持，可檢查多個類型。
• $$class_(check_bool?: any, class_value?: any): 修改為在未提供 check_bool 時，根據 class_value 來添加或移除類。
• 新增 padding 和 margin 的簡寫方法：
  • _paddingT, _paddingL, _paddingB, _paddingR
  • _marginT, _marginL, _marginB, _marginR

即將棄用（將在 2.0.0 版本中移除）

• $$_class: 請使用邏輯相反的 $$class_。
• 完整名稱的 padding 和 margin 方法（如 _paddingTop）：請使用簡寫版本。

1.4.0

Overview

This release introduces several new features and improvements across various modules, including Array, FormData, Map, Element, URL, and Date. To ensure a smooth transition for future releases, some functions are marked for deprecation. Additionally, bugs related to URL query handling and date formatting have been fixed.

String

New Features

• Function copy() replaces $copy();

Will Deprecate (2.*.*)

• Function $copy();

Number

New Features

• Function $gone returns a relative time description in Chinese or English based on the language setting;

Array

New Features

• Function _(value: any | any[], index?: number) enhanced:
  • Adds an optional index parameter to specify the insertion position;
  • Supports inserting an element or array at a specific index;
  • If index is not provided, the default behavior of adding elements to the end of the array remains;

Resolved Issues

• Function $_(index: number) now correctly removes the element at the specified index and returns the updated array;

Object

New Features

• Function forEach(value?: (key: string, val: any) => void) replaces $forEach(value?: (key: string, val: any) => void);

Will Deprecate (2.*.*)

• Function $forEach(value?: (key: string, val: any) => void);

Map

New Features

• Function $json replaces $obj;
• Function $_(key?: any) removes the element with the specified key and returns the updated Map;
• Function $$(value: any) checks if the Map contains the specified value;

Will Deprecate (2.*.*)

• Function $obj;

FormData

New Features

• Function $map returns a Map<string, any>;
• Function $json returns an object { [key: string]: any };

Date

New Features

• Function $S returns centiseconds;
• Function $SS returns deciseconds;
• Function $SSS returns milliseconds;
• Function $dddd returns the full name of the day (e.g., 'Sunday');
• Function $ddd returns the abbreviated day name (e.g., 'Sun');
• Function $format now supports the formats 'S', 'SS', 'SSS', 'ddd', 'dddd';

Resolved Issues

• Function $dd now correctly returns a two-letter abbreviation (e.g., 'Su');
• Function $y now returns a format consistent with $yy;

URL

Resolved Issues

• Function $queryAll now correctly processes query parameters;

Element

New Features

• Function _padding(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string) replaces _p(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);

• Function _paddingTop(value?: number | string) replaces _pt(value?: number | string);

• Function _paddingLeft(value?: number | string) replaces _pl(value?: number | string);

• Function _paddingBottom(value?: number | string) replaces _pb(value?: number | string);

• Function _paddingRight(value?: number | string) replaces _pr(value?: number | string);

• Function _margin(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string) replaces _m(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);

• Function _marginTop(value?: number | string) replaces _mt(value?: number | string);

• Function _marginLeft(value?: number | string) replaces _ml(value?: number | string);

• Function _marginBottom(value?: number | string) replaces _mb(value?: number | string);

• Function _marginRight(value?: number | string) replaces _mr(value?: number | string);

• Function $formData

  • Returns FormData for <form> elements;
  • Returns undefined for non-<form> elements;

• Function $map

  • Processes $formData results;
  • Returns a Map<string, any> or undefined;

• Function $json

  • Processes $formData results;
  • Returns an object { [key: string]: any } or undefined;

Will Deprecate (2.*.*)

• Function _p(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);
• Function _pt(value?: number | string);
• Function _pl(value?: number | string);
• Function _pb(value?: number | string);
• Function _pr(value?: number | string);
• Function _m(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);
• Function _mt(value?: number | string);
• Function _ml(value?: number | string);
• Function _mb(value?: number | string);
• Function _mr(value?: number | string);

---

概述

此版本引入了多個模組的新功能和改進，包括 Array、FormData、Map、Element、URL 和 Date。為了確保未來版本的順利過渡，一些函數被標記為即將棄用。此外，還修復了 URL 查詢處理和日期格式化方面的錯誤。

String

新功能

• 函數 copy() 取代 $copy();

即將棄用 (2.*.*)

• 函數 $copy();

Number

新功能

• 函數 $gone 根據語言設定，返回相對時間的中文或英文描述;

Array

新功能

• 函數 _(value: any | any[], index?: number) 增強功能：
  • 新增可選參數 index，用於指定插入位置;
  • 支援在指定索引處插入元素或數組;
  • 當不提供 index 時，保持在數組末尾添加元素的行為;

修正問題

• 函數 $_(index: number) 現在可以正確移除指定索引的元素並返回更新後的數組;

Object

新功能

• 函數 forEach(value?: (key: string, val: any) => void) 取代 $forEach(value?: (key: string, val: any) => void);

即將棄用 (2.*.*)

• 函數 $forEach(value?: (key: string, val: any) => void);

Map

新功能

• 函數 $json 取代 $obj;
• 函數 $_(key?: any) 刪除指定鍵並返回更新的 Map;
• 函數 $$(value: any) 檢查 Map 是否包含指定值;

即將棄用 (2.*.*)

• 函數 $obj;

FormData

新功能

• 函數 $map 返回 Map<string, any>;
• 函數 $json 返回物件 { [key: string]: any };

Date

新功能

• 函數 $S 返回百毫秒;
• 函數 $SS 返回十毫秒;
• 函數 $SSS 返回毫秒;
• 函數 $dddd 返回完整星期名稱 (如 'Sunday');
• 函數 $ddd 返回星期縮寫 (如 'Sun');
• 函數 $format 現支援 'S'、'SS'、'SSS'、'ddd'、'dddd' 格式;

修正問題

• 函數 $dd 現正確返回兩字母縮寫 (如 'Su');
• 函數 $y 現返回與 $yy 一致的格式;

URL

修正問題

• 函數 $queryAll 現正確處理查詢參數;

Element

新功能

• 函數 _padding(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string) 取代 _p(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);

• 函數 _paddingTop(value?: number | string) 取代 _pt(value?: number | string);

• 函數 _paddingLeft(value?: number | string) 取代 _pl(value?: number | string);

• 函數 _paddingBottom(value?: number | string) 取代 _pb(value?: number | string);

• 函數 _paddingRight(value?: number | string) 取代 _pr(value?: number | string);

• 函數 _margin(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string) 取代 _m(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);

• 函數 _marginTop(value?: number | string) 取代 _mt(value?: number | string);

• 函數 _marginLeft(value?: number | string) 取代 _ml(value?: number | string);

• 函數 _marginBottom(value?: number | string) 取代 _mb(value?: number | string);

• 函數 _marginRight(value?: number | string) 取代 _mr(value?: number | string);

• 函數 $formData

  • 對 <form> 元素返回 FormData;
  • 非 <form> 元素返回 undefined;

• 函數 $map

  • 處理 $formData 結果;
  • 返回 Map<string, any> 或 undefined;

• 函數 $json

  • 處理 $formData 結果;
  • 返回物件 { [key: string]: any } 或 undefined;

即將棄用 (2.*.*)

• 函數 _p(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);
• 函數 _pt(value?: number | string);
• 函數 _pl(value?: number | string);
• 函數 _pb(value?: number | string);
• 函數 _pr(value?: number | string);
• 函數 _m(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string);
• 函數 _mt(value?: number | string);
• 函數 _ml(value?: number | string);
• 函數 _mb(value?: number | string);
• 函數 _mr(value?: number | string);

1.3.2

Overview

This update includes fixes related to PD tag handling for input[type="radio"] and input[type="checkbox"], ensuring that the value is correctly captured. Additionally, changes were made to String.prototype.$all, altering the return format to HTMLElement[].

PD

Fixed Issues

• model in input[type="radio"] and input[type="checkbox"] now correctly captures the value.

String

Resolved Issues

• $all now returns an array of HTMLElement[] instead of the previous format.

---

概述

此更新修復了 PD 在 input[type="radio"] 和 input[type="checkbox"] 中無法正確捕獲值的問題。此外，String.prototype.$all 的返回格式也更改為 HTMLElement[]。

PD

修正問題

• model 在 input[type="radio"] 和 input[type="checkbox"] 中現在能正確捕獲值。

String

修正問題

• $all 現在返回 HTMLElement[] 陣列，而非之前的格式。

1.3.1

Optimize code

1.3.0

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>

1.2.0

Added

• PD function CALC supports simple calculations.
  • index.html

    <body id="app">
        <p>{{ CALC(num + 1) }}</p>
        <p>{{ CALC(num - 2) }}</p>
        <p>{{ CALC(num * 3) }}</p>
        <p>{{ CALC(num / 4) }}</p>
    </body>
    <script>
        const app = new PD({
            id: "app",
            data: {
                num: 12
            }
        });
    </script>

  • Result

    <body id="app">
        <p>13</p>
        <p>10</p>
        <p>36</p>
        <p>3</p>
    </body>

• PD tag :* supports {{value}} combined binding.
  • index.html

    <body id="app">
        <a :for="e in ary" :href="https://example.com/id/{{ e }}">https://example.com/id/{{ e }}</a>
    </body>
    <script>
        const app = new PD({
            id: "app",
            data: {
                ary: ["1", "2", "3"]
            }
        });
    </script>

  • Result

    <body id="app">
        <a href="https://example.com/id/1">https://example.com/id/1</a>
        <a href="https://example.com/id/2">https://example.com/id/2</a>
        <a href="https://example.com/id/3">https://example.com/id/3</a>
    </body>

• PD tags :bg-image, :bg-attachment, :bg-blend-mode, :bg-clip, :bg-origin, :bg-position, :bg-position-x, :bg-position-y, :bg-repeat, :bg-size, :bg-color, :color support quick style setting.

Fixed

• PD tag {{}} using function LENGTH has no response.
• PD function LENGTH returns undefined for Object type.

1.1.0

Added

• Global function _Listener (keeping _SVGListener and _LazyLoadListener)

  _Listener({
      svg: [Boolean],
      lazyload: [Boolean]
  })

• PD parameter listener to disable default listeners

  const app = new PD({
      listener: {
          svg: false,
          lazyload: false,
      }
  });

• Element functions _m and _p
  • _m is used to set the element's margin. It can set margins for top, right, bottom, and left individually or in combination.

    dom._m(10);             // Sets margin for all four sides to 10
    dom._m(10, 20);         // Sets margin for top and bottom to 10, and for left and right to 20
    dom._m(10, 20, 30);     // Sets margin for top to 10, left and right to 20, and bottom to 30
    dom._m(10, 20, 30, 40); // Sets margin for top to 10, right to 20, bottom to 30, and left to 40

  • _p is used to set the element's padding. It can set padding for top, right, bottom, and left individually or in combination.

    dom._p(10);             // Sets padding for all four sides to 10
    dom._p(10, 20);         // Sets padding for top and bottom to 10, and for left and right to 20
    dom._p(10, 20, 30);     // Sets padding for top to 10, left and right to 20, and bottom to 30
    dom._p(10, 20, 30, 40); // Sets padding for top to 10, right to 20, bottom to 30, and left to 40

1.0.2

Adjusted

• Removed the bottom watermark.
• Optimized code and compressed it to 34KB.

1.0.1

Fixed

• PD tag :path not displaying correctly.