|
@@ -0,0 +1,1472 @@
|
|
|
|
|
+<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
+<!-- Web Awesome Control Definitions for UI Layout Definition Format -->
|
|
|
|
|
+<!-- Version: 1.5 - Web Awesome Components (formerly Shoelace) -->
|
|
|
|
|
+<patterns xmlns="http://quadarax.com/ui-layout-webawesome-controls"
|
|
|
|
|
+ schema-version="1.5"
|
|
|
|
|
+ target-platform="web">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Base Web Component -->
|
|
|
|
|
+ <control name="WebAwesomeComponent" type="composite" category="web-specific">
|
|
|
|
|
+ <description>Base Web Awesome component with common attributes and behaviors</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>depends-on-implementation</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <platform-constraints>
|
|
|
|
|
+ <platform-constraint platform="web" min-version="3.0" feature-required="custom-elements" />
|
|
|
|
|
+ </platform-constraints>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="class" type="string" default="" category="styling" />
|
|
|
|
|
+ <attribute name="style" type="string" default="" category="styling" />
|
|
|
|
|
+ <attribute name="id" type="string" default="" category="identification" />
|
|
|
|
|
+ <attribute name="data-*" type="string" default="" category="data" />
|
|
|
|
|
+ <attribute name="aria-*" type="string" default="" category="accessibility" />
|
|
|
|
|
+ <attribute name="dir" type="enum" values="ltr,rtl,auto" default="ltr" category="localization" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" category="localization" />
|
|
|
|
|
+ <attribute name="hidden" type="bool" default="false" category="display" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-load" description="Emitted when component is loaded" />
|
|
|
|
|
+ <event name="wa-error" description="Emitted when an error occurs" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <accessibility>
|
|
|
|
|
+ <requirement standard="wcag" level="aa" description="ARIA support" required="true" />
|
|
|
|
|
+ <requirement standard="wcag" level="aa" description="Keyboard navigation" required="true" />
|
|
|
|
|
+ </accessibility>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ACTION CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-button" type="button" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Buttons represent actions that are available to the user</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon,wa-spinner</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>label,start,end</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="variant" type="enum" values="default,primary,brand,success,neutral,warning,danger" default="default" />
|
|
|
|
|
+ <attribute name="appearance" type="enum" values="filled,outlined,text" default="filled" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="caret" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="loading" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="pill" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="circle" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="type" type="enum" values="button,submit,reset" default="button" />
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="href" type="string" default="" />
|
|
|
|
|
+ <attribute name="target" type="enum" values="_self,_blank,_parent,_top" default="_self" />
|
|
|
|
|
+ <attribute name="rel" type="string" default="noreferrer noopener" />
|
|
|
|
|
+ <attribute name="download" type="string" default="" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="formaction" type="string" default="" />
|
|
|
|
|
+ <attribute name="formenctype" type="string" default="" />
|
|
|
|
|
+ <attribute name="formmethod" type="enum" values="post,get" default="" />
|
|
|
|
|
+ <attribute name="formnovalidate" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="formtarget" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-click" description="Emitted when the button is clicked" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when the button gains focus" />
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when the button loses focus" />
|
|
|
|
|
+ <command name="click" description="Simulates a click on the button" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the button" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the button" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-button-group" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Button groups arrange buttons into horizontal or vertical groups</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-button</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="orientation" type="enum" values="horizontal,vertical" default="horizontal" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-copy-button" type="button" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Copies text data to the clipboard when clicked</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="from" type="string" default="" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="copy-label" type="string" default="Copy" />
|
|
|
|
|
+ <attribute name="success-label" type="string" default="Copied" />
|
|
|
|
|
+ <attribute name="error-label" type="string" default="Error" />
|
|
|
|
|
+ <attribute name="feedback-duration" type="int" default="1000" min="0" />
|
|
|
|
|
+ <attribute name="tooltip-placement" type="enum" values="top,right,bottom,left" default="top" />
|
|
|
|
|
+ <attribute name="hoist" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-copy" description="Emitted when content is copied successfully" />
|
|
|
|
|
+ <event name="wa-error" description="Emitted when copy fails" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-dropdown" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Dropdowns expose contextual overlays for displaying lists of links and more</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-button,wa-menu,wa-dropdown-item</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>trigger</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="bottom-start" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="stay-open-on-select" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="containing-element" type="string" default="" />
|
|
|
|
|
+ <attribute name="distance" type="int" default="0" />
|
|
|
|
|
+ <attribute name="skidding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="hoist" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when the dropdown opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after the dropdown opens and animations complete" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when the dropdown closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after the dropdown closes and animations complete" />
|
|
|
|
|
+ <command name="show" description="Shows the dropdown" />
|
|
|
|
|
+ <command name="hide" description="Hides the dropdown" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-dropdown-item" type="menu" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Individual item in a dropdown menu</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-dropdown,wa-menu</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="type" type="enum" values="normal,checkbox,radio" default="normal" />
|
|
|
|
|
+ <attribute name="checked" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-select" description="Emitted when the item is selected" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-qr-code" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Generates QR codes dynamically</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="int" default="128" min="16" max="1024" />
|
|
|
|
|
+ <attribute name="fill" type="color" default="black" />
|
|
|
|
|
+ <attribute name="background" type="color" default="white" />
|
|
|
|
|
+ <attribute name="radius" type="decimal" default="0" min="0" max="0.5" />
|
|
|
|
|
+ <attribute name="error-correction" type="enum" values="L,M,Q,H" default="M" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- FEEDBACK & STATUS CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-badge" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Badges are small status indicators</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger" default="primary" />
|
|
|
|
|
+ <attribute name="pill" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="pulse" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-callout" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Callouts display informative messages or alerts</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>icon</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger" default="primary" />
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="closable" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="duration" type="string" default="Infinity" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when the callout opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after the callout opens" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when the callout closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after the callout closes" />
|
|
|
|
|
+ <command name="toast" description="Displays the callout as a toast notification" />
|
|
|
|
|
+ <command name="show" description="Shows the callout" />
|
|
|
|
|
+ <command name="hide" description="Hides the callout" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-progress-bar" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Progress bars show the progress of a determinate or indeterminate operation</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="int" default="0" min="0" max="100" />
|
|
|
|
|
+ <attribute name="indeterminate" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-progress-ring" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Progress rings show the progress of an operation in a circular format</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="int" default="0" min="0" max="100" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-skeleton" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Skeletons indicate content is loading</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="effect" type="enum" values="none,sheen,pulse" default="none" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-spinner" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Spinners indicate an operation is in progress</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="style" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tag" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Tags are used to label items</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger,text" default="neutral" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="pill" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="removable" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-remove" description="Emitted when the tag is removed" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tooltip" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Tooltips display additional information on hover</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="content" type="string" default="" />
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,top-start,top-end,right,right-start,right-end,bottom,bottom-start,bottom-end,left,left-start,left-end" default="top" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="distance" type="int" default="8" />
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="skidding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="trigger" type="string" default="hover focus" />
|
|
|
|
|
+ <attribute name="hoist" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when tooltip shows" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after tooltip shows" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when tooltip hides" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after tooltip hides" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- FORM CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-checkbox" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Checkboxes allow users to toggle between checked and unchecked states</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="string" default="on" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="checked" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="indeterminate" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-change" description="Emitted when checked state changes" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when user interacts with checkbox" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the checkbox" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the checkbox" />
|
|
|
|
|
+ <command name="click" description="Simulates a click on the checkbox" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <validation>
|
|
|
|
|
+ <rule name="required" type="required" message="This field is required" severity="error" />
|
|
|
|
|
+ </validation>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-color-picker" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Color pickers allow users to select a color</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="string" default="#ffffff" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="format" type="enum" values="hex,rgb,hsl,hsv" default="hex" />
|
|
|
|
|
+ <attribute name="inline" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="noformat" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="hoist" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="opacity" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="uppercase" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="swatches" type="string" default="" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when color picker loses focus" />
|
|
|
|
|
+ <event name="wa-change" description="Emitted when color value changes" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when color picker gains focus" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when color value is being changed" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the color picker" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the color picker" />
|
|
|
|
|
+ <command name="getFormattedValue" description="Returns the formatted color value" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-input" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Inputs allow users to enter text</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>label,prefix,suffix,clear-icon,show-password-icon,hide-password-icon,help-text</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="type" type="enum" values="date,datetime-local,email,number,password,search,tel,text,time,url" default="text" />
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="filled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="pill" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="clearable" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="placeholder" type="string" default="" />
|
|
|
|
|
+ <attribute name="readonly" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="password-toggle" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="password-visible" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="no-spin-buttons" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="pattern" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="autocapitalize" type="enum" values="off,none,on,sentences,words,characters" default="off" />
|
|
|
|
|
+ <attribute name="autocorrect" type="string" default="" />
|
|
|
|
|
+ <attribute name="autocomplete" type="string" default="" />
|
|
|
|
|
+ <attribute name="autofocus" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="enterkeyhint" type="string" default="" />
|
|
|
|
|
+ <attribute name="spellcheck" type="bool" default="true" />
|
|
|
|
|
+ <attribute name="inputmode" type="string" default="" />
|
|
|
|
|
+ <attribute name="min" type="string" default="" />
|
|
|
|
|
+ <attribute name="max" type="string" default="" />
|
|
|
|
|
+ <attribute name="minlength" type="int" default="" />
|
|
|
|
|
+ <attribute name="maxlength" type="int" default="" />
|
|
|
|
|
+ <attribute name="step" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when input loses focus" />
|
|
|
|
|
+ <event name="wa-change" description="Emitted when input value changes" />
|
|
|
|
|
+ <event name="wa-clear" description="Emitted when input is cleared" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when input gains focus" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when input value is being changed" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the input" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the input" />
|
|
|
|
|
+ <command name="select" description="Selects all text in the input" />
|
|
|
|
|
+ <command name="setSelectionRange" description="Sets the selection range" />
|
|
|
|
|
+ <command name="setRangeText" description="Replaces a range of text" />
|
|
|
|
|
+ <command name="showPicker" description="Shows the browser picker for date/time inputs" />
|
|
|
|
|
+ <command name="stepUp" description="Increments the value by step" />
|
|
|
|
|
+ <command name="stepDown" description="Decrements the value by step" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <validation>
|
|
|
|
|
+ <rule name="required" type="required" message="This field is required" severity="error" />
|
|
|
|
|
+ <rule name="pattern" type="pattern" pattern="{pattern}" message="Invalid format" severity="error" />
|
|
|
|
|
+ <rule name="minlength" type="length" message="Too short" severity="error" />
|
|
|
|
|
+ <rule name="maxlength" type="length" message="Too long" severity="error" />
|
|
|
|
|
+ </validation>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-option" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Options are used within wa-select</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-select</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-radio" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Radio buttons allow users to select a single option from a group</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-radio-group,any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="checked" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when radio loses focus" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when radio gains focus" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-radio-group" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Radio groups organize radio buttons</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-radio,wa-radio-button</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="name" type="string" default="option" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-change" description="Emitted when selection changes" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when user interacts with radio group" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <validation>
|
|
|
|
|
+ <rule name="required" type="required" message="Please select an option" severity="error" />
|
|
|
|
|
+ </validation>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-rating" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Ratings allow users to rate something</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="decimal" default="0" min="0" />
|
|
|
|
|
+ <attribute name="max" type="int" default="5" min="1" />
|
|
|
|
|
+ <attribute name="precision" type="decimal" default="1" min="0.1" />
|
|
|
|
|
+ <attribute name="readonly" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="get-symbol" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-change" description="Emitted when rating changes" />
|
|
|
|
|
+ <event name="wa-hover" description="Emitted when hovering over rating" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the rating" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the rating" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-select" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Selects allow users to choose one or more items from a dropdown</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-option,wa-divider</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>label,prefix,clear-icon,expand-icon,tag,help-text</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="multiple" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="max-options-visible" type="int" default="3" min="0" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="placeholder" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="hoist" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="filled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="pill" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,bottom" default="bottom" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="clearable" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-change" description="Emitted when selection changes" />
|
|
|
|
|
+ <event name="wa-clear" description="Emitted when selection is cleared" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when user interacts with select" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when select gains focus" />
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when select loses focus" />
|
|
|
|
|
+ <event name="wa-show" description="Emitted when dropdown opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after dropdown opens" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when dropdown closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after dropdown closes" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="show" description="Shows the dropdown" />
|
|
|
|
|
+ <command name="hide" description="Hides the dropdown" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the select" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the select" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <validation>
|
|
|
|
|
+ <rule name="required" type="required" message="Please select an option" severity="error" />
|
|
|
|
|
+ </validation>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-slider" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Sliders allow users to select a value from a range</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="decimal" default="0" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="min" type="decimal" default="0" />
|
|
|
|
|
+ <attribute name="max" type="decimal" default="100" />
|
|
|
|
|
+ <attribute name="step" type="decimal" default="1" />
|
|
|
|
|
+ <attribute name="tooltip" type="enum" values="top,bottom,none" default="top" />
|
|
|
|
|
+ <attribute name="tooltip-formatter" type="string" default="" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when slider loses focus" />
|
|
|
|
|
+ <event name="wa-change" description="Emitted when slider value changes" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when slider gains focus" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when slider is being dragged" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the slider" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the slider" />
|
|
|
|
|
+ <command name="stepUp" description="Increments the value by step" />
|
|
|
|
|
+ <command name="stepDown" description="Decrements the value by step" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-switch" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Switches allow users to toggle between two states</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="string" default="on" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="checked" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when switch loses focus" />
|
|
|
|
|
+ <event name="wa-change" description="Emitted when switch state changes" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when user interacts with switch" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when switch gains focus" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="click" description="Simulates a click on the switch" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the switch" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the switch" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-textarea" type="input" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Textareas allow users to enter multiple lines of text</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="value" type="string" default="" />
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ <attribute name="filled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="placeholder" type="string" default="" />
|
|
|
|
|
+ <attribute name="rows" type="int" default="4" min="1" />
|
|
|
|
|
+ <attribute name="resize" type="enum" values="none,vertical,horizontal,both" default="vertical" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="readonly" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="form" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="minlength" type="int" default="" />
|
|
|
|
|
+ <attribute name="maxlength" type="int" default="" />
|
|
|
|
|
+ <attribute name="autocapitalize" type="string" default="" />
|
|
|
|
|
+ <attribute name="autocorrect" type="string" default="" />
|
|
|
|
|
+ <attribute name="autocomplete" type="string" default="" />
|
|
|
|
|
+ <attribute name="autofocus" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="enterkeyhint" type="string" default="" />
|
|
|
|
|
+ <attribute name="spellcheck" type="bool" default="true" />
|
|
|
|
|
+ <attribute name="inputmode" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-blur" description="Emitted when textarea loses focus" />
|
|
|
|
|
+ <event name="wa-change" description="Emitted when textarea value changes" />
|
|
|
|
|
+ <event name="wa-focus" description="Emitted when textarea gains focus" />
|
|
|
|
|
+ <event name="wa-input" description="Emitted when textarea value is being changed" />
|
|
|
|
|
+ <event name="wa-invalid" description="Emitted when validity changes to invalid" />
|
|
|
|
|
+ <command name="focus" description="Sets focus on the textarea" />
|
|
|
|
|
+ <command name="blur" description="Removes focus from the textarea" />
|
|
|
|
|
+ <command name="select" description="Selects all text in the textarea" />
|
|
|
|
|
+ <command name="setSelectionRange" description="Sets the selection range" />
|
|
|
|
|
+ <command name="setRangeText" description="Replaces a range of text" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ <validation>
|
|
|
|
|
+ <rule name="required" type="required" message="This field is required" severity="error" />
|
|
|
|
|
+ <rule name="minlength" type="length" message="Too short" severity="error" />
|
|
|
|
|
+ <rule name="maxlength" type="length" message="Too long" severity="error" />
|
|
|
|
|
+ </validation>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- IMAGERY CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-animated-image" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Displays animated GIFs and WEBPs that play on hover</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="src" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="alt" type="string" default="" />
|
|
|
|
|
+ <attribute name="play" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-load" description="Emitted when image loads successfully" />
|
|
|
|
|
+ <event name="wa-error" description="Emitted when image fails to load" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-avatar" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Avatars display user profile pictures</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="image" type="string" default="" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="initials" type="string" default="" />
|
|
|
|
|
+ <attribute name="loading" type="enum" values="eager,lazy" default="eager" />
|
|
|
|
|
+ <attribute name="shape" type="enum" values="circle,square,rounded" default="circle" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-carousel" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Carousels display a collection of items</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-carousel-item</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="loop" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="navigation" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="pagination" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="autoplay" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="autoplay-interval" type="int" default="3000" min="0" />
|
|
|
|
|
+ <attribute name="slides-per-page" type="int" default="1" min="1" />
|
|
|
|
|
+ <attribute name="slides-per-move" type="int" default="1" min="1" />
|
|
|
|
|
+ <attribute name="orientation" type="enum" values="horizontal,vertical" default="horizontal" />
|
|
|
|
|
+ <attribute name="mouse-dragging" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-slide-change" description="Emitted when active slide changes" />
|
|
|
|
|
+ <command name="previous" description="Goes to previous slide" />
|
|
|
|
|
+ <command name="next" description="Goes to next slide" />
|
|
|
|
|
+ <command name="goToSlide" description="Goes to specific slide" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-carousel-item" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Individual item within a carousel</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-carousel</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-comparison" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Compare two items side by side</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>before,after</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="position" type="int" default="50" min="0" max="100" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-change" description="Emitted when position changes" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-icon" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Icons are symbols that represent an object, concept, or action</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" />
|
|
|
|
|
+ <attribute name="variant" type="enum" values="solid,regular,light,thin,duotone" default="regular" />
|
|
|
|
|
+ <attribute name="src" type="string" default="" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="library" type="string" default="default" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-load" description="Emitted when icon loads" />
|
|
|
|
|
+ <event name="wa-error" description="Emitted when icon fails to load" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-zoomable-frame" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Frame that allows zooming and panning of content</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="min-zoom" type="decimal" default="0.5" min="0.1" />
|
|
|
|
|
+ <attribute name="max-zoom" type="decimal" default="3" />
|
|
|
|
|
+ <attribute name="zoom" type="decimal" default="1" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-zoom" description="Emitted when zoom level changes" />
|
|
|
|
|
+ <command name="zoomIn" description="Increases zoom level" />
|
|
|
|
|
+ <command name="zoomOut" description="Decreases zoom level" />
|
|
|
|
|
+ <command name="reset" description="Resets zoom to default" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- NAVIGATION CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-breadcrumb" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Breadcrumbs show hierarchy and navigational context</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-breadcrumb-item</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-breadcrumb-item" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Individual item in a breadcrumb trail</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-breadcrumb</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="href" type="string" default="" />
|
|
|
|
|
+ <attribute name="target" type="enum" values="_self,_blank,_parent,_top" default="_self" />
|
|
|
|
|
+ <attribute name="rel" type="string" default="noreferrer noopener" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tab" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Individual tab within a tab group</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-tab-group</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="panel" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="active" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="closable" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-close" description="Emitted when tab close button is clicked" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tab-group" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Tab groups organize content into tabs</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-tab,wa-tab-panel</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,bottom,start,end" default="top" />
|
|
|
|
|
+ <attribute name="activation" type="enum" values="auto,manual" default="auto" />
|
|
|
|
|
+ <attribute name="no-scroll-controls" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-tab-show" description="Emitted when a tab is shown" />
|
|
|
|
|
+ <event name="wa-tab-hide" description="Emitted when a tab is hidden" />
|
|
|
|
|
+ <command name="show" description="Shows a specific tab by name" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tab-panel" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Panel content for a tab</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-tab-group</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="active" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tree" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Trees display hierarchical data</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-tree-item</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="selection" type="enum" values="single,multiple,leaf" default="single" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-selection-change" description="Emitted when selection changes" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-tree-item" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Individual item within a tree</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-tree,wa-tree-item</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-tree-item,any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="expanded" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="selected" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="lazy" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-expand" description="Emitted when item expands" />
|
|
|
|
|
+ <event name="wa-after-expand" description="Emitted after item expands" />
|
|
|
|
|
+ <event name="wa-collapse" description="Emitted when item collapses" />
|
|
|
|
|
+ <event name="wa-after-collapse" description="Emitted after item collapses" />
|
|
|
|
|
+ <event name="wa-lazy-change" description="Emitted when lazy load is triggered" />
|
|
|
|
|
+ <event name="wa-lazy-load" description="Emitted when lazy load completes" />
|
|
|
|
|
+ <command name="getChildrenItems" description="Gets child tree items" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ORGANIZATION CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-card" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Cards contain content and actions about a single subject</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>header,body,footer,image</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-details" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Details show a summary and expand to show content</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content,wa-icon</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>summary,expand-icon,collapse-icon</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="summary" type="string" default="" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when details opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after details opens" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when details closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after details closes" />
|
|
|
|
|
+ <command name="show" description="Shows the details" />
|
|
|
|
|
+ <command name="hide" description="Hides the details" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-dialog" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Dialogs display content in a layer above the page</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>label,header,body,footer</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="modal" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="no-header" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when dialog opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after dialog opens" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when dialog closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after dialog closes" />
|
|
|
|
|
+ <event name="wa-initial-focus" description="Emitted when setting initial focus" />
|
|
|
|
|
+ <event name="wa-request-close" description="Emitted when close is requested" />
|
|
|
|
|
+ <command name="show" description="Shows the dialog" />
|
|
|
|
|
+ <command name="hide" description="Hides the dialog" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-divider" type="display" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Dividers visually separate content</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="vertical" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-drawer" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Drawers slide in from the side of the screen</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>label,header,body,footer</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="open" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="label" type="string" default="" />
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,end,bottom,start" default="end" />
|
|
|
|
|
+ <attribute name="contained" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="no-header" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-show" description="Emitted when drawer opens" />
|
|
|
|
|
+ <event name="wa-after-show" description="Emitted after drawer opens" />
|
|
|
|
|
+ <event name="wa-hide" description="Emitted when drawer closes" />
|
|
|
|
|
+ <event name="wa-after-hide" description="Emitted after drawer closes" />
|
|
|
|
|
+ <event name="wa-initial-focus" description="Emitted when setting initial focus" />
|
|
|
|
|
+ <event name="wa-request-close" description="Emitted when close is requested" />
|
|
|
|
|
+ <command name="show" description="Shows the drawer" />
|
|
|
|
|
+ <command name="hide" description="Hides the drawer" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-page" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>PRO: Page layout component with responsive behavior</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>header,navigation,content,sidebar,footer</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="layout" type="enum" values="default,sidebar-left,sidebar-right,full-width" default="default" />
|
|
|
|
|
+ <attribute name="responsive" type="bool" default="true" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-scroller" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Custom scrollable container</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="horizontal" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="vertical" type="bool" default="true" />
|
|
|
|
|
+ <attribute name="speed" type="decimal" default="1" min="0.1" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-scroll" description="Emitted when scroll position changes" />
|
|
|
|
|
+ <command name="scrollTo" description="Scrolls to specific position" />
|
|
|
|
|
+ <command name="scrollToTop" description="Scrolls to top" />
|
|
|
|
|
+ <command name="scrollToBottom" description="Scrolls to bottom" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-split-panel" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Split panels divide content into resizable sections</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>start,end</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="position" type="int" default="50" min="0" max="100" />
|
|
|
|
|
+ <attribute name="position-in-pixels" type="int" default="" />
|
|
|
|
|
+ <attribute name="vertical" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="primary" type="enum" values="start,end" default="" />
|
|
|
|
|
+ <attribute name="snap" type="string" default="" />
|
|
|
|
|
+ <attribute name="snap-threshold" type="int" default="12" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-reposition" description="Emitted when position changes" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- UTILITY CONTROLS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-animation" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Animates elements declaratively</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="name" type="string" default="none" />
|
|
|
|
|
+ <attribute name="play" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="delay" type="int" default="0" />
|
|
|
|
|
+ <attribute name="direction" type="enum" values="normal,reverse,alternate,alternate-reverse" default="normal" />
|
|
|
|
|
+ <attribute name="duration" type="int" default="1000" />
|
|
|
|
|
+ <attribute name="easing" type="string" default="linear" />
|
|
|
|
|
+ <attribute name="end-delay" type="int" default="0" />
|
|
|
|
|
+ <attribute name="fill" type="enum" values="auto,none,forwards,backwards,both" default="auto" />
|
|
|
|
|
+ <attribute name="iterations" type="string" default="Infinity" />
|
|
|
|
|
+ <attribute name="iteration-start" type="decimal" default="0" />
|
|
|
|
|
+ <attribute name="playback-rate" type="decimal" default="1" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-cancel" description="Emitted when animation is cancelled" />
|
|
|
|
|
+ <event name="wa-finish" description="Emitted when animation finishes" />
|
|
|
|
|
+ <event name="wa-start" description="Emitted when animation starts" />
|
|
|
|
|
+ <command name="cancel" description="Cancels the animation" />
|
|
|
|
|
+ <command name="finish" description="Finishes the animation" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-format-bytes" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Formats bytes as human readable text</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="int" default="0" />
|
|
|
|
|
+ <attribute name="unit" type="enum" values="byte,bit" default="byte" />
|
|
|
|
|
+ <attribute name="display" type="enum" values="short,long,narrow" default="short" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-format-date" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Formats dates in a localized manner</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="date" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" />
|
|
|
|
|
+ <attribute name="weekday" type="enum" values="narrow,short,long" default="" />
|
|
|
|
|
+ <attribute name="era" type="enum" values="narrow,short,long" default="" />
|
|
|
|
|
+ <attribute name="year" type="enum" values="numeric,2-digit" default="" />
|
|
|
|
|
+ <attribute name="month" type="enum" values="numeric,2-digit,narrow,short,long" default="" />
|
|
|
|
|
+ <attribute name="day" type="enum" values="numeric,2-digit" default="" />
|
|
|
|
|
+ <attribute name="hour" type="enum" values="numeric,2-digit" default="" />
|
|
|
|
|
+ <attribute name="minute" type="enum" values="numeric,2-digit" default="" />
|
|
|
|
|
+ <attribute name="second" type="enum" values="numeric,2-digit" default="" />
|
|
|
|
|
+ <attribute name="time-zone-name" type="enum" values="short,long" default="" />
|
|
|
|
|
+ <attribute name="time-zone" type="string" default="" />
|
|
|
|
|
+ <attribute name="hour-format" type="enum" values="auto,12,24" default="auto" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-format-number" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Formats numbers in a localized manner</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="value" type="decimal" default="0" required="true" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" />
|
|
|
|
|
+ <attribute name="type" type="enum" values="currency,decimal,percent" default="decimal" />
|
|
|
|
|
+ <attribute name="no-grouping" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="currency" type="string" default="USD" />
|
|
|
|
|
+ <attribute name="currency-display" type="enum" values="symbol,narrowSymbol,code,name" default="symbol" />
|
|
|
|
|
+ <attribute name="minimum-integer-digits" type="int" default="" min="1" max="21" />
|
|
|
|
|
+ <attribute name="minimum-fraction-digits" type="int" default="" min="0" max="20" />
|
|
|
|
|
+ <attribute name="maximum-fraction-digits" type="int" default="" min="0" max="20" />
|
|
|
|
|
+ <attribute name="minimum-significant-digits" type="int" default="" min="1" max="21" />
|
|
|
|
|
+ <attribute name="maximum-significant-digits" type="int" default="" min="1" max="21" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-include" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Includes external HTML files into the page</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="src" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="mode" type="enum" values="cors,no-cors,same-origin" default="cors" />
|
|
|
|
|
+ <attribute name="allow-scripts" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-load" description="Emitted when content loads successfully" />
|
|
|
|
|
+ <event name="wa-error" description="Emitted when content fails to load" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-mutation-observer" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Declarative interface to the MutationObserver API</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="attr" type="string" default="" />
|
|
|
|
|
+ <attribute name="attr-old-value" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="char-data" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="char-data-old-value" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="child-list" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-mutation" description="Emitted when a mutation occurs" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-popover" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Contextual overlays that display additional content</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>trigger,content</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="top" />
|
|
|
|
|
+ <attribute name="active" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="distance" type="int" default="8" />
|
|
|
|
|
+ <attribute name="skidding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="strategy" type="enum" values="absolute,fixed" default="absolute" />
|
|
|
|
|
+ <attribute name="flip" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="flip-fallback-placements" type="string" default="" />
|
|
|
|
|
+ <attribute name="flip-fallback-strategy" type="enum" values="best-fit,initial" default="best-fit" />
|
|
|
|
|
+ <attribute name="flip-padding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="shift" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="shift-padding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="arrow" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="arrow-placement" type="enum" values="start,end,center,anchor" default="anchor" />
|
|
|
|
|
+ <attribute name="arrow-padding" type="int" default="10" />
|
|
|
|
|
+ <attribute name="auto-size" type="enum" values="horizontal,vertical,both" default="" />
|
|
|
|
|
+ <attribute name="sync" type="enum" values="width,height,both" default="" />
|
|
|
|
|
+ <attribute name="auto-size-padding" type="int" default="0" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-reposition" description="Emitted when the popover is repositioned" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-popup" type="container" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Popup containers for tooltips, popovers, etc.</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="anchor" type="string" default="" />
|
|
|
|
|
+ <attribute name="active" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="top" />
|
|
|
|
|
+ <attribute name="strategy" type="enum" values="absolute,fixed" default="absolute" />
|
|
|
|
|
+ <attribute name="distance" type="int" default="0" />
|
|
|
|
|
+ <attribute name="skidding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="arrow" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="arrow-placement" type="enum" values="start,end,center,anchor" default="anchor" />
|
|
|
|
|
+ <attribute name="arrow-padding" type="int" default="10" />
|
|
|
|
|
+ <attribute name="flip" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="flip-fallback-placements" type="string" default="" />
|
|
|
|
|
+ <attribute name="flip-fallback-strategy" type="enum" values="best-fit,initial" default="best-fit" />
|
|
|
|
|
+ <attribute name="flip-boundary" type="string" default="" />
|
|
|
|
|
+ <attribute name="flip-padding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="shift" type="bool" default="false" />
|
|
|
|
|
+ <attribute name="shift-boundary" type="string" default="" />
|
|
|
|
|
+ <attribute name="shift-padding" type="int" default="0" />
|
|
|
|
|
+ <attribute name="auto-size" type="enum" values="horizontal,vertical,both" default="" />
|
|
|
|
|
+ <attribute name="sync" type="enum" values="width,height,both" default="" />
|
|
|
|
|
+ <attribute name="auto-size-boundary" type="string" default="" />
|
|
|
|
|
+ <attribute name="auto-size-padding" type="int" default="0" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-reposition" description="Emitted when the popup is repositioned" />
|
|
|
|
|
+ <command name="reposition" description="Forces the popup to reposition" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-relative-time" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Displays relative time in a human-readable format</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>none</allowed-children>
|
|
|
|
|
+ <container>false</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="date" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="lang" type="string" default="" />
|
|
|
|
|
+ <attribute name="format" type="enum" values="long,short,narrow" default="long" />
|
|
|
|
|
+ <attribute name="numeric" type="enum" values="always,auto" default="auto" />
|
|
|
|
|
+ <attribute name="sync" type="bool" default="true" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-resize-observer" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Declarative interface to the ResizeObserver API</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="disabled" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <behavior>
|
|
|
|
|
+ <event name="wa-resize" description="Emitted when a resize occurs" />
|
|
|
|
|
+ </behavior>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ADDITIONAL UTILITY COMPONENTS -->
|
|
|
|
|
+
|
|
|
|
|
+ <control name="wa-visually-hidden" type="utility" category="web-specific" inherits="WebAwesomeComponent">
|
|
|
|
|
+ <description>Visually hides content while keeping it accessible to screen readers</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>any-content</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ </control>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- COMPOSITE STRUCTURES -->
|
|
|
|
|
+
|
|
|
|
|
+ <structure name="wa-menu" type="composite" category="web-specific">
|
|
|
|
|
+ <description>Menu structure for dropdowns and context menus</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>wa-dropdown,wa-popover</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-dropdown-item,wa-divider</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="size" type="enum" values="small,medium,large" default="medium" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <slot name="menu-items" allowed-controls="wa-dropdown-item,wa-divider" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </structure>
|
|
|
|
|
+
|
|
|
|
|
+ <structure name="wa-form-field" type="composite" category="web-specific">
|
|
|
|
|
+ <description>Form field wrapper with label and help text</description>
|
|
|
|
|
+ <constraints>
|
|
|
|
|
+ <allowed-parents>any</allowed-parents>
|
|
|
|
|
+ <allowed-children>wa-input,wa-select,wa-textarea,wa-checkbox,wa-radio-group,wa-switch</allowed-children>
|
|
|
|
|
+ <container>true</container>
|
|
|
|
|
+ <required-slots>input</required-slots>
|
|
|
|
|
+ </constraints>
|
|
|
|
|
+ <attributes>
|
|
|
|
|
+ <attribute name="label" type="string" default="" required="true" />
|
|
|
|
|
+ <attribute name="help-text" type="string" default="" />
|
|
|
|
|
+ <attribute name="required" type="bool" default="false" />
|
|
|
|
|
+ </attributes>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <wa-label text="{label}" required="{required}" />
|
|
|
|
|
+ <slot name="input" allowed-controls="wa-input,wa-select,wa-textarea,wa-checkbox,wa-radio-group,wa-switch" required="true" />
|
|
|
|
|
+ <wa-help-text text="{help-text}" visible="{help-text != ''}" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </structure>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- PATTERN WIREFRAMES -->
|
|
|
|
|
+
|
|
|
|
|
+ <wireframe name="wa-application-layout" type="base-layout" platform="web">
|
|
|
|
|
+ <description>Standard Web Awesome application layout with header, navigation, and content areas</description>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <wa-page layout="sidebar-left">
|
|
|
|
|
+ <slot name="header">
|
|
|
|
|
+ <header>
|
|
|
|
|
+ <slot name="logo" />
|
|
|
|
|
+ <slot name="navigation" />
|
|
|
|
|
+ <slot name="user-menu" />
|
|
|
|
|
+ </header>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="sidebar">
|
|
|
|
|
+ <wa-tree selection="single">
|
|
|
|
|
+ <slot name="menu-items" />
|
|
|
|
|
+ </wa-tree>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="content" required="true">
|
|
|
|
|
+ <slot name="page-header" />
|
|
|
|
|
+ <slot name="page-content" required="true" />
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="footer">
|
|
|
|
|
+ <footer>
|
|
|
|
|
+ <slot name="footer-content" />
|
|
|
|
|
+ </footer>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ </wa-page>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </wireframe>
|
|
|
|
|
+
|
|
|
|
|
+ <wireframe name="wa-form-layout" type="form-layout" platform="web">
|
|
|
|
|
+ <description>Standard form layout with validation and submit buttons</description>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <form>
|
|
|
|
|
+ <slot name="form-fields" required="true">
|
|
|
|
|
+ <wa-form-field label="Example Field">
|
|
|
|
|
+ <wa-input name="example" />
|
|
|
|
|
+ </wa-form-field>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="form-actions">
|
|
|
|
|
+ <wa-button-group>
|
|
|
|
|
+ <wa-button type="submit" variant="brand">Submit</wa-button>
|
|
|
|
|
+ <wa-button type="reset" variant="neutral">Reset</wa-button>
|
|
|
|
|
+ </wa-button-group>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </wireframe>
|
|
|
|
|
+
|
|
|
|
|
+ <wireframe name="wa-dialog-layout" type="dialog-layout" platform="web">
|
|
|
|
|
+ <description>Standard dialog layout with header, body, and footer</description>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <wa-dialog label="{title}">
|
|
|
|
|
+ <slot name="dialog-header" slot="header">
|
|
|
|
|
+ <h2>{title}</h2>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="dialog-content" slot="body" required="true">
|
|
|
|
|
+ <!-- Dialog content goes here -->
|
|
|
|
|
+ </slot>
|
|
|
|
|
+
|
|
|
|
|
+ <slot name="dialog-actions" slot="footer">
|
|
|
|
|
+ <wa-button-group>
|
|
|
|
|
+ <wa-button variant="neutral" onclick="this.closest('wa-dialog').hide()">Cancel</wa-button>
|
|
|
|
|
+ <wa-button variant="brand">Confirm</wa-button>
|
|
|
|
|
+ </wa-button-group>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ </wa-dialog>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </wireframe>
|
|
|
|
|
+
|
|
|
|
|
+ <wireframe name="wa-card-grid" type="content-layout" platform="web">
|
|
|
|
|
+ <description>Grid layout for cards</description>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <div class="card-grid">
|
|
|
|
|
+ <slot name="cards" required="true">
|
|
|
|
|
+ <wa-card>
|
|
|
|
|
+ <slot name="card-header" slot="header" />
|
|
|
|
|
+ <slot name="card-body" slot="body" />
|
|
|
|
|
+ <slot name="card-footer" slot="footer" />
|
|
|
|
|
+ </wa-card>
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ .card-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
|
|
|
+ gap: var(--wa-space-l);
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </wireframe>
|
|
|
|
|
+
|
|
|
|
|
+</patterns>
|