feat(text): adds demo for texts and improve scroll-shadow

dvcol · Feb 7, 2025 · f52500d · f52500d
1 parent 35f6a13
commit f52500d
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 10 deletions.
diff --git a/demo/components/DemoText.svelte b/demo/components/DemoText.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
+  import NeoInput from '~/inputs/common/NeoInput.svelte';
+  import NeoEllipsis from '~/text/NeoEllipsis.svelte';
+  import NeoMark from '~/text/NeoMark.svelte';
+  import NeoScrollShadow from '~/text/NeoScrollShadow.svelte';
+
+  let lines = $state(1);
+  let filter = $state('');
+</script>
+
+<div class="row">
+  <div class="column content">
+    <span class="label">Ellipsis</span>
+    <NeoNumberStep bind:value={lines} min={1} max={99} rounded />
+    <NeoEllipsis {lines}>
+      Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin tincidunt
+      mauris eros ex pharetra imperdiet. Nibh facilisi ante vestibulum feugiat facilisi quam risus ex? Malesuada condimentum nulla odio facilisi
+      semper sodales. Dapibus est duis odio tincidunt elementum. Sodales scelerisque venenatis hac ridiculus scelerisque massa vitae. Hendrerit
+      blandit sed, ac cursus ante varius quam. Malesuada habitant curae diam pulvinar proin congue tristique dictum.
+    </NeoEllipsis>
+  </div>
+</div>
+
+<div class="row">
+  <div class="column content">
+    <span class="label">Mark</span>
+    <NeoInput bind:value={filter} placeholder="Highlight text" rounded size="30" clearable />
+    <NeoMark
+      {filter}
+      value="Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin tincidunt
+      mauris eros ex pharetra imperdiet. Nibh facilisi ante vestibulum feugiat facilisi quam risus ex? Malesuada condimentum nulla odio facilisi
+      semper sodales. Dapibus est duis odio tincidunt elementum. Sodales scelerisque venenatis hac ridiculus scelerisque massa vitae. Hendrerit
+      blandit sed, ac cursus ante varius quam. Malesuada habitant curae diam pulvinar proin congue tristique dictum."
+    />
+  </div>
+</div>
+
+<div class="row">
+  <div class="column content">
+    <span class="label">Scroll Shadow vertical</span>
+    <NeoScrollShadow height="10rem">
+      <div class="column">
+        <p>
+          Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin
+          tincidunt mauris eros ex pharetra imperdiet. Nibh facilisi ante vestibulum feugiat facilisi quam risus ex? Malesuada condimentum nulla odio
+          facilisi semper sodales. Dapibus est duis odio tincidunt elementum. Sodales scelerisque venenatis hac ridiculus scelerisque massa vitae.
+          Hendrerit blandit sed, ac cursus ante varius quam. Malesuada habitant curae diam pulvinar proin congue tristique dictum.
+        </p>
+
+        <p>
+          Dignissim quisque non fermentum ipsum; sapien dignissim lobortis. Quam montes lacus ipsum ac dolor class. Erat accumsan morbi fermentum
+          consectetur sollicitudin elit a. Primis tincidunt aenean malesuada eleifend nunc morbi consequat. Aenean malesuada sapien habitant feugiat
+          sapien consectetur torquent risus nascetur. Dui elit gravida sollicitudin nascetur suscipit facilisi est sodales? Vulputate rhoncus rhoncus
+          suspendisse amet nostra quisque eleifend tellus interdum? Volutpat nunc imperdiet sagittis, efficitur nibh eget maecenas. Finibus justo
+          nascetur parturient nascetur ac condimentum erat ultrices. Sociosqu nascetur quisque; elit iaculis libero quis.
+        </p>
+      </div>
+    </NeoScrollShadow>
+  </div>
+
+  <div class="column content">
+    <span class="label">Scroll Shadow horizontal</span>
+    <NeoScrollShadow width="20rem" direction="right">
+      <p style="width: 40rem;">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin tincidunt
+        mauris eros ex pharetra imperdiet. Nibh facilisi ante vestibulum feugiat facilisi quam risus ex? Malesuada condimentum nulla odio facilisi
+        semper sodales. Dapibus est duis odio tincidunt elementum. Sodales scelerisque venenatis hac ridiculus scelerisque massa vitae. Hendrerit
+        blandit sed, ac cursus ante varius quam. Malesuada habitant curae diam pulvinar proin congue tristique dictum.
+      </p>
+    </NeoScrollShadow>
+  </div>
+</div>
+
+<style lang="scss">
+  @use 'src/lib/styles/common/flex' as flex;
+
+  .label {
+    max-width: 80vw;
+    white-space: pre-line;
+    word-break: break-all;
+  }
+
+  .column {
+    @include flex.column($center: true, $gap: var(--neo-gap-lg), $flex: 0 1 auto);
+
+    &.content {
+      flex: 1 0 20%;
+      max-width: 25%;
+    }
+  }
+
+  .row {
+    @include flex.row($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
+
+    margin: 8rem 0;
+  }
+
+  @media (width < 1200px) {
+    .column.content {
+      flex: 0 1 50%;
+      max-width: 50%;
+    }
+
+    .row {
+      margin: 6rem 0;
+    }
+  }
+
+  @media (width < 600px) {
+    .column.content {
+      flex: 0 1 90%;
+      max-width: 90%;
+    }
+
+    .row {
+      margin: 2rem 0;
+    }
+  }
+</style>
diff --git a/demo/router/routes.ts b/demo/router/routes.ts
@@ -7,6 +7,7 @@ export const Route = {
   Tabs: 'tabs' as const,
   TabsPanels: 'tabs-panels' as const,
   Dividers: 'dividers' as const,
+  Text: 'text' as const,
   Cards: 'cards' as const,
   Skeleton: 'skeleton' as const,
   Inputs: 'inputs' as const,
@@ -23,6 +24,7 @@ export const Path: Record<keyof typeof Route, string> = {
   TabsPanels: '/tabs/panels' as const,
   Dividers: '/dividers' as const,
   Cards: '/cards' as const,
+  Text: '/text' as const,
   Skeleton: '/skeleton' as const,
   Inputs: '/inputs' as const,
   Tooltips: '/tooltips' as const,
@@ -61,6 +63,11 @@ export const options: RouterOptions<Routes> = {
       path: Path.Dividers,
       component: () => import('../components/DemoDividers.svelte'),
     },
+    {
+      name: Route.Text,
+      path: Path.Text,
+      component: () => import('../components/DemoText.svelte'),
+    },
     {
       name: Route.Cards,
       path: Path.Cards,

diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte
@@ -208,6 +208,7 @@
       backdrop-filter 0.3s ease,
       border-radius 0.3s ease,
       box-shadow 0.3s ease-out;
+    appearance: none;
 
     &.neo-empty {
       padding: var(--neo-btn-padding-empty, 0.5rem);
@@ -297,8 +298,8 @@
         box-shadow 0.15s ease-out;
 
       .neo-content {
-        scale: var(--neo-btn-scale-pressed, 0.98);
         color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
+        scale: var(--neo-btn-scale-pressed, 0.98);
       }
     }
 

diff --git a/src/lib/list/NeoList.svelte b/src/lib/list/NeoList.svelte
@@ -434,7 +434,7 @@
       padding-inline: var(--neo-list-padding, 0.25rem);
 
       &.neo-scroll {
-        @include mixin.scrollbar($button-height: var(--neo-list-scrollbar-padding, 0.375rem));
+        @include mixin.scrollbar($button-height: var(--neo-list-scrollbar-padding, 0.5rem));
 
         padding-block: var(--neo-list-scroll-padding, 0.625rem);
 

diff --git a/src/lib/styles/mixin.scss b/src/lib/styles/mixin.scss
@@ -212,7 +212,7 @@
   $width: var(--neo-scrollbar-width, 0.375rem),
   $thumb-color: var(--neo-scrollbar-color),
   $thumb-border-radius: var(--neo-border-radius),
-  $button-height: var(--neo-scrollbar-button-height, 2px),
+  $button-height: var(--neo-scrollbar-button-height, 0.125rem),
   $timing: 0.3s,
   $delay: 0.1s,
   $transition: false
@@ -249,10 +249,30 @@
     cursor: pointer;
   }
 
+  &::-webkit-scrollbar:vertical {
+    width: $width;
+  }
+
+  &::-webkit-scrollbar:horizontal {
+    height: $width;
+  }
+
   &::-webkit-scrollbar-button {
+    display: block;
+
+    &:hover {
+      background-color: var(--neo-thumb-color, transparent);
+    }
+  }
+
+  &::-webkit-scrollbar-button:vertical {
     height: $button-height;
   }
 
+  &::-webkit-scrollbar-button:horizontal {
+    width: $button-height;
+  }
+
   &::-webkit-scrollbar-thumb {
     background-color: var(--neo-thumb-color, transparent);
     border: none;

diff --git a/src/lib/text/NeoScrollShadow.svelte b/src/lib/text/NeoScrollShadow.svelte
@@ -1,32 +1,52 @@
 <script lang="ts">
   import type { NeoScrollShadowProps } from '~/text/neo-scroll-shadow.model.js';
 
-  const {
+  import { toSize } from '~/utils/style.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
     // Snippets
     children,
 
     // States
+    ref = $bindable(),
     tag = 'div',
     shadow = true,
     scrollbar = true,
     overflow,
 
-    size,
+    // Size
+    width: _width,
+    height: _height,
+    shadowSize,
     direction,
 
     // Other props
     ...rest
   }: NeoScrollShadowProps = $props();
+  /* eslint-enable prefer-const */
+
+  const width = $derived(toSize(_width));
+  const height = $derived(toSize(_height));
 </script>
 
 <svelte:element
   this={tag}
+  bind:this={ref}
   class:neo-scroll-shadow={true}
   class:neo-scroll={scrollbar}
   class:neo-shadow={shadow}
+  class:neo-horizontal={direction === 'right'}
+  class:neo-vertical={direction !== 'right'}
+  style:width={width?.absolute}
+  style:min-width={width?.min}
+  style:max-width={width?.max}
+  style:height={height?.absolute}
+  style:min-height={height?.min}
+  style:max-height={height?.max}
   style:--neo-scroll-overflow={overflow}
   style:--neo-scroll-direction={direction}
-  style:--neo-scroll-shadow-size={size}
+  style:--neo-scroll-shadow-size={shadowSize}
   {...rest}
 >
   {@render children?.()}
@@ -36,12 +56,20 @@
   @use 'src/lib/styles/mixin' as mixin;
 
   .neo-scroll-shadow {
+    &.neo-vertical {
+      padding-block: calc(var(--neo-scroll-shadow-size, 1rem) / 2);
+    }
+
+    &.neo-horizontal {
+      padding-inline: calc(var(--neo-scroll-shadow-size, 1rem) / 2);
+    }
+
     &.neo-shadow {
       @include mixin.fade-scroll;
     }
 
     &.neo-scroll {
-      @include mixin.scrollbar;
+      @include mixin.scrollbar($button-height: var(--neo-scrollbar-button-height, calc(var(--neo-scroll-shadow-size, 1rem) / 2.5)));
     }
   }
 </style>
diff --git a/src/lib/text/neo-scroll-shadow.model.ts b/src/lib/text/neo-scroll-shadow.model.ts
@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLNeoBaseElement } from '~/utils/html-element.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '~/utils/html-element.utils.js';
+import type { SizeInput } from '~/utils/style.utils.js';
 
 export type NeoScrollShadowProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = {
   /**
@@ -20,10 +21,18 @@ export type NeoScrollShadowProps<Tag extends keyof HTMLElementTagNameMap = 'div'
    * Whether to show a custom scrollbar
    */
   scrollbar?: boolean;
+  /**
+   * Optional width constraints.
+   */
+  width?: SizeInput<'width'>;
+  /**
+   * Optional height constraints.
+   */
+  height?: SizeInput<'height'>;
   /**
    * Custom mask size
    */
-  size?: CSSStyleDeclaration['width'];
+  shadowSize?: CSSStyleDeclaration['width'];
   /**
    * Custom mask direction
    */
@@ -32,4 +41,5 @@ export type NeoScrollShadowProps<Tag extends keyof HTMLElementTagNameMap = 'div'
    * Custom overflow value
    */
   overflow?: CSSStyleDeclaration['overflow'];
-} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
+} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> &
+  HTMLRefProps<HTMLElementTagNameMap[Tag]>;