npm - @aquera/nile-elements - Versions diffs - 0.1.67-beta-2.4 → 0.1.67-beta-2.6 - Mend

@aquera/nile-elements 0.1.67-beta-2.4 → 0.1.67-beta-2.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 (751) hide show

package/demo/index.html CHANGED Viewed

@@ -3,298 +3,210 @@
 <head>
   <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables.css" id="stylesheet" />
+  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
   <link rel="stylesheet" href="index.css" />
   <script type="module" src="index.js"></script>
 </head>
 <style>
   .flex-container {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: 30px;
-    padding: 10px;
-    margin: 10px;
-    max-height: 100px;
-    width: 1200px;
+    padding: 0;
+    margin: 0;
+    border: 1px solid silver;
+    height: 900px;
   }
-  nile-rte-mentions .mention {
-  background: yellow !important;
-}
-/* nile-rich-text-editor .editor{
-  background: red;
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-nile-rte-preview {
-  background: blue !important;
-  width: 478px;
-  min-height: 50px;
-  overflow-x: auto;
-  white-space: nowrap;
-} */
-h2{
-  color:red;
-}
-</style>
-<body>
-  <div class="flex-container">
-    <nile-rich-text-editor >
-     <!-- <nile-rte-mentions mentioncolors='{
-      "@": "#eef2ff",
-      "#": "#fff3cd",
-      ":": "#e0f2fe"
-    }'></nile-rte-mentions> -->
+  nile-button {
+    flex: 0 0 auto;
+    height: 38px;
+  }
-    <nile-rte-mentions>
-      <nile-rte-mentions-item
+  /* nile-table-row.expandableHeader::part(expandable-icon){visibility: hidden;
+  } */
-        mentionscharacter="@"
-        mentionscolor="#e0f7fa"
-        mentionsprefix="{{"
-        mentionssuffix="}}"
-        mentionsdata='[
-          {"key":"abc","label":"ABC"},
-          {"key":"pqr","label":"PQR"}
-        ]'
-      ></nile-rte-mentions-item>
-      <nile-rte-mentions-item
-      mentionscharacter="#"
-      mentionsdata='[
-        {"key":"alpha","label":"Alpha"},
-        {"key":"bravo","label":"Bravo"},
-        {"key":"charlie","label":"Charlie"},
-        {"key":"delta","label":"Delta"},
-        {"key":"echo","label":"Echo"},
-        {"key":"foxtrot","label":"Foxtrot"},
-        {"key":"golf","label":"Golf"},
-        {"key":"hotel","label":"Hotel"},
-        {"key":"india","label":"India"},
-        {"key":"juliet","label":"Juliet"},
-        {"key":"kilo","label":"Kilo"},
-        {"key":"lima","label":"Lima"},
-        {"key":"mike","label":"Mike"},
-        {"key":"november","label":"November"},
-        {"key":"oscar","label":"Oscar"},
-        {"key":"papa","label":"Papa"},
-        {"key":"quebec","label":"Quebec"},
-        {"key":"romeo","label":"Romeo"},
-        {"key":"sierra","label":"Sierra"},
-        {"key":"tango","label":"Tango"},
-        {"key":"uniform","label":"Uniform"},
-        {"key":"victor","label":"Victor"},
-        {"key":"whiskey","label":"Whiskey"},
-        {"key":"xray","label":"X-Ray"},
-        {"key":"yankee","label":"Yankee"},
-        {"key":"zulu","label":"Zulu"},
-        {"key":"apple","label":"Apple"},
-        {"key":"banana","label":"Banana"},
-        {"key":"cherry","label":"Cherry"},
-        {"key":"date","label":"Date"},
-        {"key":"elderberry","label":"Elderberry"},
-        {"key":"fig","label":"Fig"},
-        {"key":"grape","label":"Grape"},
-        {"key":"honeydew","label":"Honeydew"},
-        {"key":"ice","label":"Ice"},
-        {"key":"jackfruit","label":"Jackfruit"},
-        {"key":"kiwi","label":"Kiwi"},
-        {"key":"lemon","label":"Lemon"},
-        {"key":"mango","label":"Mango"},
-        {"key":"nectarine","label":"Nectarine"},
-        {"key":"orange","label":"Orange"},
-        {"key":"papaya","label":"Papaya"},
-        {"key":"quince","label":"Quince"},
-        {"key":"raspberry","label":"Raspberry"},
-        {"key":"strawberry","label":"Strawberry"},
-        {"key":"tomato","label":"Tomato"},
-        {"key":"ugli","label":"Ugli"},
-        {"key":"vanilla","label":"Vanilla"},
-        {"key":"watermelon","label":"Watermelon"},
-        {"key":"xigua","label":"Xigua"},
-        {"key":"yam","label":"Yam"},
-        {"key":"zucchini","label":"Zucchini"},
-        {"key":"red","label":"Red"},
-        {"key":"orange-color","label":"Orange"},
-        {"key":"yellow","label":"Yellow"},
-        {"key":"green","label":"Green"},
-        {"key":"blue","label":"Blue"},
-        {"key":"indigo","label":"Indigo"},
-        {"key":"violet","label":"Violet"},
-        {"key":"black","label":"Black"},
-        {"key":"white","label":"White"},
-        {"key":"gray","label":"Gray"},
-        {"key":"silver","label":"Silver"},
-        {"key":"gold","label":"Gold"},
-        {"key":"cyan","label":"Cyan"},
-        {"key":"magenta","label":"Magenta"},
-        {"key":"pink","label":"Pink"},
-        {"key":"brown","label":"Brown"},
-        {"key":"beige","label":"Beige"},
-        {"key":"maroon","label":"Maroon"},
-        {"key":"olive","label":"Olive"},
-        {"key":"teal","label":"Teal"},
-        {"key":"navy","label":"Navy"},
-        {"key":"lime","label":"Lime"},
-        {"key":"peach","label":"Peach"},
-        {"key":"plum","label":"Plum"},
-        {"key":"tan","label":"Tan"},
-        {"key":"salmon","label":"Salmon"},
-        {"key":"coral","label":"Coral"},
-        {"key":"crimson","label":"Crimson"},
-        {"key":"amber","label":"Amber"},
-        {"key":"mint","label":"Mint"},
-        {"key":"turquoise","label":"Turquoise"},
-        {"key":"lavender","label":"Lavender"},
-        {"key":"orchid","label":"Orchid"},
-        {"key":"periwinkle","label":"Periwinkle"},
-        {"key":"chartreuse","label":"Chartreuse"},
-        {"key":"emerald","label":"Emerald"},
-        {"key":"jade","label":"Jade"},
-        {"key":"ruby","label":"Ruby"},
-        {"key":"sapphire","label":"Sapphire"},
-        {"key":"topaz","label":"Topaz"},
-        {"key":"amethyst","label":"Amethyst"},
-        {"key":"opal","label":"Opal"},
-        {"key":"onyx","label":"Onyx"},
-        {"key":"quartz","label":"Quartz"},
-        {"key":"diamond","label":"Diamond"},
-        {"key":"pearl","label":"Pearl"},
-        {"key":"garnet","label":"Garnet"},
-        {"key":"spinach","label":"Spinach"}
-      ]'
-    ></nile-rte-mentions-item>
-    </nile-rte-mentions>
-      <nile-rte-toolbar>
-        <!-- <nile-rte-select
-          type="heading"
-          options='[
-            {"value":"p","label":"Normal"},
-            {"value":"h1","label":"Heading 1"},
-            {"value":"h2","label":"Heading 2"},
-            {"value":"h3","label":"Heading 3"},
-            {"value":"h4","label":"Heading 4"},
-            {"value":"h5","label":"Heading 5"},
-            {"value":"h6","label":"Heading 6"}
-          ]'></nile-rte-select> -->
-        <nile-rte-toolbar-item name="bold" label="Bold"></nile-rte-toolbar-item>
-        <nile-rte-toolbar-item name="italic" label="Italic"></nile-rte-toolbar-item>
-        <nile-rte-toolbar-item name="underline" label="Underline"></nile-rte-toolbar-item>
-        <nile-rte-divider></nile-rte-divider>
-        <!-- <nile-rte-color mode="foreColor" label="Text" value="#000000"></nile-rte-color>
-        <nile-rte-color mode="backColor" label="Highlight" value="#ffffff"></nile-rte-color> -->
-        <!-- <nile-rte-select
-  type="font"
-  label="Font"
-  options='[
-  {"value":"colfax-regular","label":"Colfax Regular"},
-    {"value":"Inter","label":"Inter"},
-    {"value":"Georgia","label":"Georgia"},
-    {"value":"Times New Roman","label":"Times New Roman"},
-    {"value":"Courier New","label":"Courier New"},
-    {"value":"Monaco","label":"Monaco"}
-  ]'>
-</nile-rte-select> -->
+  .mytable::part(base) {
+    height: 400px;
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
-        <nile-rte-select
-          type="align"
-          label="Align"></nile-rte-select>
-        <nile-rte-toolbar-item name="ul"  ></nile-rte-toolbar-item>
-        <nile-rte-toolbar-item name="ol"  ></nile-rte-toolbar-item>
-        <nile-rte-divider></nile-rte-divider>
-        <!-- <nile-rte-toolbar-item name="clear"  ></nile-rte-toolbar-item>   -->
-        <!-- <nile-rte-link></nile-rte-link> -->
-        <!-- <nile-rte-toolbar-item name="link"   ></nile-rte-toolbar-item>  -->
-      </nile-rte-toolbar>
-      <!-- Optional live preview -->
-      <nile-rte-preview></nile-rte-preview>
-    </nile-rich-text-editor>
+  }
-  </div>
+  .mytable nile-table-header-item {
+    position: sticky;
+    top: 0;
+    z-index: 2;
-  <script>
+  }
-document.addEventListener('content-changed', e => {
-  console.log('Received from Clean:', e.detail.content);
-  if (e.detail.mention) {
-    console.log('Also in content-changed:', e.detail.mention);
+  .mytable nile-table-row.expandableHeader {
+    position: sticky;
+    top: 0;
+    z-index: 1;
   }
-});
-document.addEventListener('mention-opened', e => {
-  console.log('Mention started:', e.detail.trigger, e.detail.suggestions);
-});
-document.addEventListener('mention-selected', e => {
-  console.log('Mention picked:', e.detail.trigger, e.detail.key, e.detail.label);
-});
+  /* First Name & Last Name - 15% each */
+ nile-table-header-item:nth-child(3),  nile-table-cell-item:nth-child(3)  {
+	width: 100px;
+}
+</style>
-  </script>
-  <!-- <script type="module">
+<body>
+  <nile-table-body class="mytable" expandableRows>
+    <nile-table-row class="expandableHeader">
+      <nile-table-header-item class="header1">First Name</nile-table-header-item>
+      <nile-table-header-item class="header2">Last Name</nile-table-header-item>
+      <nile-table-header-item class="header3">Rating</nile-table-header-item>
+      <nile-table-header-item class="header4">Demo</nile-table-header-item>
+      <nile-table-header-item class="header5">Description</nile-table-header-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>Birat</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>Yes</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row> <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row> <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row> <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row> <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row> <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>Yes</nile-table-cell-item>
+      <nile-table-cell-item>Something</nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row>
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something Something Something Something Something Something Something Something Something
+        Something Something Something Something Something Something Something Something Something Something Something
+        Something Something Something Something Something Something Something Something Something Something Something
+        Something Something </nile-table-cell-item>
+    </nile-table-row>
+    <nile-table-row class="cancel">
+      <nile-table-cell-item>John</nile-table-cell-item>
+      <nile-table-cell-item>Doe</nile-table-cell-item>
+      <nile-table-cell-item>4.5</nile-table-cell-item>
+      <nile-table-cell-item>No</nile-table-cell-item>
+      <nile-table-cell-item>Something </nile-table-cell-item>
+      <div slot="expanded" style="padding: 40px;">
+        <nile-table-body>
+          <nile-table-row>
+            <nile-table-header-item>First Name</nile-table-header-item>
+            <nile-table-header-item>Last Name</nile-table-header-item>
+            <nile-table-header-item>Rating</nile-table-header-item>
+            <nile-table-header-item>Demo</nile-table-header-item>
+            <nile-table-header-item>Description</nile-table-header-item>
+          </nile-table-row>
+          <nile-table-row>
+            <nile-table-cell-item>John</nile-table-cell-item>
+            <nile-table-cell-item>Doe</nile-table-cell-item>
+            <nile-table-cell-item>4.5</nile-table-cell-item>
+            <nile-table-cell-item>Yes</nile-table-cell-item>
+            <nile-table-cell-item>Something</nile-table-cell-item>
+          </nile-table-row>
+          <nile-table-row>
+            <nile-table-cell-item>John</nile-table-cell-item>
+            <nile-table-cell-item>Doe</nile-table-cell-item>
+            <nile-table-cell-item>4.5</nile-table-cell-item>
+            <nile-table-cell-item>No</nile-table-cell-item>
+            <nile-table-cell-item>Something</nile-table-cell-item>
+          </nile-table-row>
+          <nile-table-row>
+            <nile-table-cell-item>John</nile-table-cell-item>
+            <nile-table-cell-item>Doe</nile-table-cell-item>
+            <nile-table-cell-item>4.5</nile-table-cell-item>
+            <nile-table-cell-item>Yes</nile-table-cell-item>
+            <nile-table-cell-item>Something</nile-table-cell-item>
+          </nile-table-row>
+          <nile-table-row>
+            <nile-table-cell-item>John</nile-table-cell-item>
+            <nile-table-cell-item>Doe</nile-table-cell-item>
+            <nile-table-cell-item>4.5</nile-table-cell-item>
+            <nile-table-cell-item>No</nile-table-cell-item>
+            <nile-table-cell-item>Something</nile-table-cell-item>
+          </nile-table-row>
+        </nile-table-body>
+      </div>
+    </nile-table-row>
+  </nile-table-body>
-     const rte = document.querySelector('nile-rich-text-editor');
-rte.value = '<h2>Welcome</h2><p>This came from JS.</p>';
-    // Optional: listen to editor content changes (keep if you already use it)
-    document.addEventListener('content-changed', e => {
-      console.log('Received from anywhere', e.detail.content);
-    });
-    window.addEventListener('DOMContentLoaded', async () => {
-      // Wait for the editor custom element to be ready
-      await customElements.whenDefined('nile-rich-text-editor');
-      const editor = document.querySelector('nile-rich-text-editor');
-      if (!editor) {
-        console.error('nile-rich-text-editor not found');
-        return;
-      }
-      // Ensure there is a <nile-rte-mentions> inside the editor
-      let mentions = editor.querySelector('nile-rte-mentions');
-      if (!mentions) {
-        mentions = document.createElement('nile-rte-mentions');
-        // Put it as the first child of the editor so it's available early
-        editor.prepend(mentions);
-      }
-      const BIG_AT = Array.from({ length: 1000 }, (_, i) => ({
-        key:   `user-${i + 1}`,
-        label: `User ${i + 1}`
-      }));
-      mentions.setExternalConfig({ '@': BIG_AT });
-      mentions.mentionColors = { '@': '#eef2ff' };
-      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
+  </div>
+  <script>
+    document.addEventListener('nile-body-load', () => {
+      const cancel = document.querySelector('.cancel');
+      setTimeout(() => {
+        cancel.expandable = false;
+        setTimeout(() => {
+          cancel.expandable = true;
+        }, 3000);
+      }, 4000);
     });
-  </script> -->
+  </script>
 </body>
-</html>
+</html>

package/dist/aquera-nile-elements-0.1.57-beta-2.0.tgz ADDED Viewed

Binary file