npm - @aquera/nile-elements - Versions diffs - 0.1.71 → 0.1.72-beta-1.3 - Mend

@aquera/nile-elements 0.1.71 → 0.1.72-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 (1006) hide show

package/README.md CHANGED Viewed

@@ -79,30 +79,9 @@ 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.71
-- Nile Code Editor: fix to close autoComplete in Code Editor  [UIF-963]
-#### Version 0.1.70
-- Nile Table: Table body custom part added [UIF-959]
-#### Version 0.1.69
-- Nile Table: Column resize defect fix [UIF-959]
-#### Version 0.1.68
--  Nile Code Editor: Code Editor Fixes [UIF-956]
-#### Version 0.1.67
-- New Component: Nile Option Group [UIF-948]
 #### Version 0.1.66
   Nile Virtual Select: Provide option to pass class to `nile-option` [UIF-938]
-#### Version 0.1.55-patch-2
-- Nile Code Editor: Defect fix [UIF-939]
-#### Version 0.1.55-1
-- Nile Code Editor: Added defaultFont property, Enabled tab completion by default [UIF-887]
 #### Version 0.1.65
 - Nile Option: Added a CSS Part (Technical Change) [UIF-937]

package/demo/index.html CHANGED Viewed

@@ -3,37 +3,285 @@
 <head>
   <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
+  <link rel="stylesheet" href="variables.css" id="stylesheet" />
   <link rel="stylesheet" href="index.css" />
   <script type="module" src="index.js"></script>
 </head>
 <style>
   .flex-container {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
-    height: 900px;
+    padding: 10px;
+    margin: 10px;
+    max-height: 100px;
+    width: 600px;
   }
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  }
+  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 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>
+     <!-- <nile-rte-mentions mentioncolors='{
+      "@": "#eef2ff",
+      "#": "#fff3cd",
+      ":": "#e0f2fe"
+    }'></nile-rte-mentions> -->
+    <nile-rte-mentions >
+      <nile-rte-mentions-item
+        mentionscharacter="@"
+        mentionscolor="#e0f7fa"
+        mentionsprefix="{{"
+        mentionssuffix="}}"
+        mentionsdata='[
+          {"key":"abc","label":"ABC"},
+          {"key":"pqr","label":"PQR"}
+        ]'
+      ></nile-rte-mentions-item>
+      <nile-rte-mention-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-mention-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> -->
+        <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>
+  <script>
+  const rte = document.querySelector('nile-rich-text-editor');
+  // rte.value = '<p style="font-weight:400;font-style:normal;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><b style="font-weight:700;font-style:normal;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><i style="font-weight:700;font-style:italic;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><u style="font-weight:700;font-style:italic;text-decoration:underline solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline">sdasdasd</u></i></b></p>'
+  </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}`
+      }));
+      mentions.setExternalConfig({ '@': BIG_AT });
+      mentions.mentionColors = { '@': '#eef2ff' };
+      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
+    });
+  </script> -->
 </body>
-</html>
+</html>