npm - @jxsuite/ui - Versions diffs - 0.0.0 - Mend

@jxsuite/ui 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/LICENSE +21 -0
package/README.md +11 -0
package/components/jx-action-button.json +414 -0
package/components/jx-button.json +310 -0
package/components/jx-icon.json +81 -0
package/components/jx-menu-item.json +265 -0
package/components/jx-menu.json +122 -0
package/icons/list.json +102 -0
package/icons/manifest.json +348 -0
package/package.json +46 -0
package/project.json +167 -0
package/src/behaviors/menu.ts +396 -0
package/src/documents.ts +23 -0
package/src/icons-build.ts +74 -0
package/src/icons.ts +55 -0
package/src/index.ts +70 -0
package/src/testing/popover-shim.ts +139 -0
package/src/theme.ts +63 -0
package/stylebook/jx-action-button.json +108 -0
package/stylebook/jx-button.json +104 -0
package/stylebook/jx-icon.json +208 -0
package/stylebook/jx-menu-item.json +221 -0
package/stylebook/jx-menu.json +302 -0

package/stylebook/jx-icon.json ADDED Viewed

@@ -0,0 +1,208 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookIcon",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    }
+  ],
+  "state": {
+    "weights": ["regular", "bold", "fill"],
+    "names": [
+      "align-bottom",
+      "align-bottom-simple",
+      "align-center-horizontal",
+      "align-center-horizontal-simple",
+      "align-center-vertical",
+      "align-left",
+      "align-right",
+      "align-top",
+      "align-top-simple",
+      "arrow-down",
+      "arrow-elbow-left-up",
+      "arrow-left",
+      "arrow-right",
+      "arrow-square-out",
+      "arrow-u-up-left",
+      "arrow-u-up-right",
+      "arrow-up",
+      "arrows-clockwise",
+      "arrows-horizontal",
+      "arrows-out",
+      "arrows-out-line-horizontal",
+      "arrows-out-line-vertical",
+      "arrows-vertical",
+      "brackets-curly",
+      "browser",
+      "caret-down",
+      "caret-left",
+      "caret-right",
+      "caret-up",
+      "chat-circle",
+      "check",
+      "clipboard",
+      "clock-counter-clockwise",
+      "code",
+      "columns",
+      "copy",
+      "cube",
+      "database",
+      "dots-three",
+      "dots-three-vertical",
+      "download-simple",
+      "export",
+      "eye",
+      "eye-slash",
+      "file",
+      "file-code",
+      "file-text",
+      "flip-vertical",
+      "floppy-disk",
+      "folder",
+      "folder-open",
+      "frame-corners",
+      "gear",
+      "gear-six",
+      "git-branch",
+      "globe",
+      "grid-four",
+      "image",
+      "info",
+      "lightning",
+      "link",
+      "list",
+      "list-bullets",
+      "magnifying-glass",
+      "minus",
+      "paint-brush",
+      "paper-plane-tilt",
+      "paperclip",
+      "pencil-simple",
+      "play",
+      "plus",
+      "question",
+      "rectangle",
+      "rows",
+      "share-network",
+      "sidebar-simple",
+      "sliders-horizontal",
+      "sparkle",
+      "spinner",
+      "square",
+      "stack",
+      "stop",
+      "tag",
+      "text-aa",
+      "text-align-center",
+      "text-align-justify",
+      "text-align-left",
+      "text-align-right",
+      "text-b",
+      "text-italic",
+      "text-strikethrough",
+      "text-subscript",
+      "text-superscript",
+      "text-underline",
+      "translate",
+      "trash",
+      "upload-simple",
+      "warning",
+      "warning-circle",
+      "x"
+    ]
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > ul": {
+      "display": "grid",
+      "gridTemplateColumns": "repeat(auto-fill, minmax(180px, 1fr))",
+      "gap": "var(--jx-space-3)",
+      "listStyle": "none",
+      "margin": "0",
+      "padding": "0"
+    },
+    "& > ul > li": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-3)",
+      "padding": "var(--jx-space-2) var(--jx-space-3)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-panel)"
+    },
+    "& code": {
+      "fontFamily": "var(--jx-font-mono)",
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--jx-fg-dim)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-icon"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Every glyph the kit ships, at regular weight. A label makes an icon announce itself; without one it is decorative."
+    },
+    {
+      "tagName": "ul",
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/names"
+          },
+          "key": {
+            "$ref": "$map/item"
+          },
+          "map": {
+            "tagName": "li",
+            "children": [
+              {
+                "tagName": "jx-icon",
+                "$props": {
+                  "name": {
+                    "$ref": "$map/item"
+                  }
+                }
+              },
+              {
+                "tagName": "jx-icon",
+                "$props": {
+                  "name": {
+                    "$ref": "$map/item"
+                  },
+                  "weight": "bold"
+                }
+              },
+              {
+                "tagName": "jx-icon",
+                "$props": {
+                  "name": {
+                    "$ref": "$map/item"
+                  },
+                  "weight": "fill"
+                }
+              },
+              {
+                "tagName": "code",
+                "textContent": "${$map.item}"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-menu-item.json ADDED Viewed

@@ -0,0 +1,221 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookMenuItem",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-menu-item.json"
+    }
+  ],
+  "state": {
+    "rows": [
+      {
+        "id": "plain",
+        "title": "Plain",
+        "chord": "",
+        "requires": "",
+        "disabled": false,
+        "destructive": false,
+        "checked": "",
+        "haspopup": false,
+        "enabled": true,
+        "noChord": true,
+        "noPopup": true
+      },
+      {
+        "id": "chord",
+        "title": "With a chord",
+        "chord": "⌘K",
+        "requires": "",
+        "disabled": false,
+        "destructive": false,
+        "checked": "",
+        "haspopup": false,
+        "enabled": true,
+        "noChord": false,
+        "noPopup": true
+      },
+      {
+        "id": "disabled",
+        "title": "Disabled",
+        "chord": "⌘V",
+        "requires": "something on the clipboard",
+        "disabled": true,
+        "destructive": false,
+        "checked": "",
+        "haspopup": false,
+        "enabled": false,
+        "noChord": false,
+        "noPopup": true
+      },
+      {
+        "id": "checked",
+        "title": "Checked",
+        "chord": "",
+        "requires": "",
+        "disabled": false,
+        "destructive": false,
+        "checked": "true",
+        "haspopup": false,
+        "enabled": true,
+        "noChord": true,
+        "noPopup": true
+      },
+      {
+        "id": "unchecked",
+        "title": "Unchecked",
+        "chord": "",
+        "requires": "",
+        "disabled": false,
+        "destructive": false,
+        "checked": "false",
+        "haspopup": false,
+        "enabled": true,
+        "noChord": true,
+        "noPopup": true
+      },
+      {
+        "id": "submenu",
+        "title": "Owns a submenu",
+        "chord": "",
+        "requires": "",
+        "disabled": false,
+        "destructive": false,
+        "checked": "",
+        "haspopup": true,
+        "enabled": true,
+        "noChord": true,
+        "noPopup": false
+      },
+      {
+        "id": "destructive",
+        "title": "Destructive",
+        "chord": "⌫",
+        "requires": "",
+        "disabled": false,
+        "destructive": true,
+        "checked": "",
+        "haspopup": false,
+        "enabled": true,
+        "noChord": false,
+        "noPopup": true
+      }
+    ]
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > [role=\"menu\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "var(--jx-space-1)",
+      "width": "280px",
+      "padding": "var(--jx-space-2)",
+      "background": "var(--jx-bg-overlay)",
+      "border": "1px solid var(--jx-border-strong)",
+      "borderRadius": "var(--jx-radius-md)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-menu-item"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Every state a row can be in, laid out in a static list so each is visible at once. A row is disabled, never absent; its reason is its tooltip."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "menu",
+        "aria-label": "Row states"
+      },
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/rows"
+          },
+          "key": {
+            "$ref": "$map/item/id"
+          },
+          "map": {
+            "tagName": "jx-menu-item",
+            "$props": {
+              "value": {
+                "$ref": "$map/item/id"
+              },
+              "disabled": {
+                "$ref": "$map/item/disabled"
+              },
+              "destructive": {
+                "$ref": "$map/item/destructive"
+              },
+              "requires": {
+                "$ref": "$map/item/requires"
+              },
+              "haspopup": {
+                "$ref": "$map/item/haspopup"
+              },
+              "checked": {
+                "$ref": "$map/item/checked"
+              }
+            },
+            "children": [
+              {
+                "tagName": "jx-icon",
+                "attributes": {
+                  "slot": "icon"
+                },
+                "$props": {
+                  "name": "copy"
+                }
+              },
+              {
+                "tagName": "span",
+                "textContent": "${$map.item.title}"
+              },
+              {
+                "tagName": "kbd",
+                "attributes": {
+                  "slot": "value"
+                },
+                "hidden": {
+                  "$ref": "$map/item/noChord"
+                },
+                "textContent": "${$map.item.chord}"
+              },
+              {
+                "tagName": "span",
+                "attributes": {
+                  "slot": "description"
+                },
+                "hidden": {
+                  "$ref": "$map/item/enabled"
+                },
+                "textContent": "Needs ${$map.item.requires}"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}