npm - @aquera/nile-elements - Versions diffs - 0.1.64 → 0.1.65-beta-1.0 - Mend

@aquera/nile-elements 0.1.64 → 0.1.65-beta-1.0

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

package/README.md CHANGED Viewed

@@ -79,32 +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.64
-- New Component: File Upload [UIF-517]
-- Nested dropdown example added [UIF-930]
-#### Version 0.1.63
-- Nile Code Editor: Tab completion, Colfax font, Escape key support [UIF-887]
-#### Version 0.1.62
-- Nile Table: Column width issue fixed [UIF-924]
-#### Version 0.1.61
-- Nile Select: Checkbox issue is fixed[UIF-923]
-#### Version 0.1.60
-- Nile Chip: Defect fix [UIF-921]
-#### Version 0.1.59
-- Nile Select: Virtual scroll feature added [UIF-734]
-#### 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]
@@ -709,4 +683,4 @@ In this section, you can find the updates for each release of `nile-elements`. I
 - Added: more support to new design
 #### Version 0.0.57
-- Added: more support to new design
+- Added: more support to new design

package/demo/index.html CHANGED Viewed

@@ -10,30 +10,132 @@
 <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-circular-progressbar value="30" content=" "></nile-circular-progressbar>
-    </div>
+  <div class="flex-container">
+    <nile-rich-text-editor>
+      <!-- Mentions will be added dynamically here -->
+     <!-- <nile-rte-mentions mentioncolors='{
+      "@": "#eef2ff",
+      "#": "#fff3cd",
+      ":": "#e0f2fe"
+    }'></nile-rte-mentions> -->
+    <nile-rte-mentions></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="#ffff00"></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>
+        <nile-rte-select
+          type="align"
+          options='[
+          {"value":"left",   "label":"", "icon":"left-align"},
+          {"value":"center", "label":"", "icon":"center-align"},
+          {"value":"right",  "label":"", "icon":"right-align"},
+          {"value":"justify","label":"", "icon":"nile-justify"}
+        ]'
+          label="Align"></nile-rte-select>
+        <nile-rte-toolbar-item name="ul" label="Bulleted list"></nile-rte-toolbar-item>
+        <nile-rte-toolbar-item name="ol" label="Numbered list"></nile-rte-toolbar-item>
+        <nile-rte-toolbar-item name="clear" label="Clear Formatting" ></nile-rte-toolbar-item>
+        <nile-rte-toolbar-item name="link" label="Link" ></nile-rte-toolbar-item>
+      </nile-rte-toolbar>
+      <!-- Optional live preview -->
+      <nile-rte-preview></nile-rte-preview>
+    </nile-rich-text-editor>
+  </div>
+  <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}`
+      }));
+      mentions.setExternalConfig({ '@': BIG_AT });
+      mentions.mentionColors = { '@': '#eef2ff' };
+      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
+    });
+  </script>
 </body>
-</html>
+</html>