chore(transition): refactor more explicit name for transiiton constants

dvcol · Feb 8, 2025 · 01253ba · 01253ba
1 parent 8a3abb3
commit 01253ba
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 101 deletions.
diff --git a/demo/components/DemoLists.svelte b/demo/components/DemoLists.svelte
@@ -13,7 +13,7 @@
   import NeoListSearch from '~/list/NeoListSearch.svelte';
   import NeoSkeletonText from '~/skeletons/NeoSkeletonText.svelte';
   import { Colors } from '~/utils/colors.utils';
-  import { enterTransitionProps } from '~/utils/transition.utils';
+  import { quickDurationProps } from '~/utils/transition.utils';
 
   const options = $state<NeoListProps>({
     loading: false,
@@ -291,7 +291,7 @@
     <span class="label">Custom Empty</span>
     <NeoList aria-label="Custom empty list" {items} {...options}>
       {#snippet empty()}
-        <li class="custom-list-loader" in:fade={enterTransitionProps}>
+        <li class="custom-list-loader" in:fade={quickDurationProps}>
           <span> Custom empty snippet</span>
         </li>
       {/snippet}

diff --git a/demo/components/DemoText.svelte b/demo/components/DemoText.svelte
@@ -18,6 +18,7 @@
     elevation: 0,
     hover: 0,
 
+    size: 'large',
     color: '',
     close: false,
     loading: false,
@@ -138,23 +139,33 @@
     groupProps={{ style: 'margin-left: 4rem' }}
   />
 
+  <NeoSelect
+    label="Size"
+    placeholder="Select size"
+    position="left"
+    floating={false}
+    size="10"
+    bind:value={options.size}
+    containerProps={{ style: 'margin-left: 4rem' }}
+    options={['large', 'medium', 'small']}
+  />
+
   <NeoSelect
     label="Color"
     placeholder="Select color"
     position="left"
     floating={false}
     size="10"
     bind:value={options.color}
-    containerProps={{ style: 'margin-left: 6rem' }}
+    containerProps={{ style: 'margin-left: 4rem' }}
     options={[Colors.Primary, Colors.Secondary, Colors.Success, Colors.Warning, Colors.Error]}
   />
 </div>
 
 <div class="row">
   <span class="label">Pills</span>
-  <NeoPill {...options}>Default</NeoPill>
-  <NeoPill pressed {...options}>Pressed</NeoPill>
-  <NeoPill convex {...options}>Convex</NeoPill>
+  <NeoPill {...options}>default</NeoPill>
+  <NeoPill pressed {...options}>pressed</NeoPill>
 
   <NeoPill {...options}>
     <IconAccount style="margin-inline: -0.1875rem 0.325rem" />

diff --git a/demo/components/DemoTooltips.svelte b/demo/components/DemoTooltips.svelte
@@ -12,6 +12,7 @@
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
   import NeoTransitionContainer from '~/containers/NeoTransitionContainer.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
+  import IconQuestionMark from '~/icons/IconQuestionMark.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
   import NeoInput from '~/inputs/common/NeoInput.svelte';
@@ -20,7 +21,7 @@
   import NeoTooltip from '~/tooltips/NeoTooltip.svelte';
 
   import { DefaultShadowShallowElevation, MaxShadowElevation } from '~/utils/shadow.utils.js';
-  import { defaultEnterDuration, defaultFlyDuration } from '~/utils/transition.utils';
+  import { defaultDuration, quickDuration } from '~/utils/transition.utils';
 
   const options = $state<NeoTooltipProps>({
     rounded: true,
@@ -194,6 +195,10 @@
     </NeoPopSelect>
   </div>
 
+  {#snippet question()}
+    <IconQuestionMark size="1.5rem" />
+  {/snippet}
+
   <div class="column content">
     <span class="label">PopSelect</span>
     <NeoPopSelect
@@ -209,10 +214,10 @@
         <NeoTransitionContainer overflow="hidden" style="min-width: 252px; margin: 0.5rem">
           {#key complexSelected?.item?.id}
             <div
-              in:fly={{ duration: defaultFlyDuration, y: complexSelected?.item ? '-50%' : '50%' }}
-              out:fly={{ duration: defaultEnterDuration, y: complexSelected?.item ? '50%' : '-50%' }}
+              in:fly={{ duration: defaultDuration, y: complexSelected?.item ? '-50%' : '50%' }}
+              out:fly={{ duration: quickDuration, y: complexSelected?.item ? '50%' : '-50%' }}
             >
-              <NeoListBaseItem before={avatar} item={complexSelected?.item ?? { label: 'None Selected', description: 'Please select a profile' }} />
+              <NeoListBaseItem before={question} item={complexSelected?.item ?? { label: 'None Selected', description: 'Please select a profile' }} />
             </div>
           {/key}
         </NeoTransitionContainer>

diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte
@@ -6,7 +6,7 @@
   import IconCircleLoading from '~/icons/IconCircleLoading.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js';
   import { getColorVariable } from '~/utils/colors.utils.js';
-  import { enterTransitionProps } from '~/utils/transition.utils.js';
+  import { quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -161,7 +161,7 @@
 >
   <div class="neo-content" class:neo-reverse={reverse}>
     {#if loading || icon}
-      <span class="neo-icon" class:neo-only={empty} transition:width={enterTransitionProps}>
+      <span class="neo-icon" class:neo-only={empty} transition:width={quickDurationProps}>
         {#if loading}
           <IconCircleLoading />
         {:else}

diff --git a/src/lib/icons/IconQuestionMark.svelte b/src/lib/icons/IconQuestionMark.svelte
@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={$$props.size ?? '1em'}
+  height={$$props.size ?? '1em'}
+  viewBox="0 0 24 24"
+  {...$$props}
+  style:scale={$$props.scale}
+  scale={undefined}
+>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 2}>
+    <path stroke-dasharray="28" stroke-dashoffset="28" d="M7 8c0 -2.76 2.24 -5 5 -5c2.76 0 5 2.24 5 5c0 1.64 -0.79 3.09 -2 4c-0.84 0.63 -3 2 -3 5">
+      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="28;0" />
+    </path>
+    <path stroke-dasharray="2" stroke-dashoffset="2" d="M12 21v0.01">
+      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="2;0" />
+    </path>
+  </g>
+</svg>
diff --git a/src/lib/inputs/NeoCheckbox.svelte b/src/lib/inputs/NeoCheckbox.svelte
@@ -13,7 +13,7 @@
   import NeoInputValidation from '~/inputs/common/NeoInputValidation.svelte';
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
   import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js';
-  import { enterTransitionProps } from '~/utils/transition.utils.js';
+  import { quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -185,7 +185,7 @@
     {#if loading !== undefined}
       <span class="neo-checkbox-suffix">
         {#if loading}
-          <span class="neo-checkbox-loading" out:fade={enterTransitionProps}>
+          <span class="neo-checkbox-loading" out:fade={quickDurationProps}>
             <IconCircleLoading size="1rem" />
           </span>
         {/if}

diff --git a/src/lib/inputs/NeoFilePickerCard.svelte b/src/lib/inputs/NeoFilePickerCard.svelte
@@ -13,7 +13,7 @@
   import IconPencil from '~/icons/IconPencil.svelte';
   import NeoAffix from '~/inputs/common/NeoAffix.svelte';
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
-  import { enterTransitionProps, flipTransitionProps, leaveDefaultFadeTransition } from '~/utils/transition.utils.js';
+  import { quickCircOutProps, quickDelayProps, quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -97,7 +97,7 @@
   {rounded}
   {disabled}
   {skeleton}
-  out={leaveDefaultFadeTransition}
+  out={{ use: fade, props: quickDelayProps }}
   flex="1 1 auto"
   {...rest}
   class={['neo-file-picker-card', rest?.class]}
@@ -114,7 +114,7 @@
     <div class="neo-expanded-list" class:neo-rounded={rounded} style:--neo-file-picker-card-max-height={maxHeight}>
       <div class="neo-expanded-scroll" class:neo-scroll={scrollbar}>
         {#each files as file, i (file)}
-          <div class="neo-file" transition:fade={enterTransitionProps} animate:flip={flipTransitionProps}>
+          <div class="neo-file" transition:fade={quickDurationProps} animate:flip={quickCircOutProps}>
             <span class="neo-file-name" title={file.name}>{file.name}</span>
             {#if clearable}
               <span class="neo-file-remove">
@@ -158,7 +158,7 @@
       class:neo-disabled={disabled}
       class:neo-label={label}
       onclick={onEdit}
-      in:fade={enterTransitionProps}
+      in:fade={quickDurationProps}
     >
       <div class="neo-expanded-button">
         <NeoButton aria-label="Add files" title="Add files" text rounded {skeleton} {disabled} onclick={onEdit} {...addButtonProps}>

diff --git a/src/lib/inputs/NeoRadio.svelte b/src/lib/inputs/NeoRadio.svelte
@@ -10,7 +10,7 @@
   import NeoBaseInput from '~/inputs/common/NeoBaseInput.svelte';
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
   import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js';
-  import { enterTransitionProps } from '~/utils/transition.utils.js';
+  import { quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -111,7 +111,7 @@
   {#if loading !== undefined}
     <span class="neo-radio-suffix">
       {#if loading}
-        <span class="neo-radio-loading" out:fade={enterTransitionProps}>
+        <span class="neo-radio-loading" out:fade={quickDurationProps}>
           <IconCircleLoading size="1rem" />
         </span>
       {/if}

diff --git a/src/lib/inputs/NeoRange.svelte b/src/lib/inputs/NeoRange.svelte
@@ -14,7 +14,7 @@
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js';
   import { coerce, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '~/utils/shadow.utils.js';
-  import { enterTransitionProps } from '~/utils/transition.utils.js';
+  import { quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -377,7 +377,7 @@
         class:neo-range-value={true}
         class:neo-rounded={rounded}
         style:--neo-range-handler-z-index={lastIndex ? 0 : 1}
-        transition:fade={enterTransitionProps}
+        transition:fade={quickDurationProps}
         {...floatingProps}
         bind:this={lowerTooltip.elements.floating}
         style={toStyle(lowerTooltip.floatingStyles, floatingProps?.style)}
@@ -393,7 +393,7 @@
       <span
         class:neo-range-value={true}
         class:neo-rounded={rounded}
-        transition:fade={enterTransitionProps}
+        transition:fade={quickDurationProps}
         {...floatingProps}
         bind:this={upperTooltip.elements.floating}
         style={toStyle(upperTooltip.floatingStyles, floatingProps?.style)}
@@ -459,7 +459,7 @@
               {@render after(context)}
             {/if}
             {#if loading}
-              <span class="neo-range-loading" out:fade={enterTransitionProps}>
+              <span class="neo-range-loading" out:fade={quickDurationProps}>
                 <IconCircleLoading size="1rem" />
               </span>
             {/if}

diff --git a/src/lib/inputs/NeoSwitch.svelte b/src/lib/inputs/NeoSwitch.svelte
@@ -14,7 +14,7 @@
   import NeoInputValidation from '~/inputs/common/NeoInputValidation.svelte';
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
   import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js';
-  import { enterTransitionProps } from '~/utils/transition.utils.js';
+  import { quickDurationProps } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -190,7 +190,7 @@
     {#if loading !== undefined}
       <span class="neo-switch-suffix">
         {#if loading}
-          <span class="neo-switch-loading" out:fade={enterTransitionProps}>
+          <span class="neo-switch-loading" out:fade={quickDurationProps}>
             <IconCircleLoading size="1rem" />
           </span>
         {/if}

diff --git a/src/lib/inputs/common/NeoValidation.svelte b/src/lib/inputs/common/NeoValidation.svelte
@@ -5,7 +5,7 @@
   import type { NeoValidationContext, NeoValidationProps } from '~/inputs/common/neo-validation.model.js';
 
   import { toTransition, toTransitionProps } from '~/utils/action.utils.js';
-  import { defaultFlyDuration } from '~/utils/transition.utils.js';
+  import { defaultDuration } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -52,8 +52,8 @@
         this={messageTag}
         id={messageId}
         class:neo-validation-error={true}
-        in:fly={{ duration: defaultFlyDuration, delay: message ? defaultFlyDuration / 2 : 0, y: '-50%' }}
-        out:fly={{ duration: defaultFlyDuration, y: message ? '50%' : '-50%' }}
+        in:fly={{ duration: defaultDuration, delay: message ? defaultDuration / 2 : 0, y: '-50%' }}
+        out:fly={{ duration: defaultDuration, y: message ? '50%' : '-50%' }}
         {...messageProps}
       >
         {#if typeof error === 'string'}
@@ -67,8 +67,8 @@
         this={messageTag}
         id={messageId}
         class:neo-validation-description={true}
-        in:fly={{ duration: defaultFlyDuration, delay: defaultFlyDuration / 2, y: '-50%' }}
-        out:fly={{ duration: defaultFlyDuration, y: '50%' }}
+        in:fly={{ duration: defaultDuration, delay: defaultDuration / 2, y: '-50%' }}
+        out:fly={{ duration: defaultDuration, y: '50%' }}
         {...messageProps}
       >
         {#if typeof message === 'string'}

diff --git a/src/lib/list/NeoList.svelte b/src/lib/list/NeoList.svelte
@@ -25,7 +25,7 @@
   import { toAnimation, toTransition, toTransitionProps } from '~/utils/action.utils.js';
   import { getColorVariable } from '~/utils/colors.utils.js';
   import { toSize } from '~/utils/style.utils.js';
-  import { defaultTransitionDuration, enterTransitionProps, flipTransitionProps, scaleTransitionProps } from '~/utils/transition.utils.js';
+  import { quickCircOutProps, quickDurationProps, quickScaleProps, shortDuration } from '~/utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -66,9 +66,9 @@
     height: _height,
 
     // Animation
-    in: inAction = { use: scale, props: scaleTransitionProps },
-    out: outAction = { use: fade, props: { ...scaleTransitionProps, delay: scaleTransitionProps?.duration } },
-    animate = { use: flipToggle, props: flipTransitionProps },
+    in: inAction = { use: scale, props: quickScaleProps },
+    out: outAction = { use: fade, props: { ...quickScaleProps, delay: quickScaleProps?.duration } },
+    animate = { use: flipToggle, props: quickCircOutProps },
 
     // Events
     onselect,
@@ -92,13 +92,13 @@
     if (!ref) return false;
     ref.scrollTo({ top: 0, behavior: 'smooth', ...options });
     return ref;
-  }, defaultTransitionDuration / 2);
+  }, shortDuration / 2);
 
   const scrollBottom: NeoListMethods['scrollBottom'] = debounce((options?: ScrollToOptions) => {
     if (!ref?.scrollHeight) return false;
     ref.scrollTo({ top: ref.scrollHeight, behavior: 'smooth', ...options });
     return ref;
-  }, defaultTransitionDuration / 2);
+  }, shortDuration / 2);
 
   $effect(() => {
     if (!loading || !scrollToLoader) return;
@@ -380,7 +380,7 @@
       class:neo-scroll={scrollbar}
       class:neo-shadow={shadow}
       class:neo-dim={dim}
-      in:scaleFreeze={scaleTransitionProps}
+      in:scaleFreeze={quickScaleProps}
       {...rest}
     >
       {@render children?.(context)}
@@ -394,7 +394,7 @@
       role={select ? 'listbox' : 'list'}
       bind:this={ref}
       class:neo-list-empty={true}
-      in:fade={enterTransitionProps}
+      in:fade={quickDurationProps}
       {...rest}
     >
       {#if customEmpty}

diff --git a/src/lib/list/NeoListBaseLoader.svelte b/src/lib/list/NeoListBaseLoader.svelte
@@ -9,7 +9,7 @@
   import NeoSkeletonText from '~/skeletons/NeoSkeletonText.svelte';
   import { toTransition, toTransitionProps } from '~/utils/action.utils.js';
 
-  import { scaleEnterProps, scaleLeaveProps } from '~/utils/transition.utils.js';
+  import { quickScaleDelayProps, quickScaleProps } from '~/utils/transition.utils.js';
 
   const {
     loading = true,
@@ -23,8 +23,8 @@
     items = 3,
     flex = items > 1 ? undefined : '0 0 70%',
 
-    in: inAction = { use: fade, props: scaleEnterProps },
-    out: outAction = { use: fade, props: scaleLeaveProps },
+    in: inAction = { use: fade, props: quickScaleProps },
+    out: outAction = { use: fade, props: quickScaleDelayProps },
 
     beforeProps,
     afterProps,