npm - @aquera/nile-elements - Versions diffs - 0.1.67-beta-1.1 → 0.1.67-beta-1.3 - Mend

@aquera/nile-elements 0.1.67-beta-1.1 → 0.1.67-beta-1.3

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 (913) hide show

package/README.md CHANGED Viewed

@@ -79,16 +79,6 @@ 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 0.1.59
-- Nile Table: Row Expandable feature added [UIF-902]
-#### Version 0.1.58
-- Nile Table: Column resize feature added [UIF-889]
-#### Version 0.1.57
-- New Component: Nile Slider [UIF-854]
-- Dependency Nile 0.3.71
 #### Version 0.1.56
 - Nile Empty State: Added Parts for Styling[UIF-891]

package/demo/index.html CHANGED Viewed

@@ -10,90 +10,255 @@
 <style>
   .flex-container {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    max-width: 1000px;
     gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
+    padding: 10px;
+    margin: 10px;
     height: 900px;
   }
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  }
+  nile-rte-mentions .mention {
+  background: yellow !important;
+}
 </style>
 <body>
-    <div style="padding: 30px;">
-        <nile-progress-bar value="80"></nile-progress-bar>
-    </div>
-    <div style="padding: 30px;">
-        <nile-circular-progressbar content="text"></nile-circular-progressbar>
-<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
-<nile-circular-progressbar></nile-circular-progressbar>
-<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 expandable>
-    <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">
-      <nile-button>Click me</nile-button>
-    </div>
-  </nile-table-row>
+  <div class="flex-container">
+    <nile-rich-text-editor>
+     <!-- <nile-rte-mentions mentioncolors='{
+      "@": "#eef2ff",
+      "#": "#fff3cd",
+      ":": "#e0f2fe"
+    }'></nile-rte-mentions> -->
-</nile-table-body>
+    <nile-rte-mentions>
+      <nile-rte-mentions-item
+        mentionscharacter="@"
+        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-color type="foreColor" label="Text" value="#000000"></nile-rte-color>
+        <nile-rte-color mode="background" 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>
-    </div>
-</body>
+        <nile-rte-select
+          type="align"
+          options='[
+          {"value":"left",     "icon":"left-align"},
+          {"value":"center",   "icon":"center-align"},
+          {"value":"right",    "icon":"right-align"},
+          {"value":"justify", "icon":"nile-justify"}
+        ]'
+          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-toolbar-item name="clear"  ></nile-rte-toolbar-item>
+        <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>
-<script type="module">
-  // Wait for custom elements to upgrade
-  window.addEventListener('DOMContentLoaded', () => {
-    const tableBody = document.querySelector('nile-table-body');
-    tableBody.addEventListener('nile-change', (e) => {
-      console.log('[nile-change] fired',
-        { expanded: e.detail?.expanded, target: e.target, currentTarget: e.currentTarget });
-    });
+  </div>
+  <script>
+document.addEventListener('content-changed', e => {
+      console.log('Received from anywhere', e.detail.content);
+    });
+  </script>
+  <!-- <script type="module">
+    // 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}`
+      }));
-    const row = document.querySelector('nile-table-row[expandable]');
-    row.addEventListener('nile-change', (e) => {
-      console.log('[row] nile-change detail:', e.detail);
+      mentions.setExternalConfig({ '@': BIG_AT });
+      mentions.mentionColors = { '@': '#eef2ff' };
+      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
     });
-  });
-</script>
+  </script> -->
+</body>
-</html>
+</html>