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

@aquera/nile-elements 0.1.67-beta-2.4 → 0.1.67-beta-2.5

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

package/demo/index.html CHANGED Viewed

@@ -3,298 +3,37 @@
 <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;
-}
+  nile-button {
+    flex: 0 0 auto;
+    height: 38px;
+  }
 </style>
 <body>
-  <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-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> -->
-        <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>
-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);
-  }
-});
-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);
-});
-  </script>
-  <!-- <script type="module">
-     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 }));
-    });
-  </script> -->
+    <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>
 </body>
-</html>
+</html>

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

Binary file