UNPKG

@nent/core

Version:

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

1,540 lines 57.7 kB
{ "version": 1.1, "tags": [ { "name": "n-action", "description": { "kind": "markdown", "value": "This element just holds data to express the actionEvent to fire. This element\nshould always be the child of an n-action-activator." }, "attributes": [ { "name": "command", "description": "The command to execute." }, { "name": "topic", "description": "This is the topic this action-command is targeting." }, { "name": "when", "description": "A predicate to evaluate prior to sending the action." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-action" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-action" } ] }, { "name": "n-action-activator", "description": { "kind": "markdown", "value": "This element defines how or when a group of actions are\nactivated. The actions activated must be included between\nthis elements tags." }, "attributes": [ { "name": "activate", "description": "The activation strategy to use for the contained actions.", "values": [ { "name": "at-time" }, { "name": "at-time-end" }, { "name": "on-element-event" }, { "name": "on-enter" }, { "name": "on-exit" }, { "name": "on-render" } ] }, { "name": "debug", "description": "Turn on debug statements for load, update and render events." }, { "name": "once", "description": "Limit the activation to ONCE. This could be helpful if an action\nhas side-effects if it is run multiple times.\n\nNote: the activation\nstate is stored in memory and does not persist across refreshes." }, { "name": "target-element", "description": "The element or elements to watch for events when using the OnElementEvent\nactivation strategy. This element uses the HTML Element querySelectorAll\nfunction to find the element/s based on the query in this attribute.\n\nIf left blank, this element looks for child elements matching:\n'a,button,input[type=button]'\n\nFor use with activate=\"on-element-event\" and \"at-time\"" }, { "name": "target-event", "description": "This is the name of the event/s to listen to on the target element\nseparated by comma." }, { "name": "time", "description": "The time, in seconds at which the contained actions should be submitted.\n\nFor use with activate=\"at-time\" Only!" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-action-activator" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-action-activator" } ] }, { "name": "n-app", "description": { "kind": "markdown", "value": "This component enables app services. These are console logging,\ntheming and event-delegation. As well as a plugin system to\nmanage a UI kit to add components like Modals, Drawers,\nmenus, etc." }, "attributes": [ { "name": "app-description", "description": "This is the application default page description." }, { "name": "app-keywords", "description": "This is the application default page keywords." }, { "name": "app-title", "description": "This is the application / site title.\nIf the views have titles,\nthis is added as a suffix." }, { "name": "debug", "description": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-app" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-app" } ] }, { "name": "n-app-analytics", "description": { "kind": "markdown", "value": "This element serves as a proxy to delegate event-based\nfunctions to be consumed by various analytics snippets." }, "attributes": [ { "name": "debug", "description": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-app-analytics" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-app-analytics" } ] }, { "name": "n-app-share", "description": { "kind": "markdown", "value": "This element leverages the browser's web-share\nAPI to give the application a native-app feel." }, "attributes": [ { "name": "headline", "description": "Headline for the share" }, { "name": "text", "description": "The textual body of web share" }, { "name": "url", "description": "The URL we are sharing" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-app-share" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-app-share" } ] }, { "name": "n-app-theme", "description": { "kind": "markdown", "value": "This element checks for the preferred light/dark theme preference of the\nuser and sets the ui state: theme, accordingly." }, "attributes": [ { "name": "dark-class", "description": "Change the class name that is added to the\ntarget element when the theme is determined to\nbe dark." }, { "name": "display", "description": "Display the user's system preference." }, { "name": "switch", "description": "This element displays the current theme,\nunless in switch-mode, it will show the opposite." }, { "name": "target-element", "description": "Change the element that is decorated with\nthe dark-mode class" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-app-theme" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-app-theme" } ] }, { "name": "n-app-theme-switch", "description": { "kind": "markdown", "value": "This element displays a checkbox to control the\ndark-theme setting applied to the ui.\n\nDefault: user-preference" }, "attributes": [ { "name": "input-class", "description": "The class to add to the inner input." }, { "name": "input-id", "description": "The inner input ID" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-app-theme-switch" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-app-theme-switch" } ] }, { "name": "n-audio", "description": { "kind": "markdown", "value": "Use this element only once per page to enable audio features.\nIt will add a CDN reference to Howler.js:\n<https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.core.min.js>" }, "attributes": [ { "name": "data-provider", "description": "Experimental support for providing audio-data in the\ndata-provider system." }, { "name": "debug", "description": "Use debug for verbose logging. Useful for figuring\nthings out." }, { "name": "display", "description": "The display mode enabled shows player state and stats.\nNo track information or duration is to be displayed." }, { "name": "howler-version", "description": "The Howler.js Script Reference" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio" } ] }, { "name": "n-audio-action-music", "description": { "kind": "markdown", "value": "This element represents an action to be fired. This\nspecialized action encapsulates required parameters\nneeded for audio-based actions, for music." }, "attributes": [ { "name": "command", "description": "The command to execute.", "values": [ { "name": "mute" }, { "name": "pause" }, { "name": "resume" }, { "name": "seek" }, { "name": "start" }, { "name": "volume" } ] }, { "name": "topic", "description": "Readonly topic", "values": [ { "name": "audio" } ] }, { "name": "track-id", "description": "The track to target." }, { "name": "value", "description": "The value payload for the command." }, { "name": "when", "description": "A predicate to evaluate prior to sending the action." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio-action-music" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio-action-music" } ] }, { "name": "n-audio-action-music-load", "description": { "kind": "markdown", "value": "This element declares audio used within this \\<n-view-prompt\\> route.\nThe \\<n-audio-action-sound-load\\> instructs the player to load audio files\nwhile defining play behaviors.\n\nThe audio player will pre-load or play when the route is active.\nThe player manages them according to their settings." }, "attributes": [ { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "discard", "description": "The discard strategy the player should use for this file.", "values": [ { "name": "next" }, { "name": "none" }, { "name": "route" } ] }, { "name": "loop", "description": "Set this to true to have the audio file loop." }, { "name": "mode", "description": "This is the loading strategy that determines\nwhat it should do after the file is retrieved.", "values": [ { "name": "load" }, { "name": "play" }, { "name": "queue" } ] }, { "name": "src", "description": "The path to the audio-file." }, { "name": "track-id", "description": "The identifier for this music track" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio-action-music-load" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio-action-music-load" } ] }, { "name": "n-audio-action-sound", "description": { "kind": "markdown", "value": "This element represents an action to be fired. This\nspecialized action encapsulates required parameters\nneeded for audio-based actions, for sound." }, "attributes": [ { "name": "command", "description": "The command to execute.", "values": [ { "name": "mute" }, { "name": "pause" }, { "name": "resume" }, { "name": "seek" }, { "name": "start" }, { "name": "volume" } ] }, { "name": "topic", "description": "Readonly topic", "values": [ { "name": "audio" } ] }, { "name": "track-id", "description": "The track to target." }, { "name": "value", "description": "The value payload for the command." }, { "name": "when", "description": "A predicate to evaluate prior to sending the action." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio-action-sound" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio-action-sound" } ] }, { "name": "n-audio-action-sound-load", "description": { "kind": "markdown", "value": "This element declares audio used within this \\<n-view-prompt\\> route.\nThe \\<n-audio-action-sound-load\\> instructs the player to load audio files\nwhile defining play behaviors.\n\nThe audio player will pre-load or play when the route is active.\nThe player manages them according to their settings." }, "attributes": [ { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "discard", "description": "The discard strategy the player should use for this file.", "values": [ { "name": "next" }, { "name": "none" }, { "name": "route" } ] }, { "name": "mode", "description": "This is the loading strategy that determines\nwhat it should do after the file is retrieved.", "values": [ { "name": "load" }, { "name": "play" }, { "name": "queue" } ] }, { "name": "src", "description": "The path to the audio-file." }, { "name": "track-id", "description": "The identifier for this music track" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio-action-sound-load" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio-action-sound-load" } ] }, { "name": "n-audio-switch", "description": { "kind": "markdown", "value": "This element exposes a checkbox to enable or disable global audio for background sounds and video." }, "attributes": [ { "name": "data-provider", "description": "The data provider to store the audio state in." }, { "name": "input-class", "description": "Any classes to add to the input-element directly." }, { "name": "input-id", "description": "The id field to add to the input-element directly." }, { "name": "setting", "description": "Which state property this switch controls.", "values": [ { "name": "enabled" }, { "name": "muted" } ] } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-audio-switch" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-audio-switch" } ] }, { "name": "n-content", "description": { "kind": "markdown", "value": "This component should surround the inner-content of a remote HTML file that can be prioritized during SPA navigation." }, "attributes": [], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content" } ] }, { "name": "n-content-include", "description": { "kind": "markdown", "value": "This element fetches remote HTML and renders it safely and directly\ninto the page when and where you tell it too, as soon as it renders." }, "attributes": [ { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "json", "description": "The JSONata expression to select the HTML from a json response.\nsee <https://try.jsonata.org> for more info." }, { "name": "mode", "description": "Cross Origin Mode", "values": [ { "name": "cors" }, { "name": "navigate" }, { "name": "no-cors" }, { "name": "same-origin" } ] }, { "name": "resolve-tokens", "description": "Before rendering HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance." }, { "name": "src", "description": "Remote Template URL" }, { "name": "when", "description": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-include" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-include" } ] }, { "name": "n-content-markdown", "description": { "kind": "markdown", "value": "This element converts markdown text to HTML. It can render\nfrom an inline-template or from a remote source." }, "attributes": [ { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "json", "description": "The JSONata expression to select the markdown from a json response.\nsee <https://try.jsonata.org> for more info." }, { "name": "mode", "description": "Cross Origin Mode", "values": [ { "name": "cors" }, { "name": "navigate" }, { "name": "no-cors" }, { "name": "same-origin" } ] }, { "name": "no-cache", "description": "Force render with data & route changes." }, { "name": "resolve-tokens", "description": "Before rendering HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance." }, { "name": "src", "description": "Remote Template URL" }, { "name": "when", "description": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-markdown" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-markdown" } ] }, { "name": "n-content-reference", "description": { "kind": "markdown", "value": "This element makes a single reference to script and css sources. It can\nbe used by HTML fragment to ensure a reference is made, without worrying\nthat it will create duplicate references." }, "attributes": [ { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "inline", "description": "When inline the link/script tags are rendered in-place\nrather than added to the head." }, { "name": "module", "description": "Import the script file as a module." }, { "name": "no-module", "description": "Declare the script only for use when\nmodules aren't supported" }, { "name": "script-src", "description": "The script file to reference." }, { "name": "style-src", "description": "The css file to reference" }, { "name": "timeout", "description": "Timeout (in milliseconds) to wait for the references\nto load." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-reference" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-reference" } ] }, { "name": "n-content-repeat", "description": { "kind": "markdown", "value": "This tag renders a template for each item in the configured array.\nThe item template uses value expressions to insert data from any\ndata provider as well as the item in the array." }, "attributes": [ { "name": "debug", "description": "Turn on debug statements for load, update and render events." }, { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "filter", "description": "The JSONata query to filter the json items\nsee <https://try.jsonata.org> for more info." }, { "name": "items", "description": "The array-string or data expression to obtain a collection for rendering the template.\n{{session:cart.items}}" }, { "name": "items-src", "description": "The URL to remote JSON collection to use for the items." }, { "name": "no-cache", "description": "Force render with data & route changes." }, { "name": "when", "description": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-repeat" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-repeat" } ] }, { "name": "n-content-reveal", "description": { "kind": "markdown", "value": "Use this element to add a little flair to any HTML.\nIt creates an entrance animation using the configured\nattributes to add pop to any page." }, "attributes": [ { "name": "animation-distance", "description": "How far the element moves in the animation (% of element width/height)" }, { "name": "delay", "description": "How long to delay the animation (ms)" }, { "name": "direction", "description": "Direction the element moves when animating in", "values": [ { "name": "down" }, { "name": "left" }, { "name": "right" }, { "name": "up" } ] }, { "name": "duration", "description": "How long the animation runs (ms)" }, { "name": "trigger-distance", "description": "How much of the element must be visible before it animates (% of element height)" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-reveal" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-reveal" } ] }, { "name": "n-content-show", "description": { "kind": "markdown", "value": "This element conditionally renders child elements based on the\nconfigured predicate applied to the when value predicate.\nTo learn more about predicates, check out the\nexpressions documentation." }, "attributes": [ { "name": "when", "description": "The data expression to obtain a predicate for conditionally rendering\nthe inner-contents of this element." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-show" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-show" } ] }, { "name": "n-content-template", "description": { "kind": "markdown", "value": "Render data directly into HTML using declarative expressions.\nThis element renders the expression with all data-tokens\nreplaced with the values provided by the provider." }, "attributes": [ { "name": "debug", "description": "Turn on debug statements for load, update and render events." }, { "name": "defer-load", "description": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute." }, { "name": "filter", "description": "The JSONata query to filter the json items\nsee <https://try.jsonata.org> for more info." }, { "name": "graphql", "description": "When declared, the child script tag is required and should be\nthe query text for the request. Also, this forces the HTTP\nmethod to 'POST'." }, { "name": "mode", "description": "Cross Origin Mode", "values": [ { "name": "cors" }, { "name": "navigate" }, { "name": "no-cors" }, { "name": "same-origin" } ] }, { "name": "no-cache", "description": "Force render with data & route changes." }, { "name": "src", "description": "The URL to remote JSON data to bind to this template" }, { "name": "text", "description": "The data expression to obtain a value for rendering as inner-text for this element." }, { "name": "when", "description": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-content-template" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-content-template" } ] }, { "name": "n-data", "description": { "kind": "markdown", "value": "This element enables the Data Provider system. It hosts\nthe action-listener that registers providers. Add this tag\nto that page to enable token-replacement." }, "attributes": [ { "name": "debug", "description": "Turn on debugging to get helpful messages from the\ndata action systems." }, { "name": "provider-timeout", "description": "The wait-time, in seconds to wait for\nun-registered data providers found in an expression.\nThis is to accommodate a possible lag between\nevaluation before the first predicate\nand the registration process." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-data" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-data" } ] }, { "name": "n-data-cookie", "description": { "kind": "markdown", "value": "This element enables the *Cookie Data Provider*,\nafter requesting consent from the user. The consent\nmessage and the accept/reject button are customizable." }, "attributes": [ { "name": "name", "description": "Provider name to use in nent expressions." }, { "name": "skip-consent", "description": "When skipConsent is true, the accept-cookies banner will not\nbe displayed before accessing cookie-data." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-data-cookie" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-data-cookie" } ] }, { "name": "n-data-session", "description": { "kind": "markdown", "value": "This element enables the **Session Data Provider**.\nIt leverages the short-lived browser storage." }, "attributes": [ { "name": "key-prefix", "description": "The key prefix to use in storage" }, { "name": "name", "description": "Provider name to use in nent expressions." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-data-session" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-data-session" } ] }, { "name": "n-data-storage", "description": { "kind": "markdown", "value": "This element enables the **Storage Data Provider**, that\nleverages the browsers 'long-term' data storage." }, "attributes": [ { "name": "key-prefix", "description": "The key prefix to use in storage" }, { "name": "name", "description": "Provider name to use in nent expressions." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-data-storage" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-data-storage" } ] }, { "name": "n-elements", "description": { "kind": "markdown", "value": "This element enables element manipulation through the n-actions element.\nAdd it to the page to perform actions like 'add-css', toggle\nattributes or to execute functions on the DOM without code." }, "attributes": [ { "name": "debug", "description": "Turn on debug statements for load, update and render events." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-elements" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-elements" } ] }, { "name": "n-presentation", "description": { "kind": "markdown", "value": "This element encapsulates a timed presentation. This element uses\na child n-presentation-timer or n-video element to create time-events\nthen it delegates those events to time-based action-activators.\n\nIf enabled, the n-attributes for time will also get processed. This\nelement also has the ability to go to the next route using the active\nroute's 'goNext' function." }, "attributes": [ { "name": "analytics-event", "description": "Send analytics view-time percentages for this presentation\nusing the event name" }, { "name": "debug", "description": "To debug timed elements, set this value to true." }, { "name": "next-after", "description": "Go to the next view after the timer ends" }, { "name": "timer-element", "description": "The element selector for the timer-element to\nbind for interval events. If left blank, it looks\nfirst an n-timer, then for the first n-video.\n\nIf none are found, it creates one manually and starts\nit immediately" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-presentation" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-presentation" } ] }, { "name": "n-presentation-action", "description": { "kind": "markdown", "value": "This specialized action contains the time attribute,\nallowing it to be activated directly within the n-presentation\nelement (no n-action-activator needed)" }, "attributes": [ { "name": "command", "description": "The command to execute." }, { "name": "time", "description": "The time this should execute", "values": [ { "name": "end" } ] }, { "name": "topic", "description": "This is the topic this action-command is targeting." }, { "name": "when", "description": "A predicate to evaluate prior to sending the action." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-presentation-action" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-presentation-action" } ] }, { "name": "n-presentation-timer", "description": { "kind": "markdown", "value": "This element creates a timer for the presentation\nelement to use in place of a video, to time actions\nor manipulate HTML by time." }, "attributes": [ { "name": "debug", "description": "To debug timed elements, set this value to true." }, { "name": "defer-load", "description": "If set, disables auto-starting the timer\non render. This will be removed if in a view,\nwhen the view is activated or when the start\nmethod is called." }, { "name": "display", "description": "Display elapsed seconds" }, { "name": "duration", "description": "Duration before the timer stops and raises\nthe ended event (seconds). 0 = never" }, { "name": "interval", "description": "Interval in milliseconds to request\nbetween the getAnimationFrame. This\naffects the precision." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-presentation-timer" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-presentation-timer" } ] }, { "name": "n-video", "description": { "kind": "markdown", "value": "This element enables the UI services. These are typically\nweb element plug-ins to manage things like Modals, Drawers,\nmenus, etc. The basic provider is used to toggle dark-mode." }, "attributes": [ { "name": "debug", "description": "To debug timed elements, set this value to true." }, { "name": "duration-property", "description": "Provide the element property name that\nholds the duration time in seconds.\nDefault is duration" }, { "name": "end-event", "description": "Provider the end event name.\nDefault is ended" }, { "name": "ready-event", "description": "Provide the ready event name.\nDefault is ready" }, { "name": "target-element", "description": "Provide the element selector for the media object that can provide\ntime-updates and media-end events." }, { "name": "time-event", "description": "Provide the time-event name.\nDefault is timeupdate" }, { "name": "time-property", "description": "Provide the element property name that\nholds the current time in seconds.\nDefault is currentTime" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-video" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-video" } ] }, { "name": "n-video-switch", "description": { "kind": "markdown", "value": "This element displays a checkbox to control the autoplay setting,\nused for video playback - as well as automatic navigation to the\nnext page, when a video ends. Default: enabled" }, "attributes": [ { "name": "data-provider", "description": "The data provider to store the audio-enabled state in." }, { "name": "input-class", "description": "Any classes to add to the input-element directly." }, { "name": "input-id", "description": "The id field to add to the input-element directly." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-video-switch" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-video-switch" } ] }, { "name": "n-view", "description": { "kind": "markdown", "value": "The View element holds a segment of content visible only when\na URL path matches. It defines a route and its content.\nThis provides the declarative mechanism\nfor in-page content/component routing by URL." }, "attributes": [ { "name": "content-src", "description": "Remote URL for this Route's content." }, { "name": "debug", "description": "Turn on debug statements for load, update and render events." }, { "name": "exact", "description": "The path for this route should only be matched\nwhen it is exact." }, { "name": "mode", "description": "Cross Origin Mode if the content is pulled from\na remote location", "values": [ { "name": "cors" }, { "name": "navigate" }, { "name": "no-cors" }, { "name": "same-origin" } ] }, { "name": "no-cache", "description": "Force render with data & route changes." }, { "name": "page-description", "description": "The page description for this view." }, { "name": "page-keywords", "description": "The keywords to add to the keywords meta-tag for this view." }, { "name": "page-robots", "description": "The robots instruction for search indexing", "values": [ { "name": "all" }, { "name": "nofollow" }, { "name": "noindex" }, { "name": "none" } ] }, { "name": "page-title", "description": "The title for this view. This is prefixed\nbefore the app title configured in n-views" }, { "name": "path", "description": "The path for this route, including the parent's\nroutes, excluding the router's root." }, { "name": "resolve-tokens", "description": "Before rendering remote HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance.\n\nIMPORTANT: ONLY WORKS ON REMOTE HTML" }, { "name": "scroll-top-offset", "description": "Header height or offset for scroll-top on this\nview." }, { "name": "src", "description": "Remote URL for this route's HTML. HTML from this\nURL will be not be assigned to any slot.\n\nYou can add slot='content' to any containers\nwithin this HTML if you have a mix of HTML for\nthis exact-route and its children." }, { "name": "transition", "description": "Navigation transition between routes.\nThis is a CSS animation class." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-view" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-view" } ] }, { "name": "n-view-detect", "description": { "kind": "markdown", "value": "Hide or show content based on the active route." }, "attributes": [ { "name": "exact", "description": "Only active on the exact href match,\nand not on child routes" }, { "name": "route", "description": "The route that will toggle the active slot of this component" }, { "name": "route-match", "description": "Optional Regex value to route match on" }, { "name": "strict", "description": "Only active on the exact href match\nusing every aspect of the URL including\nparameters." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-view-detect" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-view-detect" } ] }, { "name": "n-view-link", "description": { "kind": "markdown", "value": "The element should be used in-place of an `a` tag to navigate without\nrefreshing the page. This element supports an active-class that will\nbe applied when the route in **href** matches the route of the app.\n\nThis is helpful for displaying active routes in menus, bread-crumbs and tabs." }, "attributes": [ { "name": "active-class", "description": "The class to add when the matching route is active\nin the browser" }, { "name": "debug", "description": "Provide log messages for path matching." }, { "name": "exact", "description": "Only active on the exact href match,\nand not on child routes" }, { "name": "link-class", "description": "The class to add to the anchor tag." }, { "name": "path", "description": "The destination route for this link" }, { "name": "strict", "description": "Only active on the exact href match\nusing every aspect of the URL including\nparameters." }, { "name": "validate", "description": "Validates any current-route inputs before navigating. Disables\nnavigation if any inputs are invalid." } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-view-link" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-view-link" } ] }, { "name": "n-view-link-back", "description": { "kind": "markdown", "value": "This component automatically links to the previous route, as defined in the HTML. It first goes to the previous sibling route. If none, then it links to the parent route." }, "attributes": [ { "name": "link-class", "description": "The class to add to the anchor tag." }, { "name": "text", "description": "The link text" } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-view-link-back" }, { "name": "Source", "url": "https://github.com/nent/nent/tree/main/packages/core/src/components/n-view-link-back" } ] }, { "name": "n-view-link-list", "description": { "kind": "markdown", "value": "Display a list of routes related to the current route.\nModes:\n**siblings**: all routes at the same depth level (nav)\n**parents**: all parent routes. (breadcrumbs)\n**children**: all child routes within a hierarchy. (sub-menu)" }, "attributes": [ { "name": "active-class", "description": "The active-class to use with the n-view-link elements." }, { "name": "exclude-root", "description": "Specify if the '/' route should\nbe skipped in the list." }, { "name": "item-class", "description": "The list-item-class to use with the li tag" }, { "name": "link-class", "description": "The class to add to the anchor tag." }, { "name": "list-class", "description": "The list-class to use with the UL tag" }, { "name": "mode", "description": "The display mode for which routes to display.", "values": [ { "name": "children" }, { "name": "parents" }, { "name": "siblings" } ] } ], "references": [ { "name": "Documentation", "url": "https://nent.dev/components/n-view-link-list" }, { "name": "Source",