Dashboard - IconButton, Input, NumberInput

editor-elements/$w/Breadcrumbs.service.json

@@ -3,8 +3,7 @@
   "mixes":
     [ "$w.HiddenCollapsedMixin",
       "$w.ViewportMixin" ],
-  "labels":
-    [ "changed" ],
+  "labels": [],
   "location":
     { "lineno": 1,
       "filename": "Breadcrumbs.js" },

editor-elements/$w/CollapsibleText.service.json

@@ -4,8 +4,7 @@
     [ "$w.Element",
       "$w.HiddenCollapsedMixin",
       "$w.ClickableMixin" ],
-  "labels":
-    [ "changed" ],
+  "labels": [],
   "location":
     { "lineno": 1,
       "filename": "CollapsibleTextBox.js" },

editor-elements/$w/DashboardIconButton.service.json

@@ -0,0 +1,236 @@
+{ "name": "DashboardIconButton",
+  "memberOf": "$w",
+  "mixes":
+    [ "$w.HiddenCollapsedElement",
+      "$w.ClickableMixin",
+      "$w.DisabledMixin" ],
+  "labels":
+    [ "changed" ],
+  "location":
+    { "lineno": 1,
+      "filename": "DashboardIconButton.js" },
+  "docs":
+    { "summary": "An icon button on your dashboard page.",
+      "description":
+        [ "Icon buttons allow you to use vector art as clickable buttons, creating a more interesting site experience.",
+          "You can use the dashboard icon button anywhere on your Wix site, but it is intended for use on your site's dashboard pages,",
+          "or on your [Wix Blocks dashboard pages](https://support.wix.com/en/article/wix-blocks-creating-and-managing-blocks-dashboard-pages).",
+          "",
+          "> **Note:**",
+          "> [Wix Blocks](https://support.wix.com/en/article/wix-blocks-check-out-our-articles) is an editor for building Wix apps. It is currently open to a limited number of users." ],
+      "links": [],
+      "examples": [],
+      "extra":
+        {  } },
+  "properties":
+    [ { "name": "icon",
+        "labels":
+          [ "changed" ],
+        "get": true,
+        "set": true,
+        "type": "string",
+        "locations":
+          [ { "lineno": 42,
+              "filename": "DashboardIconButton.js" },
+            { "lineno": 64,
+              "filename": "DashboardIconButton.js" } ],
+        "docs":
+          { "summary": "Sets or gets the button's icon.",
+            "description":
+              [ "The `icon` property defines the vector image used as the button's icon.",
+                "",
+                "Setting `icon` changes the button icon to the image indicated by the new value.",
+                "Getting the `icon` property returns the location of the icon image file.",
+                "",
+                "The following formats are supported:",
+                " + Vector images from the Media Manager: `wix:vector://v1/<vector_uri>/<filename>`",
+                " + Vector images from the web: `http(s)://<vector image url>`",
+                " + Vector XML string: `<svg>...</svg>`" ],
+            "links": [],
+            "examples":
+              [ { "title": "Set icon to an image from the Media Manager",
+                  "body":
+                    [ "$w(\"#myButton\").icon = \"wix:vector://v1/11062b_636dddbfd3be4d77adf4cd14fbe28a49.svg/\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Get a button's icon",
+                  "body":
+                    [ "let icon = $w(\"#myIconButton\").icon; //wix:vector://v1/11062b_636dddbfd3be4d77adf4cd14fbe28a49.svg/" ],
+                  "extra":
+                    {  } },
+                { "title": "Set icon with a literal value",
+                  "body":
+                    [ "$w('#myIconButton').icon = `${$w('#myOtherButton').icon}`" ],
+                  "extra":
+                    {  } },
+                { "title": "Set icon to an XML string",
+                  "body":
+                    [ "$w('#myIconButton').icon = '<svg height=\"10\" width=\"10\"><polygon points=\"0,9 9,9 5,0\" style=\"fill:lime;stroke:purple;stroke-width:1\"/></svg>';" ],
+                  "extra":
+                    {  } } ],
+            "extra":
+              {  } },
+        "extra":
+          {  } },
+      { "name": "link",
+        "labels":
+          [ "changed" ],
+        "get": true,
+        "set": true,
+        "type": "string",
+        "locations":
+          [ { "lineno": 70,
+              "filename": "DashboardIconButton.js" },
+            { "lineno": 111,
+              "filename": "DashboardIconButton.js" } ],
+        "docs":
+          { "summary": "Sets or gets the button's link.",
+            "description":
+              [ "When the button is clicked, the browser navigates to the `link` location.",
+                "You can set `link` to any of the following:",
+                "+ `/localPageURL`: another page on your site",
+                "+ `/`: your site's home page",
+                "+ `http(s)://<url>`: an external web address",
+                "+ `wix:document://<location>`: a document stored in the Media Manager",
+                "+ `mailto:<email-address>?subject=<subject>`: an email",
+                "+ `tel:<phone number>`: a phone number",
+                "",
+                "The `link` property attempts to properly encode the URL value that",
+                "you set. For example, `.../some page` is encoded to `.../some%20page`.",
+                "However, some URLs do not have one unambiguous encoding. In those cases",
+                "it is up to you to encode the URL to reflect your intentions. Because of",
+                "these situations, it is a best practice to always encode URLs before you",
+                "set them as the value of the `link` property. Regardless of how you set",
+                "the `link` property, when you get its value, it returns an encoded URL.",
+                "",
+                "Note that Wix URLs do not contain spaces. A page which has spaces in its",
+                "name has its spaces replaced with dashes (`-`). Similarly,",
+                "a [dynamic page URL](https://support.wix.com/en/article/creating-a-unique-dynamic-page-url) which ",
+                "contains the value of a field in your collection with spaces",
+                "has its spaces replaced with dashes (`-`).",
+                "",
+                "> **Note:** Make sure to set your button link before running (and not inside) the [`onClick()`](https://www.wix.com/velo/reference/$w/button/onclick) event handler." ],
+            "links":
+              [ "[target](#target)" ],
+            "examples":
+              [ { "title": "Get the URL a button navigates to",
+                  "body":
+                    [ "let link = $w('#myElement').link; // https://wix.com" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open your site home page",
+                  "body":
+                    [ "$w('#myElement').link = \"/\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open an external link",
+                  "body":
+                    [ "$w('#myElement').link = \"https://wix.com\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open an external web link in a new browser page when clicked",
+                  "body":
+                    [ "$w(\"#myElement\").link = \"http://wix.com\";",
+                      "$w(\"#myElement\").target = \"_blank\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open a document",
+                  "body":
+                    [ "$w(\"#myElement\").link = \"wix:document://v1/9bec_52fb06ea/filename.xls\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open a new email window",
+                  "body":
+                    [ "$w('#myElement').link = \"mailto:[email protected]?subject=Some%20Topic\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to make a phone call on click",
+                  "body":
+                    [ "$w('#myElement').link = \"tel:+1-555-555-5555\";" ],
+                  "extra":
+                    {  } } ],
+            "extra":
+              {  } },
+        "extra":
+          {  } },
+      { "name": "target",
+        "labels":
+          [ "changed" ],
+        "get": true,
+        "set": true,
+        "type": "string",
+        "defaultValue": "\"_blank\"",
+        "locations":
+          [ { "lineno": 118,
+              "filename": "DashboardIconButton.js" },
+            { "lineno": 138,
+              "filename": "DashboardIconButton.js" } ],
+        "docs":
+          { "summary": "Sets or gets the icon button's target.",
+            "description":
+              [ "Setting `target` determines whether the link opens in",
+                "the current page or a new tab or window. Supported values are:",
+                "",
+                "+ `\"_blank`\": The link opens in a new tab or window.",
+                "+ `\"_self\"`: The link opens in the same tab or window.",
+                "",
+                "Any other string value will cause the code to throw an error." ],
+            "links": [],
+            "examples":
+              [ { "title": "Get a button's target",
+                  "body":
+                    [ "let target = $w(\"#myElement\").target;" ],
+                  "extra":
+                    {  } },
+                { "title": "Set a button's target",
+                  "body":
+                    [ "$w(\"#myElement\").target = \"_self\";" ],
+                  "extra":
+                    {  } },
+                { "title": "Set button to open an external web link in a new browser page when clicked",
+                  "body":
+                    [ "$w(\"#myElement\").link = \"http://wix.com\";",
+                      "$w(\"#myElement\").target = \"_blank\";" ],
+                  "extra":
+                    {  } } ],
+            "extra":
+              {  } },
+        "extra":
+          {  } },
+      { "name": "tooltip",
+        "labels": [],
+        "get": true,
+        "set": true,
+        "type": "string",
+        "locations":
+          [ { "lineno": 21,
+              "filename": "DashboardIconButton.js" },
+            { "lineno": 36,
+              "filename": "DashboardIconButton.js" } ],
+        "docs":
+          { "summary": "Sets or gets an element's tooltip.",
+            "description":
+              [ "Setting the `tooltip` property defines the text that is displayed when a user hovers on the icon button.",
+                "",
+                " The tooltip text can have a maximum length of 1200 characters." ],
+            "links": [],
+            "examples":
+              [ { "title": "Get an element's tooltip",
+                  "body":
+                    [ "let tooltip = $w(\"#myElement\").tooltip; // \"Submit your information here\"" ],
+                  "extra":
+                    {  } },
+                { "title": "Set an element's tooltip",
+                  "body":
+                    [ "$w(\"#myElement\").tooltip = \"Submit your information here\";" ],
+                  "extra":
+                    {  } } ],
+            "extra":
+              {  } },
+        "extra":
+          {  } } ],
+  "operations": [],
+  "callbacks": [],
+  "messages": [],
+  "extra":
+    { "queryable": true } }