Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
oleg
/
alpine
-ын хуулбар https://github.com/alpinejs/alpine.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

wip

Caleb Porzio 5 жил өмнө
parent
f11a3bab22
commit
134284f1ac
3 өөрчлөгдсөн 32 нэмэгдсэн , 4 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 25 1
      README.md
  2. 1 1
      dist/mix-manifest.json
  3. 6 2
      dist/project-x.js

+ 25 - 1
README.md
Файл харах 

@@ -43,7 +43,7 @@ Add the following script to the end of your `<head>` section.
 
 
 
 ## Learn
 
 ## Learn
 
 
 
-There are 5 directives available to you:
 
+There are 6 directives available to you:
 
 
 
 | Directive
 
 | Directive
 
 | --- |
 
 | --- |
 
@@ -52,6 +52,7 @@ There are 5 directives available to you:
 
 | `x-on` |
 
 | `x-on` |
 
 | `x-model` |
 
 | `x-model` |
 
 | `x-text` |
 
 | `x-text` |
 
+| `x-cloak` |
 
 
 
 Here's how they each work:
 
 Here's how they each work:
 
 
 
@@ -109,6 +110,16 @@ When the `.away` modifier is present, the event handler will only be executed wh
 
 
 
 This is useful for hiding dropdowns and modals when a user clicks away from them.
 
 This is useful for hiding dropdowns and modals when a user clicks away from them.
 
 
 
+**`.prevent` modifier**
 
+**Example:** `<input type="checkbox" x-on:click.prevent>`
 
+
 
+Adding `.prevent` to an event listener will call `preventDefault` on the triggered event. In the above example, this means the checkbox wouldn't actually get checked when a user clicks on it.
 
+
 
+**`.stop` modifier**
 
+**Example:** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`
 
+
 
+Adding `.stop` to an event listener will call `stopPropagation` on the triggered event. In the above example, this means the "click" event won't bubble from the button to the outer `<div>`. Or in other words, when a user clicks the button, `foo` won't be set to `'bar'`.
 
+
 
 ---
 
 ---
 
 
 
 ### `x-model`
 
 ### `x-model`
 
@@ -128,3 +139,16 @@ This is useful for hiding dropdowns and modals when a user clicks away from them
 
 **Structure:** `<span x-text="[expression]"`
 
 **Structure:** `<span x-text="[expression]"`
 
 
 
 `x-text` works similarly to `x-bind`, except instead of updating the value of an attribute, it will update the `innerText` of an element.
 
 `x-text` works similarly to `x-bind`, except instead of updating the value of an attribute, it will update the `innerText` of an element.
 
+
 
+---
 
+
 
+### `x-cloak`
 
+**Example:** `<div x-data="{}" x-cloak></div>`
 
+
 
+`x-cloak` attributes are removed from elements when Project-X initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:
 
+
 
+```html
 
+<style>
 
+    [x-cloak] { display: none; }
 
+</style>
 
+```

+ 1 - 1
dist/mix-manifest.json
Файл харах 

@@ -1,4 +1,4 @@
 
 {
 
 {
 
-    "/project-x.js": "/project-x.js?id=933cb9113a8cbed1ce12",
 
+    "/project-x.js": "/project-x.js?id=9b4b479afd1ac6cf2eb1",
 
     "/project-x.min.js": "/project-x.min.js?id=594fb2ceb5a9311a8dfb"
 
     "/project-x.min.js": "/project-x.min.js?id=594fb2ceb5a9311a8dfb"
 
 }
 
 }

+ 6 - 2
dist/project-x.js
Файл харах 

@@ -940,6 +940,10 @@ function () {
 
 
 
               break;
 
               break;
 
 
 
+            case 'cloak':
 
+              el.removeAttribute('x-cloak');
 
+              break;
 
+
 
             default:
 
             default:
 
               break;
 
               break;
 
           }
 
           }
 
@@ -1349,12 +1353,12 @@ function saferEvalNoReturn(expression, dataContext) {
 
   return new Function(['$data'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with($data) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
 
   return new Function(['$data'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with($data) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
 
 }
 
 }
 
 function isXAttr(attr) {
 
 function isXAttr(attr) {
 
-  var xAttrRE = /x-(on|bind|data|text|model)/;
 
+  var xAttrRE = /x-(on|bind|data|text|model|cloak)/;
 
   return xAttrRE.test(attr.name);
 
   return xAttrRE.test(attr.name);
 
 }
 
 }
 
 function getXAttrs(el, type) {
 
 function getXAttrs(el, type) {
 
   return Array.from(el.attributes).filter(isXAttr).map(function (attr) {
 
   return Array.from(el.attributes).filter(isXAttr).map(function (attr) {
 
-    var typeMatch = attr.name.match(/x-(on|bind|data|text|model)/);
 
+    var typeMatch = attr.name.match(/x-(on|bind|data|text|model|cloak)/);
 
     var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/);
 
     var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/);
 
     var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
 
     var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
 
     return {
 
     return {