diff --git a/astro-docs/src/_data/componentsDetails.json b/astro-docs/src/_data/componentsDetails.json index 80112b8a..52c4a515 100644 --- a/astro-docs/src/_data/componentsDetails.json +++ b/astro-docs/src/_data/componentsDetails.json @@ -1,5 +1,5 @@ { - "timestamp": "2025-01-24T05:29:15", + "timestamp": "2025-01-24T11:03:50", "compiler": { "name": "@stencil/core", "version": "4.19.2", @@ -233,7 +233,23 @@ "docsTags": [] } ], - "styles": [], + "styles": [ + { + "name": "--goat-accordion-item-heading-background - Background color of the accordion item header", + "annotation": "prop", + "docs": "" + }, + { + "name": "--goat-accordion-item-heading-background-hover - Background color of the accordion item header on hover", + "annotation": "prop", + "docs": "" + }, + { + "name": "--goat-accordion-item-title-align - Alignment of the accordion title", + "annotation": "prop", + "docs": "" + } + ], "slots": [], "parts": [ { @@ -1265,7 +1281,58 @@ "docsTags": [] } ], - "styles": [], + "styles": [ + { + "name": "--goat-button-border-radius", + "annotation": "prop", + "docs": "Button border radius." + }, + { + "name": "--goat-button-border-style", + "annotation": "prop", + "docs": "Button border style." + }, + { + "name": "--goat-button-color", + "annotation": "prop", + "docs": "Button filling color." + }, + { + "name": "--goat-button-color-active", + "annotation": "prop", + "docs": "Button filling color on active." + }, + { + "name": "--goat-button-color-hover", + "annotation": "prop", + "docs": "Button filling color on hover." + }, + { + "name": "--goat-button-color-light", + "annotation": "prop", + "docs": "Button filling color for light variant." + }, + { + "name": "--goat-button-padding", + "annotation": "prop", + "docs": "Button padding." + }, + { + "name": "--goat-button-support-contrast-color", + "annotation": "prop", + "docs": "Button support color (text or border). Should be white or black based on weight of button filling color." + }, + { + "name": "--goat-theme-button-border-radius", + "annotation": "prop", + "docs": "Theme level button border radius. (applies to all buttons)" + }, + { + "name": "--goat-theme-button-border-style", + "annotation": "prop", + "docs": "Theme level button border style. (applies to all buttons)" + } + ], "slots": [], "parts": [], "listeners": [ @@ -4371,7 +4438,13 @@ ], "methods": [], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-code-highlighter-background", + "annotation": "prop", + "docs": "Code Highlighter background color" + } + ], "slots": [], "parts": [], "listeners": [], @@ -5173,7 +5246,18 @@ ], "methods": [], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-divider-color", + "annotation": "prop", + "docs": "Color of the divider" + }, + { + "name": "--goat-divider-padding", + "annotation": "prop", + "docs": "Padding of the divider" + } + ], "slots": [], "parts": [], "listeners": [], @@ -5472,7 +5556,13 @@ } ], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-dropdown-menu-max-height", + "annotation": "prop", + "docs": "Maximum height of the menu" + } + ], "slots": [], "parts": [], "listeners": [], @@ -6371,7 +6461,18 @@ ], "methods": [], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-header-height", + "annotation": "prop", + "docs": "Height of the header. Defaults to 3rem." + }, + { + "name": "--goat-header-width", + "annotation": "prop", + "docs": "Width of the header. Defaults to 100%." + } + ], "slots": [], "parts": [], "listeners": [], @@ -6947,7 +7048,7 @@ "resolved": "{ label: string; value: string; }[]", "references": {} }, - "mutable": false, + "mutable": true, "reflectToAttr": false, "docs": "", "docsTags": [], @@ -7009,6 +7110,27 @@ "optional": false, "required": false }, + { + "name": "placeholder", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "placeholder", + "reflectToAttr": false, + "docs": "The input field placeholder.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, { "name": "readonly", "type": "boolean", @@ -7053,6 +7175,28 @@ "optional": false, "required": false }, + { + "name": "showSuggestionCharacter", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "show-suggestion-character", + "reflectToAttr": true, + "docs": "", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "showToolbar", "type": "boolean", @@ -7075,6 +7219,28 @@ "optional": false, "required": false }, + { + "name": "suggestionCharacter", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "suggestion-character", + "reflectToAttr": true, + "docs": "", + "docsTags": [], + "default": "'@'", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, { "name": "theme", "type": "\"vs-dark\" | \"vs-light\"", @@ -7341,7 +7507,13 @@ ], "methods": [], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-icon-size - The size of the icon (height and width)", + "annotation": "prop", + "docs": "" + } + ], "slots": [], "parts": [], "listeners": [], @@ -8423,7 +8595,23 @@ } ], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-menu-background", + "annotation": "prop", + "docs": "Background color of the menu" + }, + { + "name": "--goat-menu-max-height", + "annotation": "prop", + "docs": "Maximum height of the menu" + }, + { + "name": "--goat-menu-shadow", + "annotation": "prop", + "docs": "Shadow of the menu" + } + ], "slots": [], "parts": [], "listeners": [ @@ -10406,7 +10594,28 @@ "props": [], "methods": [], "events": [], - "styles": [], + "styles": [ + { + "name": "--goat-menu-shadow", + "annotation": "prop", + "docs": "Shadow of popover content" + }, + { + "name": "--popover-content-background", + "annotation": "prop", + "docs": "Background color of the popover content" + }, + { + "name": "--popover-content-border-radius", + "annotation": "prop", + "docs": "Border radius of the popover content" + }, + { + "name": "--popover-padding", + "annotation": "prop", + "docs": "Padding of the popover content" + } + ], "slots": [], "parts": [], "listeners": [], diff --git a/package-lock.json b/package-lock.json index 40600724..b49b7076 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@tiptap/extension-font-family": "^2.4.0", "@tiptap/extension-history": "^2.1.12", "@tiptap/extension-mention": "^2.4.0", + "@tiptap/extension-placeholder": "^2.4.0", "@tiptap/extension-text-style": "^2.4.0", "@tiptap/extension-underline": "^2.4.0", "@tiptap/pm": "^2.1.12", @@ -1142,10 +1143,11 @@ "dev": true }, "node_modules/@remirror/core-constants": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz", - "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ==", - "dev": true + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz", + "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==", + "dev": true, + "license": "MIT" }, "node_modules/@rollup/plugin-replace": { "version": "5.0.7", @@ -1486,16 +1488,17 @@ } }, "node_modules/@tiptap/core": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.4.0.tgz", - "integrity": "sha512-YJSahk8pkxpCs8SflCZfTnJpE7IPyUWIylfgXM2DefjRQa5DZ+c6sNY0s/zbxKYFQ6AuHVX40r9pCfcqHChGxQ==", + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.11.3.tgz", + "integrity": "sha512-ibfi6U1gMRLo319Re6olv8uAuxtUpK343ygcVoZrJ8O4sqRnU9CEqPAM+n7YAKlOks1+Di0sTheIxZRak7Pj4g==", "dev": true, + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" }, "peerDependencies": { - "@tiptap/pm": "^2.0.0" + "@tiptap/pm": "^2.7.0" } }, "node_modules/@tiptap/extension-blockquote": { @@ -1740,6 +1743,21 @@ "@tiptap/core": "^2.0.0" } }, + "node_modules/@tiptap/extension-placeholder": { + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.11.3.tgz", + "integrity": "sha512-wXNcqsxkc+85NPrNpA/iuLa86RL2oOiOGWheJoIjtW2m9BEJSDsyHdUa9Nxwm28+PgonzG1uUfEv4JEzT5m4xg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, "node_modules/@tiptap/extension-strike": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.4.0.tgz", @@ -1793,29 +1811,30 @@ } }, "node_modules/@tiptap/pm": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.4.0.tgz", - "integrity": "sha512-B1HMEqGS4MzIVXnpgRZDLm30mxDWj51LkBT/if1XD+hj5gm8B9Q0c84bhvODX6KIs+c6z+zsY9VkVu8w9Yfgxg==", + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.3.tgz", + "integrity": "sha512-AEpiWvYmXdELpuGGhX6lS2aU155ANwS7WbQ/+/SFqH3YIYHjgUzP8UnY6KSiEBI7a7kX4TWhG84mWrzPA3dPaw==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-changeset": "^2.2.1", "prosemirror-collab": "^1.3.1", - "prosemirror-commands": "^1.5.2", + "prosemirror-commands": "^1.6.2", "prosemirror-dropcursor": "^1.8.1", "prosemirror-gapcursor": "^1.3.2", - "prosemirror-history": "^1.3.2", - "prosemirror-inputrules": "^1.3.0", + "prosemirror-history": "^1.4.1", + "prosemirror-inputrules": "^1.4.0", "prosemirror-keymap": "^1.2.2", - "prosemirror-markdown": "^1.12.0", + "prosemirror-markdown": "^1.13.1", "prosemirror-menu": "^1.2.4", - "prosemirror-model": "^1.19.4", - "prosemirror-schema-basic": "^1.2.2", - "prosemirror-schema-list": "^1.3.0", + "prosemirror-model": "^1.23.0", + "prosemirror-schema-basic": "^1.2.3", + "prosemirror-schema-list": "^1.4.1", "prosemirror-state": "^1.4.3", - "prosemirror-tables": "^1.3.5", - "prosemirror-trailing-node": "^2.0.7", - "prosemirror-transform": "^1.8.0", - "prosemirror-view": "^1.32.7" + "prosemirror-tables": "^1.6.1", + "prosemirror-trailing-node": "^3.0.0", + "prosemirror-transform": "^1.10.2", + "prosemirror-view": "^1.37.0" }, "funding": { "type": "github", @@ -1979,6 +1998,31 @@ "integrity": "sha512-FMbQHz+qd9DoGvgLHxeqqVPaNRffpIu5ZjozwV8hf9JAGpIOzuAf4wGbRSo8LNITHqGjmmVjaMggTT5P4v4IHg==", "dev": true }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "20.14.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", @@ -3123,6 +3167,7 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", "dev": true, + "license": "BSD-2-Clause", "engines": { "node": ">=0.12" }, @@ -3162,6 +3207,7 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", "dev": true, + "license": "MIT", "engines": { "node": ">=10" }, @@ -4851,6 +4897,7 @@ "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", "dev": true, + "license": "MIT", "dependencies": { "uc.micro": "^2.0.0" } @@ -4932,6 +4979,7 @@ "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", "dev": true, + "license": "MIT", "dependencies": { "argparse": "^2.0.1", "entities": "^4.4.0", @@ -4948,13 +4996,15 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true + "dev": true, + "license": "Python-2.0" }, "node_modules/mdurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/merge-stream": { "version": "2.0.0", @@ -5461,14 +5511,15 @@ } }, "node_modules/prosemirror-commands": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz", - "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==", + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz", + "integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-state": "^1.0.0", - "prosemirror-transform": "^1.0.0" + "prosemirror-transform": "^1.10.2" } }, "node_modules/prosemirror-dropcursor": { @@ -5495,10 +5546,11 @@ } }, "node_modules/prosemirror-history": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.0.tgz", - "integrity": "sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz", + "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-state": "^1.2.2", "prosemirror-transform": "^1.0.0", @@ -5527,11 +5579,13 @@ } }, "node_modules/prosemirror-markdown": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.0.tgz", - "integrity": "sha512-UziddX3ZYSYibgx8042hfGKmukq5Aljp2qoBiJRejD/8MH70siQNz5RB1TrdTPheqLMy4aCe4GYNF10/3lQS5g==", + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz", + "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==", "dev": true, + "license": "MIT", "dependencies": { + "@types/markdown-it": "^14.0.0", "markdown-it": "^14.0.0", "prosemirror-model": "^1.20.0" } @@ -5549,28 +5603,31 @@ } }, "node_modules/prosemirror-model": { - "version": "1.21.3", - "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.21.3.tgz", - "integrity": "sha512-nt2Xs/RNGepD9hrrkzXvtCm1mpGJoQfFSPktGa0BF/aav6XsnmVGZ9sTXNWRLupAz5SCLa3EyKlFeK7zJWROKg==", + "version": "1.24.1", + "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.24.1.tgz", + "integrity": "sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==", "dev": true, + "license": "MIT", "dependencies": { "orderedmap": "^2.0.0" } }, "node_modules/prosemirror-schema-basic": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz", - "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz", + "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-model": "^1.19.0" } }, "node_modules/prosemirror-schema-list": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.0.tgz", - "integrity": "sha512-nZOIq/AkBSzCENxUyLm5ltWE53e2PLk65ghMN8qLQptOmDVixZlPqtMeQdiNw0odL9vNpalEjl3upgRkuJ/Jyw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz", + "integrity": "sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-state": "^1.0.0", @@ -5589,47 +5646,51 @@ } }, "node_modules/prosemirror-tables": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.7.tgz", - "integrity": "sha512-oEwX1wrziuxMtwFvdDWSFHVUWrFJWt929kVVfHvtTi8yvw+5ppxjXZkMG/fuTdFo+3DXyIPSKfid+Be1npKXDA==", + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.2.tgz", + "integrity": "sha512-97dKocVLrEVTQjZ4GBLdrrMw7Gv3no8H8yMwf5IRM9OoHrzbWpcH5jJxYgNQIRCtdIqwDctT1HdMHrGTiwp1dQ==", "dev": true, + "license": "MIT", "dependencies": { - "prosemirror-keymap": "^1.1.2", - "prosemirror-model": "^1.8.1", - "prosemirror-state": "^1.3.1", - "prosemirror-transform": "^1.2.1", - "prosemirror-view": "^1.13.3" + "prosemirror-keymap": "^1.2.2", + "prosemirror-model": "^1.24.1", + "prosemirror-state": "^1.4.3", + "prosemirror-transform": "^1.10.2", + "prosemirror-view": "^1.37.1" } }, "node_modules/prosemirror-trailing-node": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.8.tgz", - "integrity": "sha512-ujRYhSuhQb1Jsarh1IHqb2KoSnRiD7wAMDGucP35DN7j5af6X7B18PfdPIrbwsPTqIAj0fyOvxbuPsWhNvylmA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz", + "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==", "dev": true, + "license": "MIT", "dependencies": { - "@remirror/core-constants": "^2.0.2", + "@remirror/core-constants": "3.0.0", "escape-string-regexp": "^4.0.0" }, "peerDependencies": { - "prosemirror-model": "^1.19.0", + "prosemirror-model": "^1.22.1", "prosemirror-state": "^1.4.2", - "prosemirror-view": "^1.31.2" + "prosemirror-view": "^1.33.8" } }, "node_modules/prosemirror-transform": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.9.0.tgz", - "integrity": "sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz", + "integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-model": "^1.21.0" } }, "node_modules/prosemirror-view": { - "version": "1.33.8", - "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.33.8.tgz", - "integrity": "sha512-4PhMr/ufz2cdvFgpUAnZfs+0xij3RsFysreeG9V/utpwX7AJtYCDVyuRxzWoMJIEf4C7wVihuBNMPpFLPCiLQw==", + "version": "1.37.2", + "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.2.tgz", + "integrity": "sha512-ApcyrfV/cRcaL65on7TQcfWElwLyOgIjnIynfAuV+fIdlpbSvSWRwfuPaH7T5mo4AbO/FID29qOtjiDIKGWyog==", "dev": true, + "license": "MIT", "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", @@ -5744,6 +5805,7 @@ "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", "dev": true, + "license": "MIT", "engines": { "node": ">=6" } @@ -6593,7 +6655,8 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/unbzip2-stream": { "version": "1.4.3", diff --git a/package.json b/package.json index 695f6973..5f678fc5 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@tiptap/extension-mention": "^2.4.0", "@tiptap/extension-text-style": "^2.4.0", "@tiptap/extension-underline": "^2.4.0", + "@tiptap/extension-placeholder": "^2.4.0", "@tiptap/pm": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", "@types/jest": "^27.5.2", diff --git a/src/components.d.ts b/src/components.d.ts index 9c1a13a5..adc6a82a 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -756,6 +756,10 @@ export namespace Components { * The input field name. */ "name": string; + /** + * The input field placeholder. + */ + "placeholder": string; "readonly": boolean; /** * If true, required icon is show. Defaults to `false`. @@ -769,7 +773,9 @@ export namespace Components { * Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`. */ "setFocus": () => Promise; + "showSuggestionCharacter": boolean; "showToolbar": boolean; + "suggestionCharacter": string; "theme": 'vs-light' | 'vs-dark'; /** * The input field value. @@ -3941,12 +3947,18 @@ declare namespace LocalJSX { * Emitted when a keyboard input occurred. */ "onGoat-html-editor--search"?: (event: GoatHtmlEditorCustomEvent) => void; + /** + * The input field placeholder. + */ + "placeholder"?: string; "readonly"?: boolean; /** * If true, required icon is show. Defaults to `false`. */ "required"?: boolean; + "showSuggestionCharacter"?: boolean; "showToolbar"?: boolean; + "suggestionCharacter"?: string; "theme"?: 'vs-light' | 'vs-dark'; /** * The input field value. diff --git a/src/components/accordion/accordion-item/readme.md b/src/components/accordion/accordion-item/readme.md index 553df603..ab1cb7ca 100644 --- a/src/components/accordion/accordion-item/readme.md +++ b/src/components/accordion/accordion-item/readme.md @@ -28,6 +28,15 @@ | `"title"` | | +## CSS Custom Properties + +| Name | Description | +| --------------------------------------------------------------------------------------------------------- | ----------- | +| `--goat-accordion-item-heading-background - Background color of the accordion item header` | | +| `--goat-accordion-item-heading-background-hover - Background color of the accordion item header on hover` | | +| `--goat-accordion-item-title-align - Alignment of the accordion title` | | + + ## Dependencies ### Depends on diff --git a/src/components/application/code-highlighter/readme.md b/src/components/application/code-highlighter/readme.md index 50e84821..98fcf09a 100644 --- a/src/components/application/code-highlighter/readme.md +++ b/src/components/application/code-highlighter/readme.md @@ -17,6 +17,13 @@ | `value` | `value` | The code snippet to highlight. | `string` | `''` | +## CSS Custom Properties + +| Name | Description | +| ------------------------------------ | --------------------------------- | +| `--goat-code-highlighter-background` | Code Highlighter background color | + + ## Dependencies ### Depends on diff --git a/src/components/application/header/header/readme.md b/src/components/application/header/header/readme.md index da2a3a9c..12e47c19 100644 --- a/src/components/application/header/header/readme.md +++ b/src/components/application/header/header/readme.md @@ -14,6 +14,14 @@ | `float` | `float` | | `boolean` | `false` | +## CSS Custom Properties + +| Name | Description | +| ---------------------- | --------------------------------------- | +| `--goat-header-height` | Height of the header. Defaults to 3rem. | +| `--goat-header-width` | Width of the header. Defaults to 100%. | + + ---------------------------------------------- *Built with love!* diff --git a/src/components/button/button/readme.md b/src/components/button/button/readme.md index bba084e6..2833bc73 100644 --- a/src/components/button/button/readme.md +++ b/src/components/button/button/readme.md @@ -71,6 +71,22 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| -------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `--goat-button-border-radius` | Button border radius. | +| `--goat-button-border-style` | Button border style. | +| `--goat-button-color` | Button filling color. | +| `--goat-button-color-active` | Button filling color on active. | +| `--goat-button-color-hover` | Button filling color on hover. | +| `--goat-button-color-light` | Button filling color for light variant. | +| `--goat-button-padding` | Button padding. | +| `--goat-button-support-contrast-color` | Button support color (text or border). Should be white or black based on weight of button filling color. | +| `--goat-theme-button-border-radius` | Theme level button border radius. (applies to all buttons) | +| `--goat-theme-button-border-style` | Theme level button border style. (applies to all buttons) | + + ## Dependencies ### Used by diff --git a/src/components/divider/readme.md b/src/components/divider/readme.md index 0055ba38..5f2f26e5 100644 --- a/src/components/divider/readme.md +++ b/src/components/divider/readme.md @@ -12,6 +12,14 @@ | `vertical` | `vertical` | | `boolean` | `false` | +## CSS Custom Properties + +| Name | Description | +| ------------------------ | ---------------------- | +| `--goat-divider-color` | Color of the divider | +| `--goat-divider-padding` | Padding of the divider | + + ## Dependencies ### Used by diff --git a/src/components/dropdown/dropdown-menu/readme.md b/src/components/dropdown/dropdown-menu/readme.md index 3131e68b..9aea73fa 100644 --- a/src/components/dropdown/dropdown-menu/readme.md +++ b/src/components/dropdown/dropdown-menu/readme.md @@ -19,6 +19,13 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| --------------------------------- | -------------------------- | +| `--goat-dropdown-menu-max-height` | Maximum height of the menu | + + ## Dependencies ### Depends on diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index fa9983a0..5189667d 100644 --- a/src/components/icon/readme.md +++ b/src/components/icon/readme.md @@ -13,6 +13,13 @@ | `size` | `size` | The size of the icon. This can be specified in pixels (px) or rem units to control the icon's dimensions. If a number is provided, it will be treated as rem units. For example, '16px', '2rem', or 2 would be valid values. | `string` | `undefined` | +## CSS Custom Properties + +| Name | Description | +| ------------------------------------------------------------ | ----------- | +| `--goat-icon-size - The size of the icon (height and width)` | | + + ## Dependencies ### Used by diff --git a/src/components/input-controls/html-editor/html-editor.scss b/src/components/input-controls/html-editor/html-editor.scss index 2d72f979..837f23fc 100644 --- a/src/components/input-controls/html-editor/html-editor.scss +++ b/src/components/input-controls/html-editor/html-editor.scss @@ -56,12 +56,13 @@ } .editor { - flex: 1; overflow: auto; outline: none; padding-block: v(--spacing-03); padding-inline: v(--spacing-05); + font-family: v(--body-01-font-family); + font-size: v(--body-01-font-size); * { box-sizing: border-box; @@ -90,6 +91,15 @@ padding: 0.1rem 0.25rem; border-radius: 12px; } + + p.is-editor-empty:first-child::before { + color: #adb5bd; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + } + } } @@ -150,6 +160,13 @@ z-index: 1000; position: absolute; top: 0; + visibility: hidden; + pointer-events: none; + + &.show { + visibility: inherit; + pointer-events: all; + } } .hidden { diff --git a/src/components/input-controls/html-editor/html-editor.tsx b/src/components/input-controls/html-editor/html-editor.tsx index 1afa187f..6c2b712b 100644 --- a/src/components/input-controls/html-editor/html-editor.tsx +++ b/src/components/input-controls/html-editor/html-editor.tsx @@ -16,6 +16,7 @@ import StarterKit from '@tiptap/starter-kit'; import TextStyle from '@tiptap/extension-text-style'; import FontFamily from '@tiptap/extension-font-family'; import Underline from '@tiptap/extension-underline'; +import Placeholder from '@tiptap/extension-placeholder'; import Mention from '@tiptap/extension-mention'; import * as beautify from 'js-beautify/js'; import { computePosition, offset } from '@floating-ui/dom'; @@ -48,11 +49,20 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { @Prop({ reflect: true }) layer?: 'background' | '01' | '02'; + /** + * The input field placeholder. + */ + @Prop() placeholder: string; + /** * If true, required icon is show. Defaults to `false`. */ @Prop({ reflect: true }) required: boolean = false; + @Prop({ reflect: true }) suggestionCharacter = '@'; + + @Prop({ reflect: true }) showSuggestionCharacter: boolean = true; + /** * If true, the user cannot interact with the button. Defaults to `false`. */ @@ -66,7 +76,7 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { @Prop() showToolbar: boolean = true; - @Prop() mentions: { label: string; value: string }[] = []; + @Prop({mutable: true}) mentions: { label: string; value: string }[] = []; @Prop() mentionsSearch: 'contains' | 'managed' = 'contains'; @@ -90,6 +100,9 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { @State() filteredMentionValues: string[] = []; + @State() + showDropdown: boolean = false; + @Watch('debounce') protected debounceChanged() { this.goatChange = debounceEvent(this.goatChange, this.debounce); @@ -177,6 +190,18 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { Underline, TextStyle, FontFamily, + Placeholder.configure({ + // Use a placeholder: + placeholder: that.placeholder, + // Use different placeholders depending on the node type: + // placeholder: ({ node }) => { + // if (node.type.name === 'heading') { + // return 'What’s the title?' + // } + + // return 'Can you add some further context?' + // }, + }), Mention.configure({ HTMLAttributes: { class: 'mention', @@ -186,11 +211,12 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { return [ 'a', { ...options.HTMLAttributes }, - `${options.suggestion.char}${item ? item.label : node.attrs.id}`, + `${that.showSuggestionCharacter ? options.suggestion.char : ''}${item ? item.label : node.attrs.id}`, ]; }, suggestion: { allowSpaces: true, + char: that.suggestionCharacter, items: async function ({ query }) { if (that.mentionsSearch == 'managed') { @@ -215,6 +241,7 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { return { onStart: props => { that.mentionCommand = props.command; + that.showDropdown = true; that.filteredMentionValues = props.items; computePosition(props.decorationNode, that.dropdownContent, { placement: 'bottom-start', @@ -249,6 +276,7 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { }); }, onExit: () => { + that.showDropdown = false; that.filteredMentionValues = []; }, }; @@ -482,7 +510,7 @@ export class HtmlEditor implements ComponentInterface, InputComponentInterface { (this.dropdownContent = elm)} onGoat-menu-item--click={evt => { this.mentionCommand({ id: evt.detail.value }); diff --git a/src/components/input-controls/html-editor/readme.md b/src/components/input-controls/html-editor/readme.md index 91756d40..c77ddc1f 100644 --- a/src/components/input-controls/html-editor/readme.md +++ b/src/components/input-controls/html-editor/readme.md @@ -7,20 +7,23 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------- | -------------------------- | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `onChange` event after each keystroke. | `number` | `250` | -| `disabled` | `disabled` | If true, the user cannot interact with the button. Defaults to `false`. | `boolean` | `false` | -| `layer` | `layer` | | `"01" \| "02" \| "background"` | `undefined` | -| `lineNumbers` | `line-numbers` | | `"off" \| "on"` | `'on'` | -| `mentions` | -- | | `{ label: string; value: string; }[]` | `[]` | -| `mentionsSearch` | `mentions-search` | | `"contains" \| "managed"` | `'contains'` | -| `name` | `name` | The input field name. | `string` | ``goat-input-${this.gid}`` | -| `readonly` | `readonly` | | `boolean` | `false` | -| `required` | `required` | If true, required icon is show. Defaults to `false`. | `boolean` | `false` | -| `showToolbar` | `show-toolbar` | | `boolean` | `true` | -| `theme` | `theme` | | `"vs-dark" \| "vs-light"` | `'vs-light'` | -| `value` | `value` | The input field value. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------- | -------------------------- | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `onChange` event after each keystroke. | `number` | `250` | +| `disabled` | `disabled` | If true, the user cannot interact with the button. Defaults to `false`. | `boolean` | `false` | +| `layer` | `layer` | | `"01" \| "02" \| "background"` | `undefined` | +| `lineNumbers` | `line-numbers` | | `"off" \| "on"` | `'on'` | +| `mentions` | -- | | `{ label: string; value: string; }[]` | `[]` | +| `mentionsSearch` | `mentions-search` | | `"contains" \| "managed"` | `'contains'` | +| `name` | `name` | The input field name. | `string` | ``goat-input-${this.gid}`` | +| `placeholder` | `placeholder` | The input field placeholder. | `string` | `undefined` | +| `readonly` | `readonly` | | `boolean` | `false` | +| `required` | `required` | If true, required icon is show. Defaults to `false`. | `boolean` | `false` | +| `showSuggestionCharacter` | `show-suggestion-character` | | `boolean` | `true` | +| `showToolbar` | `show-toolbar` | | `boolean` | `true` | +| `suggestionCharacter` | `suggestion-character` | | `string` | `'@'` | +| `theme` | `theme` | | `"vs-dark" \| "vs-light"` | `'vs-light'` | +| `value` | `value` | The input field value. | `string` | `undefined` | ## Events diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md index 0b1dfea7..df4f2f42 100644 --- a/src/components/menu/menu/readme.md +++ b/src/components/menu/menu/readme.md @@ -32,6 +32,15 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ------------------------ | ---------------------------- | +| `--goat-menu-background` | Background color of the menu | +| `--goat-menu-max-height` | Maximum height of the menu | +| `--goat-menu-shadow` | Shadow of the menu | + + ## Dependencies ### Used by diff --git a/src/components/popover/popover-content/readme.md b/src/components/popover/popover-content/readme.md index 22327a2c..18496f68 100644 --- a/src/components/popover/popover-content/readme.md +++ b/src/components/popover/popover-content/readme.md @@ -5,6 +5,16 @@ +## CSS Custom Properties + +| Name | Description | +| --------------------------------- | --------------------------------------- | +| `--goat-menu-shadow` | Shadow of popover content | +| `--popover-content-background` | Background color of the popover content | +| `--popover-content-border-radius` | Border radius of the popover content | +| `--popover-padding` | Padding of the popover content | + + ## Dependencies ### Used by