npm - @aquera/nile-elements - Versions diffs - 1.2.7-beta-1.5 → 1.2.7-beta-1.6 - Mend

@aquera/nile-elements 1.2.7-beta-1.5 → 1.2.7-beta-1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (742) hide show

package/README.md CHANGED Viewed

@@ -79,8 +79,14 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+#### Version 1.2.6
+- Nile Virtual Select: Scroll Not going to Top while searching when Portal is true (UIF-1001).
+#### Version 1.2.5
+- Nile Virtual Select: search and scroll bar issue fixed (UIF-997, UIF-1000).
 #### Version 1.2.4
-- Nile Grid: Fixed rowspan issue (UIF-989)
+- Nile Table: Table Header Item Fix (UIF-996)
 #### Version 1.2.3
 - Nile Chip: Event not working in Nile Chip when noAutoComplete is passed  (UIF-995)

package/demo/index.html CHANGED Viewed

@@ -5,30 +5,368 @@
     <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
     <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
     <link rel="stylesheet" href="index.css" />
-    <style>
-    </style>
+    <script>
+      window.process = window.process || { env: { NODE_ENV: 'production' } };
+    </script>
     <script type="module" src="index.js"></script>
   </head>
-  <body>
+  <body style="display: flex; flex-direction: column; gap: 2rem; height: 100%; width: 100vw; overflow: auto;">
+    <h1>🧪 Nile lite Tooltip – Prop Showcase</h1>
+    <!-- 1️⃣ Basic Content & Placement -->
+    <section>
+      <h2>Placement</h2>
+      <p>Use the <code>placement</code> attribute to set the preferred placement of the tooltip.</p>
+      <div class="placement-demo">
+        <!-- Top Row -->
+        <button id="top-start">top-start</button>
+        <button id="top">top</button>
+        <button id="top-end">top-end</button>
+        <!-- Left Column -->
+        <button id="left-start">left-start</button>
+        <button id="left">left</button>
+        <button id="left-end">left-end</button>
+        <!-- Right Column -->
+        <button id="right-start">right-start</button>
+        <button id="right">right</button>
+        <button id="right-end">right-end</button>
+        <!-- Bottom Row -->
+        <button id="bottom-start">bottom-start</button>
+        <button id="bottom">bottom</button>
+        <button id="bottom-end">bottom-end</button>
+        <!-- Tooltips -->
+        <nile-lite-tooltip for="top-start" content="top-start" placement="top-start"></nile-lite-tooltip>
+        <nile-lite-tooltip for="top" content="top" placement="top"></nile-lite-tooltip>
+        <nile-lite-tooltip for="top-end" content="top-end" placement="top-end"></nile-lite-tooltip>
+        <nile-lite-tooltip for="left-start" content="left-start" placement="left-start"></nile-lite-tooltip>
+        <nile-lite-tooltip for="left" content="left" placement="left"></nile-lite-tooltip>
+        <nile-lite-tooltip for="left-end" content="left-end" placement="left-end"></nile-lite-tooltip>
+        <nile-lite-tooltip for="right-start" content="right-start" placement="right-start"></nile-lite-tooltip>
+        <nile-lite-tooltip for="right" content="right" placement="right"></nile-lite-tooltip>
+        <nile-lite-tooltip for="right-end" content="right-end" placement="right-end"></nile-lite-tooltip>
+        <nile-lite-tooltip for="bottom-start" content="bottom-start element and content" placement="bottom-start"></nile-lite-tooltip>
+        <nile-lite-tooltip for="bottom" content="bottom" placement="bottom"></nile-lite-tooltip>
+        <nile-lite-tooltip for="bottom-end" content="bottom-end" placement="bottom-end"></nile-lite-tooltip>
+      </div>
+      <style>
+        .placement-demo {
+          position: relative;
+          display: grid;
+          grid-template-columns: repeat(5, 80px);
+          grid-template-rows: repeat(5, 60px);
+          justify-content: center;
+          align-items: center;
+          gap: 8px;
+          margin-top: 2rem;
+        }
+        .placement-demo button {
+          border: 1px solid #ccc;
+          background: #fff;
+          border-radius: 6px;
+          cursor: pointer;
+          padding: 6px 8px;
+          font-size: 12px;
+          transition: all 0.2s ease;
+        }
+        .placement-demo button:hover {
+          background: #eef6ff;
+          border-color: #90caf9;
+        }
+        /* Position buttons visually in grid */
+        #top-start { grid-column: 2; grid-row: 1; }
+        #top { grid-column: 3; grid-row: 1; }
+        #top-end { grid-column: 4; grid-row: 1; }
+        #left-start { grid-column: 1; grid-row: 2; }
+        #left { grid-column: 1; grid-row: 3; }
+        #left-end { grid-column: 1; grid-row: 4; }
+        #right-start { grid-column: 5; grid-row: 2; }
+        #right { grid-column: 5; grid-row: 3; }
+        #right-end { grid-column: 5; grid-row: 4; }
+        #bottom-start { grid-column: 2; grid-row: 5; }
+        #bottom { grid-column: 3; grid-row: 5; }
+        #bottom-end { grid-column: 4; grid-row: 5; }
+      </style>
+    </section>
+    <!-- 2️⃣ Size Variants -->
+    <section>
+      <h2>size: small vs large</h2>
+      <button id="small-btn">Small tooltip</button>
+      <nile-lite-tooltip  for="small-btn" id="small-tooltip" content="This is a small tooltip." size="small"   interactive intertia></nile-lite-tooltip>
+      <button id="large-btn">Large tooltip</button>
+      <nile-lite-tooltip  for="large-btn" id="large-tooltip" content="This is a larger tooltip for longer content that wraps nicely." size="large"  ></nile-lite-tooltip>
+    </section>
+    <!-- 3️⃣ Distance & Skidding -->
+    <section>
+      <h2>distance & skidding</h2>
+      <button id="offset-btn">Offset Tooltip</button>
+      <nile-lite-tooltip
+        for="offset-btn"
+        content="Distance = 16px, Skidding = 20px"
+        distance="16"
+        skidding="20"
+        placement="top"
+      ></nile-lite-tooltip>
+    </section>
+    <!-- 4️⃣ Disabled -->
+    <section>
+      <h2>disabled</h2>
+      <button id="disabled-btn">Disabled Tooltip</button>
+      <nile-lite-tooltip for="disabled-btn" content="You should not see this." disabled></nile-lite-tooltip>
+    </section>
+    <!-- 5️⃣ Trigger Variants -->
+    <section>
+      <h2>trigger</h2>
+      <button id="hover-btn">Hover (default)</button>
+      <nile-lite-tooltip for="hover-btn" content="Triggered by hover"></nile-lite-tooltip>
+      <button id="click-btn">Click</button>
+      <nile-lite-tooltip for="click-btn" content="Triggered by click" trigger="click"></nile-lite-tooltip>
+      <button id="focus-btn">Focus</button>
+      <nile-lite-tooltip for="focus-btn" content="Triggered by focus" trigger="focus"></nile-lite-tooltip>
+      <button id="manual-btn">Manual (open programmatically)</button>
+      <nile-lite-tooltip for="manual-btn" content="Controlled manually" trigger="manual" id="manual-tooltip"></nile-lite-tooltip>
+    </section>
+    <button id="controlled-btn">Controlled Tooltip</button>
+    <nile-lite-tooltip
+      for="controlled-btn"
+      id="controlled-tooltip"
+      content="This tooltip is controlled via JS"
+      trigger="manual"
+      open="false"
+    ></nile-lite-tooltip>
+    <button id="open-btn">Show Tooltip</button>
+    <button id="close-btn">Hide Tooltip</button>
+    <script>
+      const tooltip = document.querySelector('#controlled-tooltip');
+      document.querySelector('#open-btn').addEventListener('click', () => (tooltip.open = true));
+      document.querySelector('#close-btn').addEventListener('click', () => (tooltip.open = false));
+    </script>
+    <!-- 7️⃣ Hoisted Tooltip -->
+    <section>
+      <h2>hoist</h2>
+      <div style="position: relative; overflow: hidden; width: 200px; height: 100px; border: 1px dashed #aaa;">
+        <button id="hoisted-btn" style="position: absolute; bottom: 10px; left: 50px;">Hover me</button>
+        <nile-lite-tooltip
+          for="hoisted-btn"
+           allowHTML
+           content="<strong>Bold text</strong> and <em>italic</em> content that can go out"
+   hoist
+        ></nile-lite-tooltip>
+      </div>
+    </section>
+    <!-- 8️⃣ Wrapper Mode -->
+      <section>
+        <h2>Wrapper mode</h2>
+        <nile-lite-tooltip content="I’m applied to this wrapped button directly.">
+          <button>Hover me (wrapped)</button>
+        </nile-lite-tooltip>
+      </section>
+    <!-- 9️⃣ Round Arrow -->
+    <section>
+      <h2>round arrow</h2>
+      <button id="round-arrow-btn">Round Arrow</button>
+      <nile-lite-tooltip for="round-arrow-btn" content="Round Arrow" roundArrow></nile-lite-tooltip>
+    </section>
+    <!-- 10️⃣ Follow Cursor -->
+    <section>
+      <h2>follow cursor</h2>
+      <button id="follow-cursor-btn">Follow Cursor</button>
+      <nile-lite-tooltip for="follow-cursor-btn" content="Follow Cursor" followCursor="true"></nile-lite-tooltip>
+      <button id="follow-cursor-horizontal-btn">Follow Cursor Horizontal</button>
+      <nile-lite-tooltip for="follow-cursor-horizontal-btn" content="Follow Cursor Horizontal" followCursor="horizontal"></nile-lite-tooltip>
+      <button id="follow-cursor-vertical-btn">Follow Cursor Vertical</button>
+      <nile-lite-tooltip for="follow-cursor-vertical-btn" content="Follow Cursor Vertical" followCursor="vertical"></nile-lite-tooltip>
+      <button id="follow-cursor-initial-btn">Follow Cursor Initial</button>
+      <nile-lite-tooltip for="follow-cursor-initial-btn" content="Follow Cursor Initial" followCursor="initial"></nile-lite-tooltip>
+    </section>
+    <!-- 11️⃣ Duration -->
+    <section>
+      <h2>duration</h2>
+      <button id="duration-btn">Duration</button>
+      <nile-lite-tooltip for="duration-btn" content="Duration" duration="1000"></nile-lite-tooltip>
+      <button id="duration-show-hide-btn">Duration Show Hide</button>
+      <nile-lite-tooltip for="duration-show-hide-btn" content="Duration Show Hide" duration="1000,500"></nile-lite-tooltip>
+      <button id="duration-string-btn">Duration String</button>
+      <nile-lite-tooltip for="duration-string-btn" content="Duration String" duration="1s,500ms"></nile-lite-tooltip>
+    </section>
+    <nile-lite-tooltip content="Duration String"  followCursor="initial">
+    <svg height="100" width="100"><line x1="0" y1="0" x2="150" y2="150" style="stroke: tomato; stroke-width: 5;"></line></svg>
+  </nile-lite-tooltip>
+  <nile-lite-tooltip singleton size="large">
+    <button data-tippy-content="Tooltip for Button A">Button A</button>
+    <button data-tippy-content="Tooltip for Button B">Button B</button>
+    <button data-tippy-content="Tooltip for Button C">Button C</button>
+  </nile-lite-tooltip>
-<!-- <nile-input
-  type="password"
-  canSavePassword>
-</nile-input>
-  -->
-  <nile-chip
-   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
-   acceptUserInput
-></nile-chip>
+  <nile-select class="virtual-scroll-string" placeholder="Please Select" searchEnabled="true" enableVirtualScroll="true">
+  </nile-select>
+  <script>
+    const optionsString = Array.from({ length: 100000 }, (_, i) => `Option This is a larger tooltip for longer content that wraps nicely  ${i + 1}`);
+    const basicString = document.querySelector('nile-select.virtual-scroll-string');
+    basicString.data = optionsString;
+  </script>
+ <br><br>
+<nile-icon name="user" id="test-button"> Button</nile-icon>
+<nile-lite-tooltip for="test-button" content="Tooltip" open></nile-lite-tooltip>
+    <script>
+      const manualTooltip = document.querySelector('#manual-tooltip');
+      const manualBtn = document.querySelector('#manual-btn');
+      manualBtn.addEventListener('click', () => {
+        manualTooltip.content = 'This is a manual tooltip. <b>Hello</b>';
+        manualTooltip.open = !manualTooltip.open;
+      });
+      manualTooltip.addEventListener('nile-show', (e) => {
+        console.log('nile-show', e);
+      });
+      manualTooltip.addEventListener('nile-hide', (e) => {
+        console.log('nile-hide', e);
+      });
+      manualTooltip.addEventListener('nile-toggle', (e) => {
+        console.log('nile-toggle', e);
+      });
+      manualTooltip.addEventListener('nile-open', (e) => {
+        console.log('nile-open', e);
+      });
+      manualTooltip.addEventListener('nile-close', (e) => {
+        console.log('nile-close', e);
+      });
+      manualTooltip.addEventListener('nile-toggle', (e) => {
+        console.log('nile-toggle', e);
+      });
+    </script>
+<nile-lite-tooltip singleton placement="top">
+  <button content="Home">🏠</button>
+  <button content="Settings">⚙️</button>
+  <button content="Help">❓</button>
+</nile-lite-tooltip>
+<button id="manual-btn1">Manual trigger button</button>
+<nile-lite-tooltip
+  id="manual-tip"
+  for="manual-btn1"
+  open
+  allowHTML
+  interactive
+  trigger="manual"
+  content='This tooltip stays open until you close it manually!
+           '
+></nile-lite-tooltip>
+<button id="close-tip" style="margin-left:8px;">×</button>
+<script>
+  const manualTip = document.querySelector('#manual-tip');
+  const closeTip = document.querySelector('#close-tip');
+  closeTip.addEventListener('click', () => {
+    manualTip.open = false;
+  });
+</script>
+<button id="click-btn1">Click me</button>
+<nile-lite-tooltip
+  for="click-btn1"
+  trigger="click"
+  content="Click again to close!"
+></nile-lite-tooltip>
+<button id="focus-btn1">Focus me (Tab + Enter)</button>
+<nile-lite-tooltip
+  for="focus-btn1"
+  trigger="focus"
+  content="This tooltip appears when focused!"
+></nile-lite-tooltip>
+<button id="hover-btn1">Hover me</button>
+<nile-lite-tooltip
+  for="hover-btn1"
+  trigger="mouseenter"
+  content="This tooltip appears when you hover!"
+></nile-lite-tooltip>
+<button id="btn11">Hover 1</button>
+<nile-lite-tooltip for="btn11" content="Tooltip 1"></nile-lite-tooltip>
+<button id="btn222">Hover 2</button>
+<nile-lite-tooltip for="btn222" content="Tooltip 2"></nile-lite-tooltip>
   </body>
 </html>

package/demo/variables.css CHANGED Viewed

@@ -318,7 +318,7 @@
   --nile-colors-green-400: #A5F3E1;
   --nile-colors-green-100: #F6FEFC;
   --nile-colors-dark-900: #000000;
-  --nile-colors-dark-500: #7F7F7F;
+  --nile-colors-dark-500: #636363;
   --nile-colors-dark-200: #F5F7F7;
   --nile-colors-dark-100: rgba(0, 0, 0, 0.1);
   --nile-colors-blue-700: #1978B8;