profile
viewpoint
Muzaffer Dede muzafferdede @nemrutco Taiwan (origin: Turkey) https://nemrut.co

muzafferdede/alpine 0

A rugged, minimal framework for composing JavaScript behavior in your markup.

muzafferdede/AppleIntelWiFiMVM 0

OS X driver for Intel WiFi cards based on the MVM firmware (e.g. 7265, 8260)

muzafferdede/laravel-activitylog 0

Log activity inside your Laravel app

muzafferdede/license-templates 0

Templates for open source and other licenses

muzafferdede/livewire 0

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

muzafferdede/nova-flexible-content 0

Flexible Content & Repeater Fields for Laravel Nova

muzafferdede/nova-metrics 0

Add support for resource-filters on your Laravel Nova Metrics

pull request commentalpinejs/alpine

Feature - Transition improvements

Yeah, I was not trying to link it to this PR but want to know if i make sense to expect this behavior. Maybe we should consider this behavior in transitions. Will be great for the component patent - child reactivity

SimoTod

comment created time in 13 days

pull request commentalpinejs/alpine

Feature - Transition improvements

Great work @SimoTod! Quick question, i have a case which i need child elements to finish transitions then parent element do its transition thing. ex:

<div x-data="{show: true}">
  <p>shown: <span x-text="show"></span></p>
  <button @click="show = !show">Toggle</button>
  <div x-show.transition.duration.1000ms="show">
    PARENT
    <div x-show.transition.duration.5000ms="show">
      CHILD
    </div>
  </div>
</div>

What do you expect in this case to happen? child needs 5000ms to complete the transition but parent needs 1000ms.

I am expecting child element finish its transition and parent start once all child element finished. Or am i wrong?

SimoTod

comment created time in 13 days

issue closednemrutco/nova-global-filter

other nova package do not show

When i insert nova package (ampeco/nova-date-range-filter) into the NovaGlobalFilter, the date range filter do not show.

Maybe you should be compatible with other nova packages.

Translated by Google. Sry, My English is poor.

closed time in 24 days

wuxi889

issue commentnemrutco/nova-global-filter

other nova package do not show

This package overwrites Nova's default Metric Cards to allow them to listen "global-filter-changed" event. Make sure there are no any conflicts with other packages.

As i mentioned here, this is expected behaviour since there is no package could be compatible with any custom packages. All we can do is a general use case compatibility as this packages provides already. You are free to make your own package based on this package with fixed compatibility of your used packages.

wuxi889

comment created time in 25 days

issue commentalpinejs/alpine

x-show with x-transition with quick event may have weird behavior

@SimoTod , right! I did actually think that and explicitly request 2.4.0 for the #376 but not for my use case since i thought cdn cache is fine. I can confirm my use case is ok with v2.4.0, and yeah, hover issue is hard to replicate but still exists. It is not a considerable issue IMO since we are talking about milliseconds bugs. Let's blame on Javascript :)

dbpolito

comment created time in a month

issue commentalpinejs/alpine

x-show with x-transition with quick event may have weird behavior

but it's a smaller use case.

i don't get it, this is my use case and i can't use v2.4.0 right now since it still cause target component's state and visibility issues if user clicks fast on the trigger. Right now i use combination of your some of your latest PRs and refactored transition PR and its seems fine. Do you think Caleb did mess in somewhere while he release? I can tell 2.4.0 it's improved but not fixed. So should we consider as "transition issues still exists"?

dbpolito

comment created time in a month

issue commentalpinejs/alpine

x-show with x-transition with quick event may have weird behavior

this was the codepen i created to check if transition issues are fixed or not. It uses latest release of AlpineJS. The original issue still exists.

dbpolito

comment created time in a month

issue commentalpinejs/alpine

x-show with x-transition with quick event may have weird behavior

@HugoDF I did check few and seems not with the latest release. So weird that i should work so, i did try it with my refactored PR build and it was working fine what that build. So i am guessing the other PRs ($nextTick related) might cause something. I think worth to take a look.

dbpolito

comment created time in a month

issue commentalpinejs/alpine

$nextTick vs x-transition

This should be fixed since #536 is merged as well and it solves most of the transitions bugs. With #555 all should be good.

carlmjohnson

comment created time in a month

issue commentalpinejs/alpine

flatMap usage cause issue on Edge

~which version of Edge do you use?~ ~flatMap should be supported by the latest versions.~

So it seems that Edge 16-18 (old version not using chromium) supports the module/nomodule syntax so it doesn't use the legacy version with the polyfills and babel does not transpile it :( so before tagging the version we need to rewrite that part. Thanks @muzafferdede

@SimoTod i wanted to inform as:

  • i use Edge 18
  • I think Edge 12 - 18 does not support flatMap according to caniuse

@HugoDF i think you also did read this as it's mentioning the issue. So not sure which path to follow for a possible PR.

muzafferdede

comment created time in a month

issue openedalpinejs/alpine

flatMap usage cause issue on Edge

There is a fatMap use case in getXAttrs function which cause Edge to stop working on current master. The use case implemented when Caleb was working on x-bind. So i think it is still WIP. Just want to put it here to remind.

created time in a month

issue commentalpinejs/alpine

