alpinejs - npm Package Compare versions
Comparing version 2.7.0 to 2.7.1
| { | ||
| "main": "dist/alpine.js", | ||
| "name": "alpinejs", | ||
| "version": "2.7.0", | ||
| "version": "2.7.1", | ||
| "repository": { | ||
@@ -6,0 +6,0 @@ "type": "git", |
@@ -24,8 +24,8 @@ # Alpine.js | ||
| Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.7.0` (la última): | ||
| Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.7.1` (la última): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| **Desde NPM:** Instalar el paquete desde NPM. | ||
| **Desde npm:** Instalar el paquete desde npm. | ||
| ```js | ||
@@ -149,3 +149,3 @@ npm i alpinejs | ||
| **Estructura:** `<div x-data="[JSON data object]">...</div>` | ||
| **Estructura:** `<div x-data="[object literal]">...</div>` | ||
@@ -581,3 +581,5 @@ `x-data` declara un nuevo *scope* del componente. Indica al *framework* que debe inicializar un nuevo componente con el objeto especificado. | ||
| > Note: La única anomalía con x-spread ocurre cuando se usa junto a `x-for`. Cuando la directiva a extender es `x-for`, es necesario retornar una expresion en formato de *string* en el *callback*. Por ejemplo: `['x-for']() { return 'item in items' }`. | ||
| > Note: Excepciónes con `x-spread`: | ||
| > - Cuando la directiva a extender es `x-for`, es necesario retornar una expresion en formato de *string* en el *callback*. Por ejemplo: `['x-for']() { return 'item in items' }`. | ||
| > - `x-init` y `x-data` no se pueden usar dentro de un objeto para "spread". | ||
@@ -730,3 +732,3 @@ --- | ||
| ## Seguridad | ||
| Si encuentras una brecha de seguridad, por favor envía un email a [calebporzio@gmail.com]() | ||
| Si encuentras una brecha de seguridad, por favor envía un email a [calebporzio@gmail.com](). | ||
@@ -733,0 +735,0 @@ Alpine depende de una implementación personalizada utilizando el objeto `Function` para evaluar las directivas. A pesar de ser más seguro que `eval()`, su uso está prohibido en algunos entornos, tels como Google Chrome App, utilizando Content Security Policy restrictivas (CSP). |
@@ -17,3 +17,3 @@ # Alpine.js | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.js" defer></script> | ||
| ``` | ||
@@ -23,3 +23,3 @@ | ||
| **NPMより:** NPM からパッケージをインストールします。 | ||
| **npmより:** npm からパッケージをインストールします。 | ||
| ```js | ||
@@ -125,3 +125,3 @@ npm i alpinejs | ||
| **構造:** `<div x-data="[JSON data object]">...</div>` | ||
| **構造:** `<div x-data="[object literal]">...</div>` | ||
@@ -371,3 +371,3 @@ `x-data` は新しいコンポーネントスコープを宣言します。フレームワークに、データオブジェクトを使用して新しいコンポーネントを初期化するよう指示します。 | ||
| Alpine は、「非表示」と「表示」の遷移間のさまざまな段階にクラスを要素に適用するための6つの異なるトランジションディレクティブを提供します。これらのディレクティブは、`x-show` と `x-if` の両方で機能します。 | ||
| Alpine は、「非表示」と「表示」の遷移間のさまざまな段階にクラスを要素に適用するための6つの異なるトランジションディレクティブを提供します。これらのディレクティブは、`x-show` と `x-if` の両方で機能します。 | ||
@@ -374,0 +374,0 @@ これらは、VueJs のトランジションディレクティブとまったく同じように動作しますが、より理にかなった異なる名前を持っています。 |
@@ -19,6 +19,8 @@ # Alpine.js | ||
| | --- | --- | | ||
| | Japanese | [**日本語ドキュメント**](./README.ja.md) | | ||
| | Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) | | ||
| | Russian | [**Документация на русском**](./README.ru.md) | | ||
| | Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) | | ||
| | German | [**Dokumentation in Deutsch**](./README.de.md) | | ||
| | Indonesian | [**Dokumentasi Bahasa Indonesia**](./README.id.md) | | ||
| | Japanese | [**日本語ドキュメント**](./README.ja.md) | | ||
| | Portuguese | [**Documentação em Português**](./README.pt.md) | | ||
| | Russian | [**Документация на русском**](./README.ru.md) | | ||
| | Spanish | [**Documentación en Español**](./README.es.md) | | ||
@@ -36,8 +38,8 @@ | ||
| For production environments, it's recommended to pin a specific version number in the link to avoid unexpected breakage from newer versions. | ||
| For example, to use version `2.7.0` (latest): | ||
| For example, to use version `2.7.1` (latest): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| **From NPM:** Install the package from NPM. | ||
| **From npm:** Install the package from npm. | ||
| ```js | ||
@@ -88,3 +90,3 @@ npm i alpinejs | ||
| You can even use it for non-trivial things: | ||
| *Pre-fetching a dropdown's HTML content on hover* | ||
| *Pre-fetching a dropdown's HTML content on hover.* | ||
| ```html | ||
@@ -116,3 +118,3 @@ <div x-data="{ open: false }"> | ||
| | [`x-show`](#x-show) | Toggles `display: none;` on the element depending on expression (true or false). | | ||
| | [`x-bind`](#x-bind) | Sets the value of an attribute to the result of a JS expression | | ||
| | [`x-bind`](#x-bind) | Sets the value of an attribute to the result of a JS expression. | | ||
| | [`x-on`](#x-on) | Attaches an event listener to the element. Executes JS expression when emitted. | | ||
@@ -125,4 +127,4 @@ | [`x-model`](#x-model) | Adds "two-way data binding" to an element. Keeps input element in sync with component data. | | ||
| | [`x-for`](#x-for) | Create new DOM nodes for each item in an array. Needs to be used on a `<template>` tag. | | ||
| | [`x-transition`](#x-transition) | Directives for applying classes to various stages of an element's transition | | ||
| | [`x-spread`](#x-spread) | Allows you to bind an object of Alpine directives to an element for better reusability | | ||
| | [`x-transition`](#x-transition) | Directives for applying classes to various stages of an element's transition. | | ||
| | [`x-spread`](#x-spread) | Allows you to bind an object of Alpine directives to an element for better reusability. | | ||
| | [`x-cloak`](#x-cloak) | This attribute is removed when Alpine initializes. Useful for hiding pre-initialized DOM. | | ||
@@ -164,3 +166,3 @@ | ||
| **Structure:** `<div x-data="[JSON data object]">...</div>` | ||
| **Structure:** `<div x-data="[object literal]">...</div>` | ||
@@ -261,3 +263,3 @@ `x-data` declares a new component scope. It tells the framework to initialize a new component with the following data object. | ||
| > Note: You are free to use the shorter ":" syntax: `:type="..."` | ||
| > Note: You are free to use the shorter ":" syntax: `:type="..."`. | ||
@@ -303,2 +305,4 @@ **Example:** `<input x-bind:type="inputType">` | ||
| > Note: If you need a false state to show for your attribute, such as `aria-*`, chain `.toString()` to the value while binding to the attribute. For example: `:aria-expanded="isOpen.toString()"` would persist whether `isOpen` was `true` or `false`. | ||
| **`.camel` modifier** | ||
@@ -313,3 +317,3 @@ **Example:** `<svg x-bind:view-box.camel="viewBox">` | ||
| > Note: You are free to use the shorter "@" syntax: `@click="..."` | ||
| > Note: You are free to use the shorter "@" syntax: `@click="..."`. | ||
@@ -324,3 +328,3 @@ **Example:** `<button x-on:click="foo = 'bar'"></button>` | ||
| > Note: You can also specify a JavaScript function name | ||
| > Note: You can also specify a JavaScript function name. | ||
@@ -388,3 +392,3 @@ **Example:** `<button x-on:click="myFunction"></button>` | ||
| If you wish to customize this, you can specifiy a custom wait time like so: | ||
| If you wish to customize this, you can specify a custom wait time like so: | ||
@@ -504,2 +508,16 @@ ``` | ||
| If you want to access the array object (collection) of the iteration, use the following syntax: | ||
| ```html | ||
| <template x-for="(item, index, collection) in items" :key="index"> | ||
| <!-- You can also reference "collection" inside the iteration if you need. --> | ||
| <!-- Current item. --> | ||
| <div x-text="item"></div> | ||
| <!-- Same as above. --> | ||
| <div x-text="collection[index]"></div> | ||
| <!-- Previous item. --> | ||
| <div x-text="collection[index - 1]"></div> | ||
| </template> | ||
| ``` | ||
| > Note: `x-for` must have a single element root inside of the `<template></template>` tag. | ||
@@ -561,7 +579,7 @@ | ||
| > The example above uses classes from [Tailwind CSS](https://tailwindcss.com) | ||
| > The example above uses classes from [Tailwind CSS](https://tailwindcss.com). | ||
| Alpine offers 6 different transition directives for applying classes to various stages of an element's transition between "hidden" and "shown" states. These directives work both with `x-show` AND `x-if`. | ||
| These behave exactly like VueJs's transition directives, except they have different, more sensible names: | ||
| These behave exactly like VueJS's transition directives, except they have different, more sensible names: | ||
@@ -614,3 +632,5 @@ | Directive | Description | | ||
| > Note: The only anomaly with x-spread is when used with `x-for`. When the directive being "spread" is `x-for`, you should return a normal expression string from the callback. For example: `['x-for']() { return 'item in items' }`. | ||
| > Note: There are a couple of caveats to x-spread: | ||
| > - When the directive being "spread" is `x-for`, you should return a normal expression string from the callback. For example: `['x-for']() { return 'item in items' }`. | ||
| > - `x-data` and `x-init` can't be used inside a "spread" object. | ||
@@ -763,3 +783,3 @@ --- | ||
| ## Security | ||
| If you find a security vulnerability, please send an email to [calebporzio@gmail.com]() | ||
| If you find a security vulnerability, please send an email to [calebporzio@gmail.com](). | ||
@@ -766,0 +786,0 @@ Alpine relies on a custom implementation using the `Function` object to evaluate its directives. Despite being more secure then `eval()`, its use is prohibited in some environments, such as Google Chrome App, using restrictive Content Security Policy (CSP). |
@@ -26,9 +26,9 @@ # Alpine.js | ||
| Para ambiente de produção, é recomendado fixar o número da versão específico no link para evitar problemas inesperadas das versões mais recentes. | ||
| Por exemplo, para usar a versão `2.7.0`: | ||
| Por exemplo, para usar a versão `2.7.1`: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| **Via NPM:** Instale o pacote pelo NPM. | ||
| **Via npm:** Instale o pacote pelo npm. | ||
@@ -85,3 +85,3 @@ ```js | ||
| Podemos até usá-lo para coisas não triviais: | ||
| _Pré pedido de conteudo para o HTML da dropdown ao passar com o rato_ | ||
| _Pré pedido de conteudo para o HTML da dropdown ao passar com o rato_. | ||
@@ -164,3 +164,3 @@ ```html | ||
| **Estrutura:** `<div x-data="[JSON data object]">...</div>` | ||
| **Estrutura:** `<div x-data="[object literal]">...</div>` | ||
@@ -344,3 +344,3 @@ `x-data` declara um novo scope do componente. Diz à estrutura para inicializar um novo componente com o seguinte objeto de dados. | ||
| > Nota: Também podemos ouvir a combinações de teclas do sistema como: `x-on:keydown.cmd.enter="foo"` | ||
| > Nota: Também podemos ouvir a combinações de teclas do sistema como: `x-on:keydown.cmd.enter="foo"`. | ||
@@ -404,3 +404,3 @@ **`.away` modificador** | ||
| O modificador `camel` anexa um evento de escuta ao nome em camel case do evento equivalente. No exemplo acima, a expressão é avaliada quando o evento `eventName` for disparado no elemento | ||
| O modificador `camel` anexa um evento de escuta ao nome em camel case do evento equivalente. No exemplo acima, a expressão é avaliada quando o evento `eventName` for disparado no elemento. | ||
@@ -560,3 +560,3 @@ --- | ||
| > O exemplo acima usa classes de [Tailwind CSS](https://tailwindcss.com) | ||
| > O exemplo acima usa classes de [Tailwind CSS](https://tailwindcss.com). | ||
@@ -783,3 +783,3 @@ Alpine oferece 6 diretivas de transição diferentes para aplicar classes a vários estágios da transição de um elemento entre os estados "oculto" e "mostrado". Essas diretivas funcionam tanto com `x-show` E`x-if`. | ||
| Caso encontrarem uma vulnerabilidade de segurança, envie um email para [calebporzio@gmail.com](mailto:calebporzio@gmail.com) | ||
| Caso encontrarem uma vulnerabilidade de segurança, envie um email para [calebporzio@gmail.com](mailto:calebporzio@gmail.com). | ||
@@ -786,0 +786,0 @@ O Alpine conta com uma implementação personalizada usando o objeto `Function` para avaliar suas diretivas. Apesar de ser mais seguro que o `eval()`, o seu uso é proibido em alguns ambientes, como o Google Chrome App, usando a Política de Segurança de Conteúdo restritiva (CSP). |
@@ -24,9 +24,9 @@ # Alpine.js | ||
| Для продакшн-окружения, рекомедуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий. | ||
| Например, чтобы использовать версию `2.7.0`: | ||
| Для продакшн-окружения, рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий. | ||
| Например, чтобы использовать версию `2.7.1`: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| **С помощью NPM:** Установите пакет из NPM. | ||
| **С помощью npm:** Установите пакет из npm. | ||
| ```js | ||
@@ -104,3 +104,3 @@ npm i alpinejs | ||
| | [`x-show`](#x-show) | Переключает `display: none;` на элементе, в зависимости от результата переданного выражения (true или false). | | ||
| | [`x-bind`](#x-bind) | Устанавливает значение атрибута равным результату переданного JS-выражения | | ||
| | [`x-bind`](#x-bind) | Устанавливает значение атрибута равным результату переданного JS-выражения. | | ||
| | [`x-on`](#x-on) | Устанавливает обработчик события на элемент. Когда событие срабатывает, выполняет переданное JS-выражение. | | ||
@@ -113,3 +113,3 @@ | [`x-model`](#x-model) | Добавляет "двустороннюю привязку данных" (two-way data binding) на элемент. Синхронизирует элемент и данные компонента. | | ||
| | [`x-for`](#x-for) | Создает новые DOM узлы для каждого элемента в массиве. Должна использоваться в теге `<template>`. | | ||
| | [`x-transition`](#x-transition) | Директивы для добавления классов различным стадиям перехода (transition) элемента | | ||
| | [`x-transition`](#x-transition) | Директивы для добавления классов различным стадиям перехода (transition) элемента. | | ||
| | [`x-spread`](#x-spread) | Позволяет вам привязывать объект с директивами Alpine к элементам, улучшая переиспользуемость. | | ||
@@ -303,3 +303,3 @@ | [`x-cloak`](#x-cloak) | Удаляется при инициализации Alpine. Полезна для скрытия DOM до инициализации. | | ||
| `x-on` цепляет прослушиватель события на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение. | ||
| `x-on` цепляет слушатель события на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение. | ||
@@ -356,3 +356,3 @@ Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, будут обновлены. | ||
| >Замечание: Также можно использовать модификатор `.document` для добавления прослушивателей к `document`. | ||
| >Замечание: Также можно использовать модификатор `.document` для добавления слушателей к `document`. | ||
@@ -628,3 +628,3 @@ **Модификатор `.once`** | ||
| `$event` – это магическое свойство, которое можно использовать в прослушивателе событий для получения нативного объекта "Event". | ||
| `$event` – это магическое свойство, которое можно использовать в слушателе событий для получения нативного объекта "Event". | ||
@@ -722,3 +722,3 @@ --- | ||
| ## Безопасность | ||
| Если вы нашли уязвимость, пожалуйста, отправьте письмо на [calebporzio@gmail.com]() | ||
| Если вы нашли уязвимость, пожалуйста, отправьте письмо на [calebporzio@gmail.com](). | ||
@@ -725,0 +725,0 @@ Alpine полагается на собственную реализацию, которая использует объект `Function` для оценки своих директив. Несмотря на то, что он безопаснее, чем `eval()`, его использование запрещено в некоторых средах, таких как Google Chrome App, т.е. использующих Политику защиты контента (CSP). |
@@ -25,8 +25,8 @@ # Alpine.js | ||
| 在正式環境中，建議在連結中固定特定版本，以避免新版本使功能無法使用。 | ||
| 如，要使用 `2.7.0` 版則可以這樣寫： | ||
| 如，要使用 `2.7.1` 版則可以這樣寫： | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.1/dist/alpine.min.js" defer></script> | ||
| ``` | ||
| **使用 NPM:** 從 NPM 安裝套件。 | ||
| **使用 npm:** 從 npm 安裝套件。 | ||
| ```js | ||
@@ -113,4 +113,4 @@ npm i alpinejs | ||
| | [`x-for`](#x-for) | 為陣列中的每個項目建立新 DOM 節點。必須在 `<template>` 標籤上使用。 | | ||
| | [`x-transition`](#x-transition) | 用於在轉場的各個階段為元素設定 Class 的指示詞 | | ||
| | [`x-spread`](#x-spread) | 為了更佳的可複用性，可將包含 Alpine 指示詞的物件繫結至元素上 | | ||
| | [`x-transition`](#x-transition) | 用於在轉場的各個階段為元素設定 Class 的指示詞。 | | ||
| | [`x-spread`](#x-spread) | 為了更佳的可複用性，可將包含 Alpine 指示詞的物件繫結至元素上。 | | ||
| | [`x-cloak`](#x-cloak) | 該屬性會在 Alpine 初始化後移除。適合用來隱藏還未初始化的 DOM。 | | ||
@@ -739,3 +739,3 @@ | ||
| ## 安全性 Security | ||
| 若你發現安全性漏洞，請傳送電子郵件至 [calebporzio@gmail.com]() | ||
| 若你發現安全性漏洞，請傳送電子郵件至 [calebporzio@gmail.com]()。 | ||
@@ -742,0 +742,0 @@ Alpine 仰賴與使用 `Function` 物件來自定實作以對指示詞取值。雖然比 `eval()` 來的安全，但這個做法依然在一些環境下被禁止，如 Google Chrome App 使用了限制性的 CSP (Content Security Policy，內容安全性原則)。 |
@@ -40,4 +40,7 @@ import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray } from './utils' | ||
| this.unobservedData.$watch = null | ||
| Object.keys(Alpine.magicProperties).forEach(name => { | ||
| this.unobservedData[`$${name}`] = null | ||
| // The IE build uses a proxy polyfill which doesn't allow properties | ||
| // to be defined after the proxy object is created so, | ||
| // for IE only, we need to define our helpers earlier. | ||
| Object.entries(Alpine.magicProperties).forEach(([name, callback]) => { | ||
| Object.defineProperty(this.unobservedData, `$${name}`, { get: function () { return callback(canonicalComponentElementReference) } }); | ||
| }) | ||
@@ -68,2 +71,7 @@ /* IE11-ONLY:END */ | ||
| /* MODERN-ONLY:START */ | ||
| // We remove this piece of code from the legacy build. | ||
| // In IE11, we have already defined our helpers at this point. | ||
| // Register custom magic properties. | ||
@@ -73,2 +81,3 @@ Object.entries(Alpine.magicProperties).forEach(([name, callback]) => { | ||
| }) | ||
| /* MODERN-ONLY:END */ | ||
@@ -140,3 +149,3 @@ this.showDirectiveStack = [] | ||
| return comparisonData[part] | ||
| }, self.getUnobservedData()) | ||
| }, self.unobservedData) | ||
| }) | ||
@@ -162,4 +171,5 @@ } else { | ||
| } | ||
| return comparisonData[part] | ||
| }, self.getUnobservedData()) | ||
| }, self.unobservedData) | ||
| }) | ||
@@ -166,0 +176,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| import { arrayUnique, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils' | ||
| import { arrayUnique, checkedAttrLooseCompare, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils' | ||
| import Alpine from '../index' | ||
@@ -22,3 +22,3 @@ | ||
| } else if (attrType !== 'bind') { | ||
| el.checked = el.value == value | ||
| el.checked = checkedAttrLooseCompare(el.value, value) | ||
| } | ||
@@ -29,13 +29,13 @@ } else if (el.type === 'checkbox') { | ||
| // automatically. | ||
| if (typeof value === 'string' && attrType === 'bind') { | ||
| el.value = value | ||
| if (typeof value !== 'boolean' && ! [null, undefined].includes(value) && attrType === 'bind') { | ||
| el.value = String(value) | ||
| } else if (attrType !== 'bind') { | ||
| if (Array.isArray(value)) { | ||
| // I'm purposely not using Array.includes here because it's | ||
| // strict, and because of Numeric/String mis-casting, I | ||
| // want the "includes" to be "fuzzy". | ||
| el.checked = value.some(val => val == el.value) | ||
| } else { | ||
| el.checked = !! value | ||
| } | ||
| if (Array.isArray(value)) { | ||
| // I'm purposely not using Array.includes here because it's | ||
| // strict, and because of Numeric/String mis-casting, I | ||
| // want the "includes" to be "fuzzy". | ||
| el.checked = value.some(val => checkedAttrLooseCompare(val, el.value)) | ||
| } else { | ||
| el.checked = !!value | ||
| } | ||
| } | ||
@@ -83,3 +83,3 @@ } else if (el.tagName === 'SELECT') { | ||
| function setIfChanged(el, attrName, value) { | ||
| if (el.getAttribute(attrName) != value){ | ||
| if (el.getAttribute(attrName) != value) { | ||
| el.setAttribute(attrName, value) | ||
@@ -86,0 +86,0 @@ } |
@@ -94,9 +94,11 @@ import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate, isNumeric } from '../utils' | ||
| } | ||
| let items = component.evaluateReturnExpression(el, iteratorNames.items, extraVars) | ||
| // This adds support for the `i in n` syntax. | ||
| if (isNumeric(iteratorNames.items)) { | ||
| return Array.from(Array(parseInt(iteratorNames.items, 10)).keys(), i => i + 1) | ||
| if (isNumeric(items) && items > 0) { | ||
| items = Array.from(Array(items).keys(), i => i + 1) | ||
| } | ||
| return component.evaluateReturnExpression(el, iteratorNames.items, extraVars) | ||
| return items | ||
| } | ||
@@ -103,0 +105,0 @@ |
| import { registerListener } from './on' | ||
| import { isNumeric } from '../utils' | ||
| import { isNumeric, checkedAttrLooseCompare } from '../utils' | ||
@@ -38,3 +38,3 @@ export function registerModelListener(component, el, modifiers, expression, extraVars) { | ||
| const newValue = modifiers.includes('number') ? safeParseNumber(event.target.value) : event.target.value | ||
| return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter(i => i !== newValue) | ||
| return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter(el => !checkedAttrLooseCompare(el, newValue)) | ||
| } else { | ||
@@ -41,0 +41,0 @@ return event.target.checked |
@@ -34,5 +34,3 @@ import Component from './component' | ||
| this.listenForNewUninitializedComponentsAtRunTime(el => { | ||
| this.initializeComponent(el) | ||
| }) | ||
| this.listenForNewUninitializedComponentsAtRunTime() | ||
| }, | ||
@@ -58,3 +56,3 @@ | ||
| listenForNewUninitializedComponentsAtRunTime: function (callback) { | ||
| listenForNewUninitializedComponentsAtRunTime: function () { | ||
| const targetNode = document.querySelector('body'); | ||
@@ -61,0 +59,0 @@ |
@@ -23,2 +23,6 @@ | ||
| export function checkedAttrLooseCompare(valueA, valueB) { | ||
| return valueA == valueB | ||
| } | ||
| export function warnIfMalformedTemplate(el, directive) { | ||
@@ -383,13 +387,13 @@ if (el.tagName.toLowerCase() !== 'template') { | ||
| const ensureStringExpression = (expression, el, component) => { | ||
| return typeof expression === 'function' | ||
| ? component.evaluateReturnExpression(el, expression) | ||
| : expression | ||
| } | ||
| export function transitionClassesIn(el, component, directives, showCallback) { | ||
| let ensureStringExpression = (expression) => { | ||
| return typeof expression === 'function' | ||
| ? component.evaluateReturnExpression(el, expression) | ||
| : expression | ||
| } | ||
| const enter = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter') || { expression: '' }).expression, el, component)) | ||
| const enterStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-start') || { expression: '' }).expression, el, component)) | ||
| const enterEnd = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-end') || { expression: '' }).expression, el, component)) | ||
| const enter = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter') || { expression: '' }).expression)) | ||
| const enterStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-start') || { expression: '' }).expression)) | ||
| const enterEnd = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-end') || { expression: '' }).expression)) | ||
| transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {}, TRANSITION_TYPE_IN) | ||
@@ -399,5 +403,5 @@ } | ||
| export function transitionClassesOut(el, component, directives, hideCallback) { | ||
| const leave = convertClassStringToArray((directives.find(i => i.value === 'leave') || { expression: '' }).expression) | ||
| const leaveStart = convertClassStringToArray((directives.find(i => i.value === 'leave-start') || { expression: '' }).expression) | ||
| const leaveEnd = convertClassStringToArray((directives.find(i => i.value === 'leave-end') || { expression: '' }).expression) | ||
| const leave = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'leave') || { expression: '' }).expression, el, component)) | ||
| const leaveStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'leave-start') || { expression: '' }).expression, el, component)) | ||
| const leaveEnd = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'leave-end') || { expression: '' }).expression, el, component)) | ||
@@ -404,0 +408,0 @@ transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback, TRANSITION_TYPE_OUT) |
@@ -512,1 +512,19 @@ import Alpine from 'alpinejs' | ||
| }) | ||
| test('non-string and non-boolean attributes are cast to string when bound to checkbox', () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ number: 100, zero: 0, bool: true, nullProp: null }"> | ||
| <input type="checkbox" id="number" :value="number"> | ||
| <input type="checkbox" id="zero" :value="zero"> | ||
| <input type="checkbox" id="boolean" :value="bool"> | ||
| <input type="checkbox" id="null" :value="nullProp"> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('#number').value).toEqual('100') | ||
| expect(document.querySelector('#zero').value).toEqual('0') | ||
| expect(document.querySelector('#boolean').value).toEqual('on') | ||
| expect(document.querySelector('#null').value).toEqual('on') | ||
| }) |
@@ -494,1 +494,15 @@ import Alpine from 'alpinejs' | ||
| }) | ||
| test('x-for over range using i in x syntax with data property', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ count: 10 }"> | ||
| <template x-for="i in count"> | ||
| <span x-text="i"></span> | ||
| </template> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelectorAll('span').length).toEqual(10) | ||
| }) |
@@ -208,2 +208,25 @@ import Alpine from 'alpinejs' | ||
| test('x-model checkbox array binding is consistent (if value is initially checked, it can be unchecked)', async () => { | ||
| // https://github.com/alpinejs/alpine/issues/814 | ||
| document.body.innerHTML = ` | ||
| <div | ||
| x-data="{ | ||
| selected: [2] | ||
| }" | ||
| > | ||
| <input type="checkbox" value="2" x-model="selected" /> | ||
| <span x-bind:bar="JSON.stringify(selected)"></span> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| expect(document.querySelector('input[type=checkbox]').checked).toEqual(true) | ||
| expect(document.querySelector('span').getAttribute('bar')).toEqual("[2]") | ||
| fireEvent.change(document.querySelector('input[type=checkbox]'), { target: { checked: false } }) | ||
| await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[]") }) | ||
| }) | ||
| test('x-model binds radio value', async () => { | ||
@@ -210,0 +233,0 @@ document.body.innerHTML = ` |
@@ -95,2 +95,5 @@ import Alpine from 'alpinejs' | ||
| ['x-transition:enter-end']() { return 'enter-end' }, | ||
| ['x-transition:leave']() { return 'leave' }, | ||
| ['x-transition:leave-start']() { return 'leave-start' }, | ||
| ['x-transition:leave-end']() { return 'leave-end' }, | ||
| }, | ||
@@ -149,2 +152,40 @@ } | ||
| ) | ||
| document.querySelector('button').click() | ||
| // Wait out the intial Alpine refresh debounce. | ||
| await new Promise((resolve) => | ||
| setTimeout(() => { | ||
| resolve(); | ||
| }, 5) | ||
| ) | ||
| expect(document.querySelector('span').classList.contains('leave')).toEqual(true) | ||
| expect(document.querySelector('span').classList.contains('leave-start')).toEqual(true) | ||
| expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false) | ||
| expect(document.querySelector('span').getAttribute('style')).toEqual(null) | ||
| frameStack.pop()() | ||
| expect(document.querySelector('span').classList.contains('leave')).toEqual(true) | ||
| expect(document.querySelector('span').classList.contains('leave-start')).toEqual(true) | ||
| expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false) | ||
| expect(document.querySelector('span').getAttribute('style')).toEqual(null) | ||
| frameStack.pop()() | ||
| expect(document.querySelector('span').classList.contains('leave')).toEqual(true) | ||
| expect(document.querySelector('span').classList.contains('leave-start')).toEqual(false) | ||
| expect(document.querySelector('span').classList.contains('leave-end')).toEqual(true) | ||
| expect(document.querySelector('span').getAttribute('style')).toEqual(null) | ||
| await new Promise((resolve) => | ||
| setTimeout(() => { | ||
| expect(document.querySelector('span').classList.contains('leave')).toEqual(false) | ||
| expect(document.querySelector('span').classList.contains('leave-start')).toEqual(false) | ||
| expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false) | ||
| expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') | ||
| resolve(); | ||
| }, 10) | ||
| ) | ||
| }) | ||
@@ -151,0 +192,0 @@ |
@@ -149,1 +149,25 @@ import Alpine from 'alpinejs' | ||
| }) | ||
| test('$watch with magic properties', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ foo: 'bar', bob: 'car' }" x-init="$watch('$self.foo', value => bob = value)"> | ||
| <span x-text="bob"></span> | ||
| <button x-on:click="$self.foo = 'far'"></button> | ||
| </div> | ||
| ` | ||
| Alpine.addMagicProperty('self', function (el) { | ||
| return el.__x.$data | ||
| }) | ||
| Alpine.start() | ||
| expect(document.querySelector('span').textContent).toEqual('car') | ||
| document.querySelector('button').click() | ||
| await wait(() => { | ||
| expect(document.querySelector('span').textContent).toEqual('far') | ||
| }) | ||
| }) |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.4%
896965
- Lines of code
- increased by0.63%
13903
- Number of lines in readme file
- increased by2.59%
793