Performance issues when used with another library

Seems to me the a svg element on the page has around 1333 child node which cause const rootEls = (el || document).querySelectorAll('[x-data]'); to check all of them to find out if any node with x-data attribute exists. I also thought the PR i made while ago (#395) could be helpful at this point to ignore those nodes which have a huge amount of child nodes but i guess wont.

@calebporzio at #395

  • The issue mentions x-ignore saving resources, and this is only true for x-ignore used within an Alpine component if it's used outside of one, that DOM will never get walked anyways

I think Alpine.start() will still check all those nodes to initialize components with the x-data attribute. #395 did have a check as

        const rootEls = document.querySelectorAll('[x-data]');

        rootEls.forEach(rootEl => {
            // Detect ignore element and return if we hit one
            if (rootEl.parentElement.closest('[x-ignore]:not([x-ignore=false])')) return

            callback(rootEl)
        })

if node has an x-ignore tag or not but i think querySelectAll will still check all those nodes to figure out if there is any x-data attribute. So in this case x-ignore wouldn't help. I think we should consider querySelectAll and maybe an alternative way to it?

SebastianSchoeps

comment created time in a month

issue commentalpinejs/alpine

x-ref maybe not working

I think you just forgot to include x-data="{}" on the wrapper. Alpine component will not initialize if wrapper div does not has x-data attribute. And your fetch returns json. Binding inner html to json string?

<div x-data="{}">
    <button
        class="btn btn-primary"
        x-on:click="fetch('https://jsonplaceholder.typicode.com/todos/1')
                .then(response => response.json())
                .then(json => { $refs.todo.innerHTML = JSON.stringify(json) })">
        Fetch
    </button>

    <div x-ref="todo">
    Click button above to fetch some data
    </div>
</div>
darsenault

comment created time in a month

issue commentalpinejs/alpine

x-ref maybe not working

i think you just forgot to include x-data="{}" on the wrapper

darsenault

comment created time in a month

issue closednemrutco/nova-global-filter

Layout global filter

currently, the global filter card consumes a lot of space. Would be great to have a slim version

1 2020-05-01 14-02-44 or even some options to style like this: 71813573-429dc280-307a-11ea-9238-a128968b8847

wonder if this could be achieved with allow the user to add some CSS classes or define a custom view?

closed time in a month

cord

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 9b182cf0ec8939b9a4d83484d23102e6efb10bd3

added vue reference link for the 'once' method.

view details

Muzaffer Dede

commit sha d92744b6cc730d7bc3143e201739f875e5027a97

clean up & make sure all good before review

view details

push time in a month

push eventmuzafferdede/alpine

Carl Johnson

commit sha 05cab0ce162937a442eb05d86456bc4570680ed9

Initialize components in try/catch blocks

view details

unknown

commit sha 3d3f7b9dca0ca6bab05114948a89d20dc8a3f887

Fix checkbox checked by default when value is present

view details

unknown

commit sha f596743f36918dd1a75288dbd7dadb6e13f2e5e4

Updated testing for radio as well

view details

unknown

commit sha 7cca7fcb89bb792d6dfcc411f79c2726a065104e

Fixed typo

view details

Tom Davies

commit sha 9ac3a583e7b1dd1f7a6bd27532efdc22e07251cc

Update x-on, $event and $dispatch docs. Added an example of how to access $event and $dispatch inside of a Javascript function. This also includes adding an example of passing in a Javascript name to x-on.

view details

Jonas

commit sha 4b1dcc040417864e77720e5b25b17e423d8fa3c1

fix: polyfill SVGElement.prototype.contains for IE

view details

Jonas Kuske

commit sha c29d372788610d0a86bd63244dd9366fe08b8331

feat: expose $el while evaluating data expression

view details

Jonas

commit sha ca79687e1e9af8307b70c1185eccf02ab53fe1df

docs: mention usage of magic properties in x-data

view details

Jonas Kuske

commit sha 6298ce801910cb8b88342263c8490a0ed0c788d3

test: add tests for $el within x-data

view details

Jonas Kuske

commit sha a01845b25ed7499ba35be03de893a19ce8ccd8c7

fix: expose $el while evaluating changed x-data

view details

Tom Davies

commit sha 25072cc5a456800eab65dd8538df53d1444994f0

Update README.md Co-authored-by: Hugo <HugoDF@users.noreply.github.com>

view details

Tom Davies

commit sha a1e933de413e68a62ad5b71f59efff9ff72cc2fb

Update README.md Co-authored-by: Hugo <HugoDF@users.noreply.github.com>

view details

Hugo

commit sha 8b87a8ac0eaa9c6269c6ab4a62c559ad7da0e407

Typo :joy:

view details

evgeniyPP

commit sha 4aa0b7a5c35dc1941a4dec149775d3fb3866c753

Russian translation added

view details

jokarz

commit sha 02dec30a2a85ba1123ba62bc76da46c1a5ebdcc9

Merge branch 'master' into master

view details

monken,wu

commit sha cf5578ce65456ce37a82bb375cca9f28efe8dced

Readme Traditional Chinese translation completed

view details

monken,wu

commit sha c7fedda689ef78f41af8b3ec2db3eb55d1b08f39

add Traditional Chinese translation link

view details

monken,wu

commit sha 25384b36e4e19f7a50e85681af6acb22fd4a7b6c

Typo correction

view details

evgeniyPP

commit sha 73e25b65a27c56b5b507b81bc35eb4d70d13ef5e

README.ru.md – translation improvements & typos correction

view details

monken,wu

commit sha c1124f17be8254c8f64939527fef1441932a5bb5

Typo correction

view details

push time in a month

push eventmuzafferdede/alpine

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha a49f0e2a8adde19eac926b05b8f8b05dd98c16fe

resolve conficts

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 8d4edee26141aa25046fd0104555067f69cd0b68

resolve conficts

view details

push time in a month

pull request commentalpinejs/alpine

Improve $nextTick for transitions

Just want to confirm, isn't this already possible by doing like so

...

<div x-data="{whatsup: 'nothin'}" x-text="whatsup" 
    x-on:alpine-transitionrun.window="whatsup = 'transition run'" 
    x-on:alpine-transitionend.window="whatsup = 'transition end'">
</div>
<div x-data="{ show: false }">
  <button x-on:click="show = !show">Toggle</button>
  <div x-show.transition="show"
       x-on:transitionrun="$dispatch('alpine-transitionrun')" 
       x-on:transitionstart="$dispatch('alpine-transitionstart')" 
       x-on:transitionend="$dispatch('alpine-transitionend')">
    Content
  </div>
</div>
ahmedkandel

comment created time in a month

pull request commentalpinejs/alpine

Don't modify attribute if set to the current value

@SimoTod, haven't check the details but, this sounds like the "repainting" issue we had on #542

Tom-Julux

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 3ac271aa210c7bb36aab52a36d913149d8497936

fixed typo

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 9552e32f63320eb3ad449a668f91993f921da401

fixed typo

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 5422e56a5cc3585c3592b53a6f7c0451bb385441

synced test with refactored PR

view details

push time in a month

pull request commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

It's still smaller current master is 66.6KB, this build is 66.3KB (unzipped). The minified version strips out the comments so I would not remove them, personally.

Currently master is 66.6KB and this build is 66KB (unzipped). By considering all the comments i added, the minified version will have more impact on file size.

muzafferdede

comment created time in a month

pull request commentalpinejs/alpine

Fix x show transition overlap

Fixed by assigning el.transition_last_value at initial.

muzafferdede

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha c1be1e55989bb6c4666971350cf8ca0c6187276b

prevented unexpected transitions

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha afb5b2be00c280bcc9a3a3e26770fa12b60eb437

prevented unexpected transitions

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 1aaba8076eec1232b5051635dde8ce7275688dc7

add a better way of hanling 'handle' method

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha bd095df583eb1cdc13a18ccebb833c95d402cc57

add a better way of hanling 'handle' method

view details

push time in a month

pull request commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

I did apply @SimoTod recommendation "once" method instead of using setTimeout for to make sure we did not overlap to this PR as well. We are 1 variable (el.transition_timer) less now.

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fix x show transition overlap

 export function transition(el, stages) {         requestAnimationFrame(() => {             stages.end() -            setTimeout(() => {+            // Asign current transition to el in case we need to force it

Thanks, should be fine with yours :)

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fix x show transition overlap

 import { transitionIn, transitionOut } from '../utils'  export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {+    // Resolve any previous pending transitions before starting a new one

As i said in #542 we can run el.transition_remaning() any time if we need to clear transitions.

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fix x show transition overlap

 test('x-transition supports css animation', async () => {     )     expect(document.querySelector('span').classList.contains('animation-leave')).toEqual(false) })++test('remaining transitions forced to complete if they exists', async () => {

Fixed by improving the test

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fix x show transition overlap

 export function transition(el, stages) {         requestAnimationFrame(() => {             stages.end() -            setTimeout(() => {+            // Asign current transition to el in case we need to force it+            el.__x_transition_remaining =() => {+                 stages.hide()                  // Adding an "isConnected" check, in case the callback                 // removed the element from the DOM.                 if (el.isConnected) {                     stages.cleanup()                 }++                // Safe to remove transition from el since it is completed+                delete el.__x_transition_remaining+                if(el.__x_transition_timer){+                    clearTimeout(el.__x_transition_timer)+                }+            }++            el.__x_transition_timer = setTimeout(() => {+                // We only want to run remaining transitions in the end if they exists+                if (el.__x_transition_remaining) {+                    el.__x_transition_remaining()+                }

Good news, i finally did figure out how to implement the way you mentioned. Good call @SimoTod. We are 1 variable less now :)

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fix x show transition overlap

 export function handleShowDirective(component, el, value, modifiers, initialUpda         if (! value) {             if ( el.style.display !== 'none' ) {                 transitionOut(el, () => {-                    resolve(() => {+                    // If previous transitions still there, don't use resolve+                    if ( el.__x_transition_remaining ) {

As i said at #542 if value did not change but if there is a remaining transition, we should not use resolve.

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

-import { transitionIn, transitionOut } from '../utils'+import { transitionIn, transitionOut } from '../transitions'+import { showElement, hideElement } from '../utils'  export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {-    const hide = () => {-        el.style.display = 'none'+    // Resolve any previous pending transitions before starting a new one+    if (el.__x_transition_remaining && el.__x_transition_last_value !== value) {+        el.__x_transition_remaining()     } -    const show = () => {-        if (el.style.length === 1 && el.style.display === 'none') {-            el.removeAttribute('style')-        } else {-            el.style.removeProperty('display')-        }-    }--    if (initialUpdate === true) {+    // Resolve immediately if initial page load+    if (initialUpdate) {         if (value) {-            show()+            showElement(el)         } else {-            hide()+            hideElement(el)         }         return     }      const handle = (resolve) => {         if (! value) {             if ( el.style.display !== 'none' ) {-                transitionOut(el, () => {-                    resolve(() => {-                        hide()-                    })-                }, component)+                transitionOut(el, component, () => {+                    // If previous transitions still there, don't use resolve+                    if (el.__x_transition_remaining) {
  • Oh It's the where black hole begins. In case we have a transition going on but if value did not change since last time, we should not resolve it in that case. This part is related to immediate and hide child elements before parent related thing. I got lost a lot here. Even while i am explaining to you now :)
  • Test has been updated and now master fails these but PRs passes. There was a timing issue where master flicks :) So i needed to find out best time the falsy thing happens.
muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

-import { transitionIn, transitionOut } from '../utils'+import { transitionIn, transitionOut } from '../transitions'

I haven't went deeper than x-show. But i did make sure refactoring did not effect existing directives. Anyways since the remaining transitions are carried with el, we can run el.transition_remaining() anytime, anywhere, anyhow.

muzafferdede

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha e50f4c2440cda54d3e46ee5f32dcd3259293b3d2

a better test for transition overlap

view details

Muzaffer Dede

commit sha 95fd0fcbfc2b4640a9b5fe6e1dac52841defc4b7

applied some fixes and added some description to code

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 7cb0bb10e502f1d76f4fb3144393db30f03ed30b

added 'once' back

view details

Muzaffer Dede

commit sha 4cd7590991c28bb3df3c891864a5d5ce170ec576

added some clear comments

view details

push time in a month

pull request commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

@ryangjchandler I did check that at some point and It was about to 2kb less then before.

Simone mentioned that some part is not clear to him so I did add few comments to describe the code.

But I think code is already readable, so yeah, we could even go further on file size we need too.

muzafferdede

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha bb415dc81334f47ddd96fe8658b3e818efeb2f3f

fixed typo

view details

push time in a month

Pull request review commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

+import { showElement, hideElement, getXAttrs, isNumeric } from './utils'++export function transitionIn(el, component, resolve = () => showElement(el), forceSkip = false) {+    transition(el, component, resolve, forceSkip)+}++export function transitionOut(el, component, resolve = () => hideElement(el), forceSkip = false) {+    transition(el, component, resolve, forceSkip, false)+}++function transition(el, component, resolve, forceSkip, display = true) {+    // We don't want to transition on the initial page load.+    if (forceSkip) return resolve()++    const attrs = getXAttrs(el, component, 'transition')+    const showAttr = getXAttrs(el, component, 'show')[0]++    let transition = display ? 'enter' : 'leave'++    // Check if this is a transition with inline styles+    if (showAttr && showAttr.modifiers.includes('transition')) {+        let modifiers = showAttr.modifiers++        transition = {+            in: modifiers.includes('in'),+            out: modifiers.includes('out')+        }++        // When showing skip the transition in if only transition out defined+        if (display && (transition.out && ! transition.in)) return showElement(el)++        // When hiding skip the transiton out if only transition in defined+        if (! display && (transition.in && ! transition.out)) return hideElement(el)++        // Get related modifiers for this transition+        modifiers = (transition.in && transition.out)+            ? modifiers.filter((i, index) =>+                display+                    ? index < modifiers.indexOf('out')+                    : index > modifiers.indexOf('out'))+            : modifiers++        transitionWithInlineStyles(el, resolve, modifiers, transition, display)++        // Check if this is a transition with css classes+    } else if (attrs.filter(attr => attr.value.includes(transition)).length > 0) {++        transitionWithCssClasses(el, component, resolve, attrs, transition, display)++        // Check if neither, just resolve that damn thing+    } else {+        resolve(el)+    }+}++function transitionWithInlineStyles(el, resolve, modifiers, transition, display) {+    // If no modifiers are present: x-show.transition, we'll default to both opacity and scale.+    const noModifiers = ! modifiers.includes('opacity') && ! modifiers.includes('scale')+    const transitionOpacity = noModifiers || modifiers.includes('opacity')+    const transitionScale = noModifiers || modifiers.includes('scale')++    // If the user set these style values, we'll put them back when we're done with them.+    const opacityCache = el.style.opacity+    const transformCache = el.style.transform+    const transformOriginCache = el.style.transformOrigin++    // Default values inspired by: https://material.io/design/motion/speed.html#duration+    const styleValues = {+        duration: display || (transition.in && transition.out)+            ? modifierValue(modifiers, 'duration', 150)+            : modifierValue(modifiers, 'duration', 150) / 2,+        origin: modifierValue(modifiers, 'origin', 'center'),+        first: {+            opacity: display ? 0 : 1,+            scale: display ? modifierValue(modifiers, 'scale', 95) : 100,+        },+        second: {+            opacity: display ? 1 : 0,+            scale: display ? 100 : modifierValue(modifiers, 'scale', 95),+        },+    }++    // These are the explicit stages of a transition (same stages for in and for out).+    // This way you can get a birds eye view of the hooks, and the differences+    // between them.+    const stages = {+        start() {+            if (transitionOpacity) el.style.opacity = styleValues.first.opacity+            if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`+        },+        during() {+            if (transitionScale) el.style.transformOrigin = styleValues.origin+            el.style.transitionProperty = [(transitionOpacity ? `opacity` : ``), (transitionScale ? `transform` : ``)].join(' ').trim()+            el.style.transitionDuration = `${styleValues.duration / 1000}s`+            el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`+        },+        show() {+            // Resolve if showing+            if (display) resolve()+        },+        end() {+            if (transitionOpacity) el.style.opacity = styleValues.second.opacity+            if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`+        },+        hide() {+            // Resolve if hiding+            if (! display) resolve()+        },+        cleanup() {+            if (transitionOpacity) el.style.opacity = opacityCache+            if (transitionScale) el.style.transform = transformCache+            if (transitionScale) el.style.transformOrigin = transformOriginCache+            el.style.transitionProperty = null+            el.style.transitionDuration = null+            el.style.transitionTimingFunction = null+        },+    }+    // Render transition with inline styles+    renderStages(el, stages)+}++function transitionWithCssClasses(el, component, resolve, attrs, transition, display) {+    const originalClasses = el.__x_original_classes || []++    let ensureStringExpression = (expression) => {+        return typeof expression === 'function'+            ? component.evaluateReturnExpression(el, expression)+            : expression+    }++    // Prepare stage group names for given directions+    let cssClasses = {+        durring: transition,

oh it is a typo then.

muzafferdede

comment created time in a month

Pull request review commentalpinejs/alpine

Fixed x-show transition issues by refactoring transitions

+import { showElement, hideElement, getXAttrs, isNumeric } from './utils'++export function transitionIn(el, component, resolve = () => showElement(el), forceSkip = false) {+    transition(el, component, resolve, forceSkip)+}++export function transitionOut(el, component, resolve = () => hideElement(el), forceSkip = false) {+    transition(el, component, resolve, forceSkip, false)+}++function transition(el, component, resolve, forceSkip, display = true) {+    // We don't want to transition on the initial page load.+    if (forceSkip) return resolve()++    const attrs = getXAttrs(el, component, 'transition')+    const showAttr = getXAttrs(el, component, 'show')[0]++    let transition = display ? 'enter' : 'leave'++    // Check if this is a transition with inline styles+    if (showAttr && showAttr.modifiers.includes('transition')) {+        let modifiers = showAttr.modifiers++        transition = {+            in: modifiers.includes('in'),+            out: modifiers.includes('out')+        }++        // When showing skip the transition in if only transition out defined+        if (display && (transition.out && ! transition.in)) return showElement(el)++        // When hiding skip the transiton out if only transition in defined+        if (! display && (transition.in && ! transition.out)) return hideElement(el)++        // Get related modifiers for this transition+        modifiers = (transition.in && transition.out)+            ? modifiers.filter((i, index) =>+                display+                    ? index < modifiers.indexOf('out')+                    : index > modifiers.indexOf('out'))+            : modifiers++        transitionWithInlineStyles(el, resolve, modifiers, transition, display)++        // Check if this is a transition with css classes+    } else if (attrs.filter(attr => attr.value.includes(transition)).length > 0) {++        transitionWithCssClasses(el, component, resolve, attrs, transition, display)++        // Check if neither, just resolve that damn thing+    } else {+        resolve(el)+    }+}++function transitionWithInlineStyles(el, resolve, modifiers, transition, display) {+    // If no modifiers are present: x-show.transition, we'll default to both opacity and scale.+    const noModifiers = ! modifiers.includes('opacity') && ! modifiers.includes('scale')+    const transitionOpacity = noModifiers || modifiers.includes('opacity')+    const transitionScale = noModifiers || modifiers.includes('scale')++    // If the user set these style values, we'll put them back when we're done with them.+    const opacityCache = el.style.opacity+    const transformCache = el.style.transform+    const transformOriginCache = el.style.transformOrigin++    // Default values inspired by: https://material.io/design/motion/speed.html#duration+    const styleValues = {+        duration: display || (transition.in && transition.out)+            ? modifierValue(modifiers, 'duration', 150)+            : modifierValue(modifiers, 'duration', 150) / 2,+        origin: modifierValue(modifiers, 'origin', 'center'),+        first: {+            opacity: display ? 0 : 1,+            scale: display ? modifierValue(modifiers, 'scale', 95) : 100,+        },+        second: {+            opacity: display ? 1 : 0,+            scale: display ? 100 : modifierValue(modifiers, 'scale', 95),+        },+    }++    // These are the explicit stages of a transition (same stages for in and for out).+    // This way you can get a birds eye view of the hooks, and the differences+    // between them.+    const stages = {+        start() {+            if (transitionOpacity) el.style.opacity = styleValues.first.opacity+            if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`+        },+        during() {+            if (transitionScale) el.style.transformOrigin = styleValues.origin+            el.style.transitionProperty = [(transitionOpacity ? `opacity` : ``), (transitionScale ? `transform` : ``)].join(' ').trim()+            el.style.transitionDuration = `${styleValues.duration / 1000}s`+            el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`+        },+        show() {+            // Resolve if showing+            if (display) resolve()+        },+        end() {+            if (transitionOpacity) el.style.opacity = styleValues.second.opacity+            if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`+        },+        hide() {+            // Resolve if hiding+            if (! display) resolve()+        },+        cleanup() {+            if (transitionOpacity) el.style.opacity = opacityCache+            if (transitionScale) el.style.transform = transformCache+            if (transitionScale) el.style.transformOrigin = transformOriginCache+            el.style.transitionProperty = null+            el.style.transitionDuration = null+            el.style.transitionTimingFunction = null+        },+    }+    // Render transition with inline styles+    renderStages(el, stages)+}++function transitionWithCssClasses(el, component, resolve, attrs, transition, display) {+    const originalClasses = el.__x_original_classes || []++    let ensureStringExpression = (expression) => {+        return typeof expression === 'function'+            ? component.evaluateReturnExpression(el, expression)+            : expression+    }++    // Prepare stage group names for given directions+    let cssClasses = {+        durring: transition,

Which? one,cssClasses?

No, down on the road it will serve as css class container. The description was for the pre assigned stuff. Basically css classes assigned by their stage group names. So at this point we were preparing the container.

muzafferdede

comment created time in a month

issue closednemrutco/nova-global-filter

Clearing filters

Firstly - well done on a really well designed and useful package.
One question from my side - is there a way to "clear" the filters?
It would be great to have clear option on each dropdown or maybe even on the containing card?

closed time in a month

otrsw

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 54721a8c345a8f79215c70ee585d7802c4d0d4b7

removed leftover 'once' import

view details

push time in a month

PR opened alpinejs/alpine

Fix x show transition overlap

Fixes #533 (tested) | #170 (tested, need more test) | #156 (partly tested, need more test) | you tell me

I have to refactored transition to achieve this solution. So there is a #542 Refactored Transition PR of this PR which has same solution + refactored transitions to let transitions has its own space so it will be easier to work on it. (it was really hard to work on existing transition code). I have explained much more on #542 since they serve almost same purpose.

This fix is quite self explanatory. I assigned few variables to check transitions and make sure and control how they are rendered.

By this, quick clicks overlapping transitions and wrong state of display issues will be fixed. There is also a test called remaining transitions forced to complete if they exists which tests this bug.

Let me know if there is any room to improve. Huge thanks @SimoTod and @HugoDF for their comments. .5 x more thanks to @SimoTod for bearing with me :).

+240 -52

0 comment

5 changed files

pr created time in a month

PR opened alpinejs/alpine

Refactor transitions

Fixes #533 (tested) | #170 (tested, need more test) | #156 (partly tested, need more test) | you tell me

There is a related fix simpler PR as well which is applied on current structure. I will update the mention once i created the PR.

As you know this is a long coming issue. I spend few days on it and finally get it working with helpful comments of yours. I have to refactor transition to achieve this solution at first because it was hard to figure out transition within the utilities. So it was best to move it to its own space.

By refactoring i actually still keep almost entire code as same as before because of the warnings i got from you and knowing @calebporzio is not fan of changes without benefits. But I figured out that what i achieved is costed much more on Vue, React for example. They have to track entire transition and execute at each stage a function call to prevent overlapping.

Here is what Vue needs to define for transition to work:

const {
    css,
    appear,
    enterClass,
    enterActiveClass,
    appearClass,
    appearActiveClass,
    beforeEnter,
    onEnter,
    enter,
    afterEnter,
    enterCancelled,
    beforeAppear,
    onAppear,
    appear,
    afterAppear,
    appearCancelled
  } = resolveTransition(data, vnode.context)

...
const el: any = vnode.elm
  const vm = vnode.context
  // call enter callback now
  if (el._enterCb) {
    el._enterCb.cancelled = true
    el._enterCb()
  }
  const data = vnode.data.transition
  if (!data) {
    return rm()
  }


There is much more i just don't want to make this longer. React did similar approach as well.

Here is what i defined to make this work:

el.__x_transition_remaining,
el.__x_transition_last_value,
el.__x_transition_timer

By paying only few assignments, we gain transition power.

I call this a win specially fixing all those old issues. Hope you call it too and this PR get merged.

Let me know if there is any room to improve. Huge thanks @SimoTod and @HugoDF for their comments. .5 x more thanks to @SimoTod for bearing with me and making good arguments on the issue :).

Thanks

+994 -938

0 comment

8 changed files

pr created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 06fe66daf97e5cc6b2aa87de62f136df6b038a8e

build

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 51ab9f2bb542fc96b73cefd5e77bc08debaf0826

build

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha aeac164ce6577fe72861e9b1b26df11ee8316c12

build

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 944519eb7db601eedb13af071d1283214dc124ab

ready to PR

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 684e81ef5f8321253730a6cf7c0ca729ccc552b8

final final final :)

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha ff12ae0d9975b0719f19dae16a460bb6092ad239

final final final :)

view details

push time in a month

pull request commentalpinejs/alpine

x-show transition overlap fix

Finally huh? :)

muzafferdede

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha ed1108784ba59075349820296508ab177a5a01f5

fixed repainting terminating the current transition

view details

push time in a month

pull request commentalpinejs/alpine

x-show transition overlap fix

@SimoTod Good call, i guess this will do what you expect now.

https://codepen.io/muzafferdede/pen/ZEQzqZL

muzafferdede

comment created time in a month

PR closed alpinejs/alpine

x-show transition overlap fix

Fixes #533

Not sure if this is a solid fix. It is working ~perfectly~ in my use case. I would like to test it other than manually via tests but also not sure how/what to test. I would like to know your thoughts.

I did a check right before alpine decides starting the transition. If there is an already transition going on the element, do not add new transition and just resolve, if there is no any transition, add show/hide transition depending on the value.

P.S I don't know why but when i pull from master and build without any change, i saw some changes which is out of nowhere. So i am confused if the master is the build version. Since it has some changes not in compiled to alpine.js, so i just included the files i changed without building it. I also notice @calebporzio merges source files only so probably all good.

Instead of making a new PR for this issue I just force pushed the changes to this existing PR.

I have to refactored transition to achieve this solution. So there is a Refactored Transition PR of this issue which has same solution + refactored transitions to let transitions has its own space so it will be easier to work on it. (it was really hard to work on existing transition code)

This fix is quite self explanatory. I assigned current transitions to el as el.__x_remaining_transitions and make sure they are completed before next one starts.

By this, quick clicks overlapping transitions and wrong state of display issues will be fixed. There is also a test called remaining transitions forced to complete if they exists which tests this bug.

Let me know if there is any room to improve. Huge thanks @SimoTod and @HugoDF for their comments. .5 x more thanks to @SimoTod for bearing with me :).

+197 -37

15 comments

5 changed files

muzafferdede

pr closed time in a month

pull request commentalpinejs/alpine

x-show transition overlap fix

Closing this issue due to prevent confusing with related previous issues.

muzafferdede

comment created time in a month

pull request commentalpinejs/alpine

x-show transition overlap fix

Alright i will close this one.

and for your sample code, there you go https://codepen.io/muzafferdede/pen/ZEQzqZL

muzafferdede

comment created time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 467c0c2f5fa2a00f9d02166f048a02ba3d88a1a6

removed sample code from index.html

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha f948f9f4f3700459e57f42b2ee7fc2b1da2114b4

fixed typo

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 44e9ddaf7344c87828b740bbe1a8acc3e5cc3b85

fixed typo

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha d1b87404dba605dd45b2d441a36de2bf78e3074b

Fixed transition overlaping

view details

push time in a month

push eventmuzafferdede/alpine

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 93b6f0d08ece54c052a63c9dc12ea0514916a101

build files

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha cddf9a99bd8592c77f15c6070421c524a1b74f3b

sending to PR

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha a617377dddd6019704f8403fee1b32d32ce523ca

ready to PR

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 2dd1e9d32a3543ab3b2b4505bbbe6eb25c4a1555

cleaned up

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha b589e218a65d67d55e8ce16efcb3eaed9a9a2ab8

final touches

view details

push time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 7270b3fb3ff1c4ca4060b265da65ce766df62653

typo correction

view details

Muzaffer Dede

commit sha d0d3c144b3fee869b5ad83853a0b0dbbdd05bbe3

Merge pull request #13 from nemrutco/adding-new-abilities typo correction

view details

push time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 7270b3fb3ff1c4ca4060b265da65ce766df62653

typo correction

view details

push time in a month

delete branch nemrutco/nova-global-filter

delete branch : revert-10-adding-new-abilities

delete time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 4a1a777b72003eb976c6c0a0b72ab715d0b4a436

typo correction

view details

Muzaffer Dede

commit sha e402520902402a9c4ab3135b5fe7a0af20ce45d0

Merge pull request #12 from nemrutco/adding-new-abilities typo correction

view details

push time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 90cd341de08f0af073dc8c90686975b529e39ab4

Revert "typo correction"

view details

Muzaffer Dede

commit sha c489e70373fe4229d8becf9f9b4d1bfae78e0c69

Merge pull request #11 from nemrutco/revert-10-adding-new-abilities Revert "typo correction"

view details

push time in a month

create barnchnemrutco/nova-global-filter

branch : revert-10-adding-new-abilities

created branch time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 4a1a777b72003eb976c6c0a0b72ab715d0b4a436

typo correction

view details

push time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 763df0060ac1f951e61661761dcd5f80c979e6e1

typo correction

view details

Muzaffer Dede

commit sha 5c3969483b6758d668be9a74a55d1308e7d3d6ed

Merge pull request #10 from nemrutco/adding-new-abilities typo correction

view details

push time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha 763df0060ac1f951e61661761dcd5f80c979e6e1

typo correction

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 0d0a8097132a271d3316a32bd97eed00cfd15e29

tunned

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha f48bf2fe79e783b439e246eea45164bcd75b5482

type correction

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 7b8f38a39c9805daf2fce519b4bc391c74fe1cb8

removed __x_showing idea

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 7b8f38a39c9805daf2fce519b4bc391c74fe1cb8

removed __x_showing idea

view details

push time in a month

push eventmuzafferdede/alpine

Julio Camargo

commit sha 90cf5bcf852d8ed947c2a87885e6bb9521816bda

improve array unique values snippet

view details

Julio Camargo

commit sha c9790213124716939129bd9cdb1d3cad03f59cb6

add default export

view details

Hugo

commit sha 68be94dc9ac9e0b6ebeee10bc2cf5129a241b369

Documentation: explicitly set on window with bundlers. Closes #152 Issue resolution mentioned it might be a good thing to document and I tend to agree.

view details

Hugo

commit sha f95826363b12be858033a3f26d2f092c8608405a

Update 2

view details

Paul Cohen

commit sha b0574bdaf7ff88bf4acc3940b195e78f4271474a

allow value binding on radio elements

view details

lucperkins

commit sha c44e3871fb6bac797df979a0930aa90f890ebbbf

Add version button to README Signed-off-by: lucperkins <lucperkins@gmail.com>

view details

Julio Camargo

commit sha ab8ce04a1572db1d8a1ddfd6ff5ee006c0a929be

adjusting utils export

view details

Julio Camargo

commit sha 71e3ed7756e880df59e1e0ce5d82171ccb6745d3

adjusting utils test

view details

Simone Todaro

commit sha 8fe6c8df0b76a9a53cfe01e3c38ce1a17a92c88f

Fix issue with nextTick running before the refresh is complete when using transitions or x-for directives

view details

Simone Todaro

commit sha a016e59a90a5a8cadcbe4d9f61bc020ce5480a06

Refactor out executeAndClearNextTickStack

view details

Simone Todaro

commit sha d3968b77b8663bbfb8dc94b627cd3b42315c4c28

Add failing tests

view details

Simone Todaro

commit sha 69b114bb24f8bc8b761a3fdd408b86aece5f2d05

Debounce nextTick to make sure it runs only once and when refresh finishes

view details

Simone Todaro

commit sha 75b72dcf24ca35e13c53f0bd4d8ae3b7a11d8da8

Update next-tick.spec.js

view details

Farhan Hadi

commit sha 6a6d2054cc79c915ef5ad55234b74b53ba3f198d

Fix typo in readme

view details

Bruno Meilick

commit sha a3c7c9b6643e8c27f9bd5c10e4f2884c7951d339

explained that transition example uses tailwindcss classes TODO: The japanese README should be updated as well. Signed-off-by: Bruno Meilick <b@bnomei.com>

view details

Andrew Welch

commit sha b663bba4fd36ff0597753c5842315b5f042c49f3

Add module/nomodule pattern to the README At Caleb's request... a PR to add the module/nomodule pattern to the docs: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ https://caniuse.com/#feat=es6-module

view details

Muzaffer Dede

commit sha 2315e920817004ffc16d50d06ee899f5d3141299

Fixes #366 cursor position jumping to the end Thanks to @SimoTod for his suggestion to apply the fix in the right file. Fixes #366

view details

Muzaffer Dede

commit sha 86afa6e540156da35b9c9ef5af7f5ddf5fef0d02

Fixed failing test Fixed Test by checking if active element is current element

view details

Muzaffer Dede

commit sha 96444c88407d5d807cbe8c0c66a7ca22574787c4

Using setSelectionRange instead individual setters

view details

Muzaffer Dede

commit sha 9a1cc2684835acf2ec21f4fda857c4c5a89f7c91

fixed if statement

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 23576310752fc2b6377c4e692fda620583ed0152

revert back some code style to Calab's way

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 2d03d9978654f19deab4b01ba356b1757e09e56d

cleaned up as @SimoTod suggested

view details

push time in a month

push eventmuzafferdede/alpine

Muzaffer Dede

commit sha 34bfe18502462ceff26b9fc6cd0b5b072b8e0435

cleaned up as @Simone suggested

view details

push time in a month

issue commentnemrutco/nova-global-filter

Get initial global-filters into a custom component

@gassius got it, and good news that i released v1.0.4 includes this ability now. You can close the issue once you think all good. Thanks for the idea. Cheers

gassius

comment created time in a month

created tagnemrutco/nova-global-filter

tagv1.0.4

This package allows you to apply any of your existing Laravel Nova filters to your cards in Dashboards or Index and Detail view of your nova resources.

created time in a month

release nemrutco/nova-global-filter

v1.0.4

released time in a month

push eventnemrutco/nova-global-filter

Muzaffer Dede

commit sha a197ce7f6b4565a7cbe78eca4e04d8de9f37abe4

add ability to request and response filters from Global Filter

view details

Muzaffer Dede

commit sha 2f9d329957b22810059b731527405d3e030b00b4

Merge pull request #9 from nemrutco/adding-new-abilities add ability to request and response filters from Global Filter

view details

push time in a month

more