From 4a5205788a857b13905a1e7c74bf79f97359b3f3 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 12:53:48 +0100 Subject: [PATCH 01/27] fix(code): removed margin bottom --- packages/core/src/components/lf-code/lf-code.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/components/lf-code/lf-code.scss b/packages/core/src/components/lf-code/lf-code.scss index 9d5254e..4655821 100644 --- a/packages/core/src/components/lf-code/lf-code.scss +++ b/packages/core/src/components/lf-code/lf-code.scss @@ -90,6 +90,7 @@ pre, .body { @include lf-el-text("body"); box-sizing: border-box; + margin-bottom: 0; padding: 1em; white-space: pre-line; } From 471844062410ab4dccf0e145fb37695ed7f2059a Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:00:06 +0100 Subject: [PATCH 02/27] fix(cicd): updated workflows to never skip --- .github/workflows/bump-candidate.yaml | 23 ++++++++++++++++++++--- .github/workflows/bump-main.yaml | 21 ++++++++++++++++++--- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/.github/workflows/bump-candidate.yaml b/.github/workflows/bump-candidate.yaml index d6c2b7d..5dca03c 100644 --- a/.github/workflows/bump-candidate.yaml +++ b/.github/workflows/bump-candidate.yaml @@ -7,18 +7,29 @@ on: jobs: version-bump: - if: "${{ ! contains(github.event.head_commit.message, 'chore: bump versions for release candidate') }}" - runs-on: ubuntu-latest environment: Development steps: - - uses: actions/checkout@v4 + - name: Checkout code + uses: actions/checkout@v4 with: fetch-depth: 0 fetch-tags: true persist-credentials: false + - name: Check if version bump is needed + id: check_bump + run: | + if echo "${{ github.event.head_commit.message }}" | grep -q 'chore: bump versions for release candidate'; then + echo "Skipping version bump" + echo "skip=true" >> $GITHUB_OUTPUT + else + echo "Proceeding with version bump" + echo "skip=false" >> $GITHUB_OUTPUT + fi + - name: Setup and Build + if: steps.check_bump.outputs.skip == 'false' uses: ./.github/actions/setup with: node-version: "18.x" @@ -27,21 +38,26 @@ jobs: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - name: Configure Git + if: steps.check_bump.outputs.skip == 'false' run: | git config --global user.email "github-actions[bot]@users.noreply.github.com" git config --global user.name "github-actions[bot]" - name: Bump Versions with Lerna + if: steps.check_bump.outputs.skip == 'false' run: | npx lerna version --conventional-prerelease --preid=rc --no-push --yes - name: Build Packages + if: steps.check_bump.outputs.skip == 'false' run: yarn build - name: Format Code with Prettier + if: steps.check_bump.outputs.skip == 'false' run: yarn format - name: Check for Changes + if: steps.check_bump.outputs.skip == 'false' run: | if git diff --quiet && git diff --cached --quiet; then echo "No changes to commit" @@ -49,6 +65,7 @@ jobs: fi - name: Create or Update Pull Request + if: steps.check_bump.outputs.skip == 'false' uses: peter-evans/create-pull-request@v5 with: commit-message: "chore: bump versions for release candidate" diff --git a/.github/workflows/bump-main.yaml b/.github/workflows/bump-main.yaml index 556d669..0e20d70 100644 --- a/.github/workflows/bump-main.yaml +++ b/.github/workflows/bump-main.yaml @@ -7,18 +7,29 @@ on: jobs: version-bump: - if: "${{ ! contains(github.event.head_commit.message, 'chore: bump versions for release') }}" - runs-on: ubuntu-latest environment: Production steps: - - uses: actions/checkout@v4 + - name: Checkout code + uses: actions/checkout@v4 with: fetch-depth: 0 fetch-tags: true persist-credentials: false + - name: Check if version bump is needed + id: check_bump + run: | + if echo "${{ github.event.head_commit.message }}" | grep -q 'chore: bump versions for release'; then + echo "Skipping version bump" + echo "skip=true" >> $GITHUB_OUTPUT + else + echo "Proceeding with version bump" + echo "skip=false" >> $GITHUB_OUTPUT + fi + - name: Setup and Build + if: steps.check_bump.outputs.skip == 'false' uses: ./.github/actions/setup with: node-version: "18.x" @@ -27,18 +38,22 @@ jobs: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - name: Configure Git + if: steps.check_bump.outputs.skip == 'false' run: | git config --global user.email "github-actions[bot]@users.noreply.github.com" git config --global user.name "github-actions[bot]" - name: Bump Versions with Lerna (Release) + if: steps.check_bump.outputs.skip == 'false' run: | npx lerna version --conventional-graduate --no-push --yes - name: Build Packages + if: steps.check_bump.outputs.skip == 'false' run: yarn build - name: Create or Update Pull Request + if: steps.check_bump.outputs.skip == 'false' uses: peter-evans/create-pull-request@v5 with: commit-message: "chore: bump versions for release" From 3d53ce546e651c1a94de9580459244c6581a1cb4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Feb 2025 12:00:52 +0000 Subject: [PATCH 03/27] chore(release): publish --- CHANGELOG.md | 7 +++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 4 ++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 4 ++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 4 ++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 4 ++++ packages/showcase/package.json | 2 +- 16 files changed, 45 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 445cfd4..5fe45d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +### Bug Fixes + +- **cicd:** updated workflows to never skip ([4718440](https://github.com/lucafoscili/lf-widgets/commit/471844062410ab4dccf0e145fb37695ed7f2059a)) +- **code:** removed margin bottom ([4a52057](https://github.com/lucafoscili/lf-widgets/commit/4a5205788a857b13905a1e7c74bf79f97359b3f3)) + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/root diff --git a/lerna.json b/lerna.json index d0c257c..6121ff8 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.1", + "version": "0.3.2-rc.0", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index 62f8e51..1ea9f82 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-assets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/assets + ## [0.3.1](https://github.com/lucafoscili/lf-assets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/assets diff --git a/packages/assets/package.json b/packages/assets/package.json index 952595d..48674ed 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index a9dac57..11d2717 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +### Bug Fixes + +- **code:** removed margin bottom ([4a52057](https://github.com/lucafoscili/lf-widgets/commit/4a5205788a857b13905a1e7c74bf79f97359b3f3)) + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/core diff --git a/packages/core/package.json b/packages/core/package.json index c3c64c5..b82687a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index 1c29618..2ed1505 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/foundations + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/foundations diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 64bc0fb..4fbaca3 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index 7639e90..7881568 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/framework + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/framework diff --git a/packages/framework/package.json b/packages/framework/package.json index 47d2097..7688080 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 2d59b74..9aa0076 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index adf3bd0..550ec5d 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 1773fb5..07f1209 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index 224ceb8..a7e5e93 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index b1fc654..af0ecef 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/showcase + ## [0.3.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.1-rc.3...0.3.1) (2025-02-12) **Note:** Version bump only for package @lf-widgets/showcase diff --git a/packages/showcase/package.json b/packages/showcase/package.json index b2c4974..da23222 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.1", + "version": "0.3.2-rc.0", "publishConfig": { "access": "public" }, From 5b605c43dddbe0568752231b449cfadc3606b33d Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:14:22 +0100 Subject: [PATCH 04/27] fix(assets): added history icon --- packages/assets/assets/svg/history.svg | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 packages/assets/assets/svg/history.svg diff --git a/packages/assets/assets/svg/history.svg b/packages/assets/assets/svg/history.svg new file mode 100644 index 0000000..072e1df --- /dev/null +++ b/packages/assets/assets/svg/history.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file From 8d03dfb545410a38e520abf8a78fa658afd9d700 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Feb 2025 12:15:10 +0000 Subject: [PATCH 05/27] chore(release): publish --- CHANGELOG.md | 6 ++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 6 ++++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 4 ++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 4 ++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 4 ++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 4 ++++ packages/showcase/package.json | 2 +- 16 files changed, 44 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fe45d7..59d314f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +### Bug Fixes + +- **assets:** added history icon ([5b605c4](https://github.com/lucafoscili/lf-widgets/commit/5b605c43dddbe0568752231b449cfadc3606b33d)) + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 6121ff8..61500af 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index 1ea9f82..f6f19ab 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +### Bug Fixes + +- **assets:** added history icon ([5b605c4](https://github.com/lucafoscili/lf-assets/commit/5b605c43dddbe0568752231b449cfadc3606b33d)) + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-assets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/assets diff --git a/packages/assets/package.json b/packages/assets/package.json index 48674ed..b6f35b3 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 11d2717..760abdf 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/core + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) ### Bug Fixes diff --git a/packages/core/package.json b/packages/core/package.json index b82687a..e72b506 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index 2ed1505..e97ee2b 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/foundations + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/foundations diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 4fbaca3..0db4a9d 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index 7881568..025a983 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/framework + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/framework diff --git a/packages/framework/package.json b/packages/framework/package.json index 7688080..2d2c56d 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 9aa0076..7c48f52 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 550ec5d..245258c 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 07f1209..67f2e20 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index a7e5e93..d42b3dd 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index af0ecef..cc6eba6 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/showcase + ## [0.3.2-rc.0](https://github.com/lucafoscili/lf-widgets/compare/0.3.1...0.3.2-rc.0) (2025-02-13) **Note:** Version bump only for package @lf-widgets/showcase diff --git a/packages/showcase/package.json b/packages/showcase/package.json index da23222..abc82e8 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.0", + "version": "0.3.2-rc.1", "publishConfig": { "access": "public" }, From 0d5b604a410cc881a27fa4a48e94b5ed3a91134e Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:24:43 +0100 Subject: [PATCH 06/27] fix(cicd): improved component count action --- .github/workflows/component-count.yaml | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/.github/workflows/component-count.yaml b/.github/workflows/component-count.yaml index afa0568..63eb70b 100644 --- a/.github/workflows/component-count.yaml +++ b/.github/workflows/component-count.yaml @@ -9,7 +9,8 @@ jobs: update-count: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - name: Checkout candidate branch + uses: actions/checkout@v4 with: fetch-depth: 0 persist-credentials: false @@ -20,18 +21,6 @@ jobs: git config --global user.name "github-actions[bot]" git remote set-url origin "https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git" - - name: Fetch All Branches - run: git fetch --all - - - name: Checkout or Create Component Count Update Branch - run: | - if git show-ref --verify --quiet refs/heads/component-count-update; then - git checkout component-count-update - git merge origin/candidate - else - git checkout -b component-count-update origin/candidate - fi - - name: Count Components id: count run: | @@ -48,15 +37,17 @@ jobs: echo "changes=true" >> $GITHUB_OUTPUT fi - - name: Commit Component Count + - name: Create Component Count Update Branch and Commit Changes if: steps.git-check.outputs.changes == 'true' run: | + # Create (or update) branch 'component-count-update' from candidate HEAD + git checkout -B component-count-update git add count.json git commit -m "Update component count to ${{ steps.count.outputs.components }} [skip ci]" || echo "No changes to commit" - name: Push Changes to Branch if: steps.git-check.outputs.changes == 'true' - run: git push origin component-count-update + run: git push origin component-count-update --force - name: Create or Update Pull Request if: steps.git-check.outputs.changes == 'true' From 17146b0685e03f3925880e83ca02844c63aca765 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 20:17:22 +0100 Subject: [PATCH 07/27] fix(lifecycle): added safeguard to Watchers preventing early executions --- .../core/src/components/lf-card/lf-card.tsx | 4 + .../components/lf-carousel/lf-carousel.tsx | 4 + .../core/src/components/lf-chart/readme.md | 2 +- .../core/src/components/lf-chat/lf-chat.tsx | 8 ++ .../core/src/components/lf-code/lf-code.tsx | 4 + .../src/components/lf-compare/lf-compare.tsx | 4 + .../src/components/lf-drawer/lf-drawer.tsx | 8 ++ .../core/src/components/lf-image/lf-image.tsx | 4 + .../core/src/components/lf-image/readme.md | 2 +- .../src/components/lf-masonry/lf-masonry.tsx | 8 ++ .../src/components/lf-photoframe/readme.md | 4 +- .../src/components/lf-placeholder/readme.md | 2 +- .../src/components/lf-spinner/lf-spinner.tsx | 8 ++ .../src/components/lf-textfield/readme.md | 2 +- .../lf-typewriter/lf-typewriter.tsx | 4 + .../src/components/lf-showcase/assets/doc.ts | 108 +++++++++--------- .../components/lf-showcase/lf-showcase.tsx | 8 ++ 17 files changed, 124 insertions(+), 60 deletions(-) diff --git a/packages/core/src/components/lf-card/lf-card.tsx b/packages/core/src/components/lf-card/lf-card.tsx index e69b707..d5ef0e4 100644 --- a/packages/core/src/components/lf-card/lf-card.tsx +++ b/packages/core/src/components/lf-card/lf-card.tsx @@ -213,6 +213,10 @@ export class LfCard implements LfCardInterface { //#region Watchers @Watch("lfDataset") async updateShapes() { + if (!this.#framework) { + return; + } + const { data, debug } = this.#framework; try { diff --git a/packages/core/src/components/lf-carousel/lf-carousel.tsx b/packages/core/src/components/lf-carousel/lf-carousel.tsx index 87e1c72..792ccb6 100644 --- a/packages/core/src/components/lf-carousel/lf-carousel.tsx +++ b/packages/core/src/components/lf-carousel/lf-carousel.tsx @@ -223,6 +223,10 @@ export class LfCarousel implements LfCarouselInterface { @Watch("lfDataset") @Watch("lfShape") async updateShapes() { + if (!this.#framework) { + return; + } + const { data, debug } = this.#framework; try { diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index 02efe85..e45cc45 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-chat/lf-chat.tsx b/packages/core/src/components/lf-chat/lf-chat.tsx index 53fbece..360cde0 100644 --- a/packages/core/src/components/lf-chat/lf-chat.tsx +++ b/packages/core/src/components/lf-chat/lf-chat.tsx @@ -320,11 +320,19 @@ export class LfChat implements LfChatInterface { //#region Watchers @Watch("lfPollingInterval") updatePollingInterval() { + if (!this.#framework) { + return; + } + clearInterval(this.#interval); this.#interval = setInterval(this.#checkLLMStatus, this.lfPollingInterval); } @Watch("lfSystem") async updateTokensCount() { + if (!this.#framework) { + return; + } + this.currentTokens = await calcTokens(this.#adapter); } //#endregion diff --git a/packages/core/src/components/lf-code/lf-code.tsx b/packages/core/src/components/lf-code/lf-code.tsx index f9d396c..6b7266f 100644 --- a/packages/core/src/components/lf-code/lf-code.tsx +++ b/packages/core/src/components/lf-code/lf-code.tsx @@ -252,6 +252,10 @@ export class LfCode implements LfCodeInterface { //#region Watchers @Watch("lfLanguage") loadLanguage() { + if (!this.#framework) { + return; + } + switch (this.lfLanguage.toLowerCase()) { case "css": LF_CODE_CSS(Prism); diff --git a/packages/core/src/components/lf-compare/lf-compare.tsx b/packages/core/src/components/lf-compare/lf-compare.tsx index 550005c..008a12d 100644 --- a/packages/core/src/components/lf-compare/lf-compare.tsx +++ b/packages/core/src/components/lf-compare/lf-compare.tsx @@ -177,6 +177,10 @@ export class LfCompare implements LfCompareInterface { @Watch("lfDataset") @Watch("lfShape") async updateShapes() { + if (!this.#framework) { + return; + } + const { data, debug } = this.#framework; try { diff --git a/packages/core/src/components/lf-drawer/lf-drawer.tsx b/packages/core/src/components/lf-drawer/lf-drawer.tsx index 5a468e2..43b69b8 100644 --- a/packages/core/src/components/lf-drawer/lf-drawer.tsx +++ b/packages/core/src/components/lf-drawer/lf-drawer.tsx @@ -209,10 +209,18 @@ export class LfDrawer implements LfDrawerInterface { //#region Watchers @Watch("lfDisplay") onLfDisplayChange(newVal: LfDrawerDisplay, oldVal: LfDrawerDisplay) { + if (!this.#framework) { + return; + } + this.#handleBackdropChange(oldVal, newVal); } @Watch("lfResponsive") onLfResponsiveChange() { + if (!this.#framework) { + return; + } + if (this.lfResponsive > 0) { this.#applyResponsiveMode(); if (!this.#resizeHandler) { diff --git a/packages/core/src/components/lf-image/lf-image.tsx b/packages/core/src/components/lf-image/lf-image.tsx index fa070c7..493110a 100644 --- a/packages/core/src/components/lf-image/lf-image.tsx +++ b/packages/core/src/components/lf-image/lf-image.tsx @@ -191,6 +191,10 @@ export class LfImage implements LfImageInterface { //#region Watchers @Watch("lfValue") async resetState() { + if (!this.#framework) { + return; + } + this.error = false; this.isLoaded = false; } diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index 3bbd698..8161564 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -15,7 +15,7 @@ The component supports various customization options, including size, styling, a | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | | `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | | `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | diff --git a/packages/core/src/components/lf-masonry/lf-masonry.tsx b/packages/core/src/components/lf-masonry/lf-masonry.tsx index dbdcfea..259f93d 100644 --- a/packages/core/src/components/lf-masonry/lf-masonry.tsx +++ b/packages/core/src/components/lf-masonry/lf-masonry.tsx @@ -247,6 +247,10 @@ export class LfMasonry implements LfMasonryInterface { //#region Watchers @Watch("lfColumns") validateColumns() { + if (!this.#framework) { + return; + } + const { debug } = this.#framework; if ( @@ -264,6 +268,10 @@ export class LfMasonry implements LfMasonryInterface { @Watch("lfDataset") @Watch("lfShape") async updateShapes() { + if (!this.#framework) { + return; + } + const { data, debug } = this.#framework; try { diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index c9ef3b6..54226d7 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -15,10 +15,10 @@ The image may be overlaid with text or other elements. | Property | Attribute | Description | Type | Default | | --------------- | -------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index cea3fa3..c321c99 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | diff --git a/packages/core/src/components/lf-spinner/lf-spinner.tsx b/packages/core/src/components/lf-spinner/lf-spinner.tsx index c8475ea..e135a35 100644 --- a/packages/core/src/components/lf-spinner/lf-spinner.tsx +++ b/packages/core/src/components/lf-spinner/lf-spinner.tsx @@ -192,6 +192,10 @@ export class LfSpinner implements LfSpinnerInterface { //#region Watchers @Watch("lfBarVariant") lfBarVariantChanged(newValue: boolean) { + if (!this.#framework) { + return; + } + if (newValue && this.lfTimeout) { this.#startProgressBar(); } else { @@ -201,6 +205,10 @@ export class LfSpinner implements LfSpinnerInterface { } @Watch("lfTimeout") lfTimeoutChanged(newValue: number, oldValue: number) { + if (!this.#framework) { + return; + } + if (newValue !== oldValue && this.lfBarVariant) { this.#startProgressBar(); } diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index 1680e1a..1579610 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -13,7 +13,7 @@ The text field may include an icon, label, helper text, and a character counter. | Property | Attribute | Description | Type | Default | | ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | | `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | | `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | | `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | diff --git a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx index 9b3298e..3371c4f 100644 --- a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx +++ b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx @@ -183,6 +183,10 @@ export class LfTypewriter implements LfTypewriterInterface { //#region Watchers @Watch("lfValue") handleLfValueChange() { + if (!this.#framework) { + return; + } + if (this.lfUpdatable) { this.#initializeTexts(); this.#resetTyping(); diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 0e652ab..dedfab8 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -60,7 +60,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Accordion component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Accordion component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -197,7 +197,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Article component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Article component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfArticleDataset", }, { @@ -515,7 +515,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The dataset for the button, containing the nodes to be displayed.\nThe first node will be used to set the icon and label if not provided.", + docs: "The dataset for the button, containing the nodes to be displayed.\r\nThe first node will be used to set the icon and label if not provided.", type: "LfDataDataset", }, { @@ -590,7 +590,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the button.\nRelevant only when lfToggable is set to true.", + docs: "Sets the initial state of the button.\r\nRelevant only when lfToggable is set to true.", type: "boolean", }, ], @@ -691,7 +691,7 @@ export const LF_DOC: LfShowcaseDoc = { docs: "Retrieves the HTMLLfImageElement from the canvas.", returns: { type: "Promise", - docs: "A promise that resolves with the HTMLLfImageElement instance\nrepresenting the image element in the canvas.", + docs: "A promise that resolves with the HTMLLfImageElement instance\r\nrepresenting the image element in the canvas.", }, signature: "() => Promise", }, @@ -715,7 +715,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "resizeCanvas", - docs: "Resizes the canvas elements to match the container's dimensions.\n\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\nto match the current container's height and width obtained via getBoundingClientRect().", + docs: "Resizes the canvas elements to match the container's dimensions.\r\n\r\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\r\nto match the current container's height and width obtained via getBoundingClientRect().", returns: { type: "Promise", docs: "A Promise that resolves when the resize operation is complete", @@ -724,7 +724,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasHeight", - docs: "Sets the canvas height for both the board and preview elements.\nIf a value is provided, it will set that specific height.\nIf no value is provided, it will set the height based on the container's bounding client rect.", + docs: "Sets the canvas height for both the board and preview elements.\r\nIf a value is provided, it will set that specific height.\r\nIf no value is provided, it will set the height based on the container's bounding client rect.", returns: { type: "Promise", docs: "Promise that resolves when the height has been set", @@ -733,7 +733,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasWidth", - docs: "Sets the width of the canvas element(s).\nIf a value is provided, sets the width to that specific value.\nIf no value is provided, sets the width to match the container's width.\nWhen cursor preview is enabled, also updates the preview canvas width.", + docs: "Sets the width of the canvas element(s).\r\nIf a value is provided, sets the width to that specific value.\r\nIf no value is provided, sets the width to match the container's width.\r\nWhen cursor preview is enabled, also updates the preview canvas width.", returns: { type: "Promise", docs: "Promise that resolves when width is set", @@ -788,7 +788,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfStrokeTolerance", - docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\nThis prop sets the tolerance of the algorithm (null to disable).", + docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\r\nThis prop sets the tolerance of the algorithm (null to disable).", type: "number", }, { @@ -879,12 +879,12 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Card component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Card component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLayout", - docs: 'The layout style for the card component.\nCan be set to different predefined styles like "material" design.', + docs: 'The layout style for the card component.\r\nCan be set to different predefined styles like "material" design.', type: '"debug" | "keywords" | "material" | "upload"', }, { @@ -971,7 +971,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "nextSlide", - docs: "Moves the carousel to the next slide.\nTriggers the next slide transition using the carousel controller's next function.", + docs: "Moves the carousel to the next slide.\r\nTriggers the next slide transition using the carousel controller's next function.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete.", @@ -980,7 +980,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "prevSlide", - docs: "Moves the carousel to the previous slide by invoking the `previous` method\nfrom the carousel controller's index set.", + docs: "Moves the carousel to the previous slide by invoking the `previous` method\r\nfrom the carousel controller's index set.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete", @@ -1014,7 +1014,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Carousel component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Carousel component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1139,12 +1139,12 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLegend", - docs: "Sets the position of the legend.\nSupported values: bottom, left, right, top, hidden.\nKeep in mind that legend types are tied to chart types, some combinations might not work.", + docs: "Sets the position of the legend.\r\nSupported values: bottom, left, right, top, hidden.\r\nKeep in mind that legend types are tied to chart types, some combinations might not work.", type: '"bottom" | "hidden" | "left" | "right" | "top"', }, { @@ -1169,8 +1169,8 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTypes", - docs: "The type of the chart.\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", - type: '("bar" | "line" | "radar" | "calendar" | "scatter" | "pie" | "area" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', + docs: "The type of the chart.\r\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", + type: '("area" | "line" | "bar" | "radar" | "calendar" | "scatter" | "pie" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', }, { name: "lfXAxis", @@ -1459,7 +1459,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chip component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chip component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1489,7 +1489,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the chip.\nRelevant only when the chip can be selected.", + docs: "Sets the initial state of the chip.\r\nRelevant only when the chip can be selected.", type: "string[]", }, ], @@ -1748,7 +1748,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1826,7 +1826,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "close", - docs: "Closes the drawer component.\nUses requestAnimationFrame to ensure smooth animation and state update.\nDispatches a 'close' custom event when the drawer is closed.", + docs: "Closes the drawer component.\r\nUses requestAnimationFrame to ensure smooth animation and state update.\r\nDispatches a 'close' custom event when the drawer is closed.", returns: { type: "Promise", docs: "Promise that resolves when the drawer closing animation is scheduled", @@ -1880,7 +1880,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "toggle", - docs: "Toggles the drawer state between opened and closed.\nIf the drawer is currently opened, it will be closed.\nIf the drawer is currently closed, it will be opened.", + docs: "Toggles the drawer state between opened and closed.\r\nIf the drawer is currently opened, it will be closed.\r\nIf the drawer is currently closed, it will be opened.", returns: { type: "Promise", docs: "A promise that resolves when the toggle operation is complete", @@ -1910,7 +1910,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfResponsive", - docs: 'A number representing a screen-width breakpoint for responsiveness.\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\notherwise `"slide"`.', + docs: 'A number representing a screen-width breakpoint for responsiveness.\r\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\r\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\r\notherwise `"slide"`.', type: "number", }, { @@ -2078,22 +2078,22 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHtmlAttributes", - docs: "Allows customization of the image element.\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", - docs: "Controls the display of a loading indicator.\nWhen enabled, a spinner is shown until the image finishes loading.\nThis property is not compatible with SVG images.", + docs: "Controls the display of a loading indicator.\r\nWhen enabled, a spinner is shown until the image finishes loading.\r\nThis property is not compatible with SVG images.", type: "boolean", }, { name: "lfSizeX", - docs: "Sets the width of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the width of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { name: "lfSizeY", - docs: "Sets the height of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the height of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { @@ -2108,7 +2108,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Defines the source URL of the image.\nThis property is used to set the image resource that the component should display.", + docs: "Defines the source URL of the image.\r\nThis property is used to set the image resource that the component should display.", type: "string", }, ], @@ -2143,7 +2143,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "addSnapshot", - docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\nIt has no effect when the current shape is not set.", + docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\r\nIt has no effect when the current shape is not set.", returns: { type: "Promise", docs: "", @@ -2152,7 +2152,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "clearHistory", - docs: "Clears the history related to the shape identified by the index.\nWhen index is not provided, it clear the full history.", + docs: "Clears the history related to the shape identified by the index.\r\nWhen index is not provided, it clear the full history.", returns: { type: "Promise", docs: "", @@ -2245,7 +2245,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Imageviewer component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Imageviewer component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2295,7 +2295,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "focusNext", - docs: "Moves focus to the next item in the list.\nIf no item is currently focused, focuses the selected item.\nIf the last item is focused, wraps around to the first item.", + docs: "Moves focus to the next item in the list.\r\nIf no item is currently focused, focuses the selected item.\r\nIf the last item is focused, wraps around to the first item.", returns: { type: "Promise", docs: "A promise that resolves when the focus operation is complete", @@ -2304,7 +2304,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "focusPrevious", - docs: "Focuses the previous item in the list.\nIf no item is currently focused, it focuses the selected item.\nIf focused item is the first one, it wraps around to the last item.", + docs: "Focuses the previous item in the list.\r\nIf no item is currently focused, it focuses the selected item.\r\nIf focused item is the first one, it wraps around to the last item.", returns: { type: "Promise", docs: "Promise that resolves when the focus operation is complete", @@ -2349,7 +2349,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "selectNode", - docs: "Selects a node in the list at the specified index.\nIf no index is provided, selects the currently focused node.", + docs: "Selects a node in the list at the specified index.\r\nIf no index is provided, selects the currently focused node.", returns: { type: "Promise", docs: "A promise that resolves when the selection is complete.", @@ -2369,7 +2369,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2414,7 +2414,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the list.\nRelevant only when the list can be selected.", + docs: "Sets the initial state of the list.\r\nRelevant only when the list can be selected.", type: "number", }, ], @@ -2543,7 +2543,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfColumns", - docs: "Number of columns of the masonry, doesn't affect sequential views.\nCan be set with a number or an array of numbers that identify each breakpoint.", + docs: "Number of columns of the masonry, doesn't affect sequential views.\r\nCan be set with a number or an array of numbers that identify each breakpoint.", type: "number | number[]", }, { @@ -2668,7 +2668,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "reset", - docs: "Resets the messenger component to its initial state.\nClears covers, current character, and message history.\nReinitializes the component.", + docs: "Resets the messenger component to its initial state.\r\nClears covers, current character, and message history.\r\nReinitializes the component.", returns: { type: "Promise", docs: "A promise that resolves when the reset is complete", @@ -2702,7 +2702,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfMessengerDataset", }, { @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -2928,7 +2928,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfIcon", docs: "Displays an animated SVG placeholder until the component is loaded.", - type: '"x" | "id" | "replace" | "search" | "brush" | "list" | "progress" | "upload" | "check" | "code" | "copy" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "download" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "article" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "key" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', + type: '"article" | "code" | "progress" | "download" | "id" | "x" | "replace" | "copy" | "key" | "search" | "brush" | "list" | "upload" | "check" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', }, { name: "lfProps", @@ -2947,7 +2947,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTrigger", - docs: "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport.", + docs: "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport.", type: '"both" | "props" | "viewport"', }, { @@ -3026,7 +3026,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfCenteredLabel", - docs: "Displays the label in the middle of the progress bar.\nIt's the default for the radial variant and can't be changed.", + docs: "Displays the label in the middle of the progress bar.\r\nIt's the default for the radial variant and can't be changed.", type: "boolean", }, { @@ -3185,7 +3185,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfLeadingLabel", - docs: "When true, displays the label before the slider component.\nDefaults to `false`.", + docs: "When true, displays the label before the slider component.\r\nDefaults to `false`.", type: "boolean", }, { @@ -3364,7 +3364,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDimensions", - docs: "Defines the width and height of the spinner.\nIn the bar variant, it specifies only the height.", + docs: "Defines the width and height of the spinner.\r\nIn the bar variant, it specifies only the height.", type: "string", }, { @@ -3571,7 +3571,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Tabbar component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tabbar component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -3726,13 +3726,13 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHelper", - docs: "Sets the helper text for the text field.\nThe helper text can provide additional information or instructions to the user.", + docs: "Sets the helper text for the text field.\r\nThe helper text can provide additional information or instructions to the user.", type: "LfTextfieldHelper", }, { name: "lfHtmlAttributes", - docs: "Allows customization of the input or textarea element through additional HTML attributes.\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", @@ -4172,7 +4172,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Tree component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tree component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -4187,7 +4187,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfInitialExpansionDepth", - docs: "Sets the initial expanded nodes based on the specified depth.\nIf the property is not provided, all nodes in the tree will be expanded.", + docs: "Sets the initial expanded nodes based on the specified depth.\r\nIf the property is not provided, all nodes in the tree will be expanded.", type: "number", }, { diff --git a/packages/showcase/src/components/lf-showcase/lf-showcase.tsx b/packages/showcase/src/components/lf-showcase/lf-showcase.tsx index b6fa1c6..46bb1b0 100644 --- a/packages/showcase/src/components/lf-showcase/lf-showcase.tsx +++ b/packages/showcase/src/components/lf-showcase/lf-showcase.tsx @@ -132,6 +132,10 @@ export class LfShowcase { //#region Watchers @Watch("currentState") handleCurrentStateChange(newValue: LfShowcaseViews) { + if (!this.#framework) { + return; + } + const params = new URLSearchParams(); if (newValue.Components) { @@ -147,6 +151,10 @@ export class LfShowcase { } @Watch("lfDrawer") handleDrawerChange(newValue: boolean) { + if (!this.#framework) { + return; + } + if (this.#drawer) { if (newValue) { this.#drawer.open(); From 834a1f36398b7f03c1d1cb75d8d8274f27b955bf Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 20:23:02 +0100 Subject: [PATCH 08/27] fix(image): improved RegEx to catch images --- packages/core/src/components/lf-image/lf-image.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/lf-image/lf-image.tsx b/packages/core/src/components/lf-image/lf-image.tsx index 493110a..8e575dd 100644 --- a/packages/core/src/components/lf-image/lf-image.tsx +++ b/packages/core/src/components/lf-image/lf-image.tsx @@ -293,7 +293,8 @@ export class LfImage implements LfImageInterface { if (!lfValue || typeof lfValue !== "string") return false; - const resourceUrlPattern = /^(https?:\/\/|\/|\.{1,2}\/|[a-zA-Z]:\\|\\\\).+/; + const resourceUrlPattern = + /^(?:(?:https?:\/\/|\/|\.{1,2}\/|[a-zA-Z]:\\|\\\\|blob:).+|data:image\/[a-zA-Z0-9+.-]+(?:;charset=[^;,]+)?(?:;base64)?,.*)$/; return resourceUrlPattern.test(lfValue); } From 537bc6039c62c902b0557330f2220af03768a2ad Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Feb 2025 19:23:46 +0000 Subject: [PATCH 09/27] chore(release): publish --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 4 ++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 7 +++++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 4 ++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 4 ++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 6 ++++++ packages/showcase/package.json | 2 +- 16 files changed, 49 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59d314f..59d2fdb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +### Bug Fixes + +- **cicd:** improved component count action ([0d5b604](https://github.com/lucafoscili/lf-widgets/commit/0d5b604a410cc881a27fa4a48e94b5ed3a91134e)) +- **image:** improved RegEx to catch images ([834a1f3](https://github.com/lucafoscili/lf-widgets/commit/834a1f36398b7f03c1d1cb75d8d8274f27b955bf)) +- **lifecycle:** added safeguard to Watchers preventing early executions ([17146b0](https://github.com/lucafoscili/lf-widgets/commit/17146b0685e03f3925880e83ca02844c63aca765)) + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 61500af..53f591a 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index f6f19ab..ae414cf 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/assets + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) ### Bug Fixes diff --git a/packages/assets/package.json b/packages/assets/package.json index b6f35b3..aa86e38 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 760abdf..6ac239d 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +### Bug Fixes + +- **image:** improved RegEx to catch images ([834a1f3](https://github.com/lucafoscili/lf-widgets/commit/834a1f36398b7f03c1d1cb75d8d8274f27b955bf)) +- **lifecycle:** added safeguard to Watchers preventing early executions ([17146b0](https://github.com/lucafoscili/lf-widgets/commit/17146b0685e03f3925880e83ca02844c63aca765)) + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/core diff --git a/packages/core/package.json b/packages/core/package.json index e72b506..d05cc12 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index e97ee2b..c586037 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/foundations + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/foundations diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 0db4a9d..7b7e404 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index 025a983..4d4a7d7 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/framework + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/framework diff --git a/packages/framework/package.json b/packages/framework/package.json index 2d2c56d..c9a9bb9 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 7c48f52..fdffaf8 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 245258c..c8466f5 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 67f2e20..9e95f47 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index d42b3dd..26960f6 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index cc6eba6..ff76e1d 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) + +### Bug Fixes + +- **lifecycle:** added safeguard to Watchers preventing early executions ([17146b0](https://github.com/lucafoscili/lf-widgets/commit/17146b0685e03f3925880e83ca02844c63aca765)) + ## [0.3.2-rc.1](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.0...0.3.2-rc.1) (2025-02-13) **Note:** Version bump only for package @lf-widgets/showcase diff --git a/packages/showcase/package.json b/packages/showcase/package.json index abc82e8..450e7a5 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.1", + "version": "0.3.2-rc.2", "publishConfig": { "access": "public" }, From 98f6b7924276bda05a25b59ca80f0571fb0e61ed Mon Sep 17 00:00:00 2001 From: lucafoscili Date: Thu, 13 Feb 2025 19:25:30 +0000 Subject: [PATCH 10/27] chore: bump versions for release candidate --- .../core/src/components/lf-chart/readme.md | 2 +- .../core/src/components/lf-image/readme.md | 2 +- .../src/components/lf-photoframe/readme.md | 4 +- .../src/components/lf-placeholder/readme.md | 2 +- .../src/components/lf-textfield/readme.md | 2 +- .../src/components/lf-showcase/assets/doc.ts | 108 +++++++++--------- 6 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index e45cc45..02efe85 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index 8161564..3bbd698 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -15,7 +15,7 @@ The component supports various customization options, including size, styling, a | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | | `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | | `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index 54226d7..c9ef3b6 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -15,10 +15,10 @@ The image may be overlaid with text or other elements. | Property | Attribute | Description | Type | Default | | --------------- | -------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index c321c99..cea3fa3 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index 1579610..1680e1a 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -13,7 +13,7 @@ The text field may include an icon, label, helper text, and a character counter. | Property | Attribute | Description | Type | Default | | ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | | `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | | `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | | `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index dedfab8..0e652ab 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -60,7 +60,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Accordion component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Accordion component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -197,7 +197,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Article component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Article component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfArticleDataset", }, { @@ -515,7 +515,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The dataset for the button, containing the nodes to be displayed.\r\nThe first node will be used to set the icon and label if not provided.", + docs: "The dataset for the button, containing the nodes to be displayed.\nThe first node will be used to set the icon and label if not provided.", type: "LfDataDataset", }, { @@ -590,7 +590,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the button.\r\nRelevant only when lfToggable is set to true.", + docs: "Sets the initial state of the button.\nRelevant only when lfToggable is set to true.", type: "boolean", }, ], @@ -691,7 +691,7 @@ export const LF_DOC: LfShowcaseDoc = { docs: "Retrieves the HTMLLfImageElement from the canvas.", returns: { type: "Promise", - docs: "A promise that resolves with the HTMLLfImageElement instance\r\nrepresenting the image element in the canvas.", + docs: "A promise that resolves with the HTMLLfImageElement instance\nrepresenting the image element in the canvas.", }, signature: "() => Promise", }, @@ -715,7 +715,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "resizeCanvas", - docs: "Resizes the canvas elements to match the container's dimensions.\r\n\r\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\r\nto match the current container's height and width obtained via getBoundingClientRect().", + docs: "Resizes the canvas elements to match the container's dimensions.\n\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\nto match the current container's height and width obtained via getBoundingClientRect().", returns: { type: "Promise", docs: "A Promise that resolves when the resize operation is complete", @@ -724,7 +724,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasHeight", - docs: "Sets the canvas height for both the board and preview elements.\r\nIf a value is provided, it will set that specific height.\r\nIf no value is provided, it will set the height based on the container's bounding client rect.", + docs: "Sets the canvas height for both the board and preview elements.\nIf a value is provided, it will set that specific height.\nIf no value is provided, it will set the height based on the container's bounding client rect.", returns: { type: "Promise", docs: "Promise that resolves when the height has been set", @@ -733,7 +733,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasWidth", - docs: "Sets the width of the canvas element(s).\r\nIf a value is provided, sets the width to that specific value.\r\nIf no value is provided, sets the width to match the container's width.\r\nWhen cursor preview is enabled, also updates the preview canvas width.", + docs: "Sets the width of the canvas element(s).\nIf a value is provided, sets the width to that specific value.\nIf no value is provided, sets the width to match the container's width.\nWhen cursor preview is enabled, also updates the preview canvas width.", returns: { type: "Promise", docs: "Promise that resolves when width is set", @@ -788,7 +788,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfStrokeTolerance", - docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\r\nThis prop sets the tolerance of the algorithm (null to disable).", + docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\nThis prop sets the tolerance of the algorithm (null to disable).", type: "number", }, { @@ -879,12 +879,12 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Card component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Card component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLayout", - docs: 'The layout style for the card component.\r\nCan be set to different predefined styles like "material" design.', + docs: 'The layout style for the card component.\nCan be set to different predefined styles like "material" design.', type: '"debug" | "keywords" | "material" | "upload"', }, { @@ -971,7 +971,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "nextSlide", - docs: "Moves the carousel to the next slide.\r\nTriggers the next slide transition using the carousel controller's next function.", + docs: "Moves the carousel to the next slide.\nTriggers the next slide transition using the carousel controller's next function.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete.", @@ -980,7 +980,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "prevSlide", - docs: "Moves the carousel to the previous slide by invoking the `previous` method\r\nfrom the carousel controller's index set.", + docs: "Moves the carousel to the previous slide by invoking the `previous` method\nfrom the carousel controller's index set.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete", @@ -1014,7 +1014,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Carousel component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Carousel component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1139,12 +1139,12 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLegend", - docs: "Sets the position of the legend.\r\nSupported values: bottom, left, right, top, hidden.\r\nKeep in mind that legend types are tied to chart types, some combinations might not work.", + docs: "Sets the position of the legend.\nSupported values: bottom, left, right, top, hidden.\nKeep in mind that legend types are tied to chart types, some combinations might not work.", type: '"bottom" | "hidden" | "left" | "right" | "top"', }, { @@ -1169,8 +1169,8 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTypes", - docs: "The type of the chart.\r\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", - type: '("area" | "line" | "bar" | "radar" | "calendar" | "scatter" | "pie" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', + docs: "The type of the chart.\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", + type: '("bar" | "line" | "radar" | "calendar" | "scatter" | "pie" | "area" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', }, { name: "lfXAxis", @@ -1459,7 +1459,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chip component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chip component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1489,7 +1489,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the chip.\r\nRelevant only when the chip can be selected.", + docs: "Sets the initial state of the chip.\nRelevant only when the chip can be selected.", type: "string[]", }, ], @@ -1748,7 +1748,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1826,7 +1826,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "close", - docs: "Closes the drawer component.\r\nUses requestAnimationFrame to ensure smooth animation and state update.\r\nDispatches a 'close' custom event when the drawer is closed.", + docs: "Closes the drawer component.\nUses requestAnimationFrame to ensure smooth animation and state update.\nDispatches a 'close' custom event when the drawer is closed.", returns: { type: "Promise", docs: "Promise that resolves when the drawer closing animation is scheduled", @@ -1880,7 +1880,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "toggle", - docs: "Toggles the drawer state between opened and closed.\r\nIf the drawer is currently opened, it will be closed.\r\nIf the drawer is currently closed, it will be opened.", + docs: "Toggles the drawer state between opened and closed.\nIf the drawer is currently opened, it will be closed.\nIf the drawer is currently closed, it will be opened.", returns: { type: "Promise", docs: "A promise that resolves when the toggle operation is complete", @@ -1910,7 +1910,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfResponsive", - docs: 'A number representing a screen-width breakpoint for responsiveness.\r\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\r\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\r\notherwise `"slide"`.', + docs: 'A number representing a screen-width breakpoint for responsiveness.\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\notherwise `"slide"`.', type: "number", }, { @@ -2078,22 +2078,22 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHtmlAttributes", - docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the image element.\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", - docs: "Controls the display of a loading indicator.\r\nWhen enabled, a spinner is shown until the image finishes loading.\r\nThis property is not compatible with SVG images.", + docs: "Controls the display of a loading indicator.\nWhen enabled, a spinner is shown until the image finishes loading.\nThis property is not compatible with SVG images.", type: "boolean", }, { name: "lfSizeX", - docs: "Sets the width of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the width of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { name: "lfSizeY", - docs: "Sets the height of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the height of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { @@ -2108,7 +2108,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Defines the source URL of the image.\r\nThis property is used to set the image resource that the component should display.", + docs: "Defines the source URL of the image.\nThis property is used to set the image resource that the component should display.", type: "string", }, ], @@ -2143,7 +2143,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "addSnapshot", - docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\r\nIt has no effect when the current shape is not set.", + docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\nIt has no effect when the current shape is not set.", returns: { type: "Promise", docs: "", @@ -2152,7 +2152,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "clearHistory", - docs: "Clears the history related to the shape identified by the index.\r\nWhen index is not provided, it clear the full history.", + docs: "Clears the history related to the shape identified by the index.\nWhen index is not provided, it clear the full history.", returns: { type: "Promise", docs: "", @@ -2245,7 +2245,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Imageviewer component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Imageviewer component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2295,7 +2295,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "focusNext", - docs: "Moves focus to the next item in the list.\r\nIf no item is currently focused, focuses the selected item.\r\nIf the last item is focused, wraps around to the first item.", + docs: "Moves focus to the next item in the list.\nIf no item is currently focused, focuses the selected item.\nIf the last item is focused, wraps around to the first item.", returns: { type: "Promise", docs: "A promise that resolves when the focus operation is complete", @@ -2304,7 +2304,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "focusPrevious", - docs: "Focuses the previous item in the list.\r\nIf no item is currently focused, it focuses the selected item.\r\nIf focused item is the first one, it wraps around to the last item.", + docs: "Focuses the previous item in the list.\nIf no item is currently focused, it focuses the selected item.\nIf focused item is the first one, it wraps around to the last item.", returns: { type: "Promise", docs: "Promise that resolves when the focus operation is complete", @@ -2349,7 +2349,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "selectNode", - docs: "Selects a node in the list at the specified index.\r\nIf no index is provided, selects the currently focused node.", + docs: "Selects a node in the list at the specified index.\nIf no index is provided, selects the currently focused node.", returns: { type: "Promise", docs: "A promise that resolves when the selection is complete.", @@ -2369,7 +2369,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2414,7 +2414,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the list.\r\nRelevant only when the list can be selected.", + docs: "Sets the initial state of the list.\nRelevant only when the list can be selected.", type: "number", }, ], @@ -2543,7 +2543,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfColumns", - docs: "Number of columns of the masonry, doesn't affect sequential views.\r\nCan be set with a number or an array of numbers that identify each breakpoint.", + docs: "Number of columns of the masonry, doesn't affect sequential views.\nCan be set with a number or an array of numbers that identify each breakpoint.", type: "number | number[]", }, { @@ -2668,7 +2668,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "reset", - docs: "Resets the messenger component to its initial state.\r\nClears covers, current character, and message history.\r\nReinitializes the component.", + docs: "Resets the messenger component to its initial state.\nClears covers, current character, and message history.\nReinitializes the component.", returns: { type: "Promise", docs: "A promise that resolves when the reset is complete", @@ -2702,7 +2702,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfMessengerDataset", }, { @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -2928,7 +2928,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfIcon", docs: "Displays an animated SVG placeholder until the component is loaded.", - type: '"article" | "code" | "progress" | "download" | "id" | "x" | "replace" | "copy" | "key" | "search" | "brush" | "list" | "upload" | "check" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', + type: '"x" | "id" | "replace" | "search" | "brush" | "list" | "progress" | "upload" | "check" | "code" | "copy" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "download" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "article" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "key" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', }, { name: "lfProps", @@ -2947,7 +2947,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTrigger", - docs: "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport.", + docs: "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport.", type: '"both" | "props" | "viewport"', }, { @@ -3026,7 +3026,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfCenteredLabel", - docs: "Displays the label in the middle of the progress bar.\r\nIt's the default for the radial variant and can't be changed.", + docs: "Displays the label in the middle of the progress bar.\nIt's the default for the radial variant and can't be changed.", type: "boolean", }, { @@ -3185,7 +3185,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfLeadingLabel", - docs: "When true, displays the label before the slider component.\r\nDefaults to `false`.", + docs: "When true, displays the label before the slider component.\nDefaults to `false`.", type: "boolean", }, { @@ -3364,7 +3364,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDimensions", - docs: "Defines the width and height of the spinner.\r\nIn the bar variant, it specifies only the height.", + docs: "Defines the width and height of the spinner.\nIn the bar variant, it specifies only the height.", type: "string", }, { @@ -3571,7 +3571,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Tabbar component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tabbar component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -3726,13 +3726,13 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHelper", - docs: "Sets the helper text for the text field.\r\nThe helper text can provide additional information or instructions to the user.", + docs: "Sets the helper text for the text field.\nThe helper text can provide additional information or instructions to the user.", type: "LfTextfieldHelper", }, { name: "lfHtmlAttributes", - docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the input or textarea element through additional HTML attributes.\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", @@ -4172,7 +4172,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Tree component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tree component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -4187,7 +4187,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfInitialExpansionDepth", - docs: "Sets the initial expanded nodes based on the specified depth.\r\nIf the property is not provided, all nodes in the tree will be expanded.", + docs: "Sets the initial expanded nodes based on the specified depth.\nIf the property is not provided, all nodes in the tree will be expanded.", type: "number", }, { From 7751582ccc86a8bbd0c6266396a7a4be2c01c1ec Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 21:40:48 +0100 Subject: [PATCH 11/27] fix: replaced composed tagnames with direct h() invocation --- .../core/src/components/lf-code/lf-code.tsx | 30 +++++++++-------- .../lf-placeholder/lf-placeholder.tsx | 16 ++++------ .../lf-typewriter/lf-typewriter.tsx | 31 +++++++++++------- .../framework/src/lf-data/helpers.cell.tsx | 32 +++++++++++-------- .../lf-showcase/assets/data/code.ts | 1 + .../components/component-template.tsx | 18 +++++------ 6 files changed, 70 insertions(+), 58 deletions(-) diff --git a/packages/core/src/components/lf-code/lf-code.tsx b/packages/core/src/components/lf-code/lf-code.tsx index 6b7266f..4ba42da 100644 --- a/packages/core/src/components/lf-code/lf-code.tsx +++ b/packages/core/src/components/lf-code/lf-code.tsx @@ -493,19 +493,23 @@ export class LfCode implements LfCodeInterface { part={this.#p.code} > {this.lfShowHeader && this.#prepHeader()} - { - if (el) { - this.#el = el; - } - }} - > - {shouldPreserveSpace ? {this.value} : this.value} - + {h( + TagName, + { + className: `language-${lfLanguage} ${shouldPreserveSpace ? "" : "body"}`, + "data-lf": this.#lf.fadeIn, + key: this.value, + part: this.#p.prism, + ref: (el: HTMLDivElement) => { + if (el) { + this.#el = el; + } + }, + }, + shouldPreserveSpace + ? h("code", null, this.value) + : h("span", null, this.value), + )} diff --git a/packages/core/src/components/lf-placeholder/lf-placeholder.tsx b/packages/core/src/components/lf-placeholder/lf-placeholder.tsx index efc8919..6dd33a6 100644 --- a/packages/core/src/components/lf-placeholder/lf-placeholder.tsx +++ b/packages/core/src/components/lf-placeholder/lf-placeholder.tsx @@ -316,16 +316,12 @@ export class LfPlaceholder implements LfPlaceholderInterface { }, }; const Tag = ("lf-" + name) as LfComponentTag; - content = ( - - (this.#placeholderComponent = el) - } - > - ); + content = h(Tag, { + ...(sanitizeProps(lfProps, lfValue) as any), + ...evDispatcher, + "data-lf": LF_ATTRIBUTES.fadeIn, + ref: (el: LfComponentRootElement) => (this.#placeholderComponent = el), + }); } else if (lfIcon) { const { style } = assets.get(`./assets/svg/${lfIcon}.svg`); content = ( diff --git a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx index 3371c4f..18a831f 100644 --- a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx +++ b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx @@ -317,18 +317,25 @@ export class LfTypewriter implements LfTypewriterInterface { return (
- - {displayedText || "\u00A0"} - {shouldShowCursor && ( - - )} - + {h( + TagName, + { + className: bemClass(typewriter._, typewriter.text), + part: this.#p.text, + }, + [ + h("span", null, displayedText || "\u00A0"), + shouldShowCursor && + h( + "span", + { + className: bemClass(typewriter._, typewriter.cursor), + part: this.#p.cursor, + }, + null, + ), + ], + )}
); } diff --git a/packages/framework/src/lf-data/helpers.cell.tsx b/packages/framework/src/lf-data/helpers.cell.tsx index 0040b33..7a98742 100644 --- a/packages/framework/src/lf-data/helpers.cell.tsx +++ b/packages/framework/src/lf-data/helpers.cell.tsx @@ -100,20 +100,24 @@ export const cellDecorateShapes = < }; elements.push( - ) => { - if (el && Array.isArray(refsCb) && refsCb[index]) { - const cb = refsCb[index]; - cb(el); - } - }} - {...eventHandler} - {...sanitizeProps(toSpread, component)} - >, + h( + TagName, + { + "data-component": component, + "data-cy": CY_ATTRIBUTES.shape, + id: `${shape}${index}`, + key: `${shape}${index}`, + ref: (el: LfComponentRootElement) => { + if (el && Array.isArray(refsCb) && refsCb[index]) { + const cb = refsCb[index]; + cb(el); + } + }, + ...eventHandler, + ...sanitizeProps(toSpread, component), + }, + null, + ), ); } break; diff --git a/packages/showcase/src/components/lf-showcase/assets/data/code.ts b/packages/showcase/src/components/lf-showcase/assets/data/code.ts index 60de4aa..dc5483f 100644 --- a/packages/showcase/src/components/lf-showcase/assets/data/code.ts +++ b/packages/showcase/src/components/lf-showcase/assets/data/code.ts @@ -90,6 +90,7 @@ export const getCodeFixtures = ( //#region configuration configuration: { columns: { + languages: 4, sizes: 4, states: 4, uncategorized: 3, diff --git a/packages/showcase/src/components/lf-showcase/components/component-template.tsx b/packages/showcase/src/components/lf-showcase/components/component-template.tsx index d2b50a9..45b4ae1 100644 --- a/packages/showcase/src/components/lf-showcase/components/component-template.tsx +++ b/packages/showcase/src/components/lf-showcase/components/component-template.tsx @@ -137,15 +137,15 @@ const prepExample = ( const { description, hasMinHeight, hasParent, props, slots } = example; const TagName = component; const p = props as LfComponentPropsFor; - const tag = ( - - {prepSlot(component, manager, slots)} - + const tag = h( + TagName, + { + "data-cy": CY_ATTRIBUTES.showcaseExample, + key: `${category}-${id}`, + id: `${category}-${id}`, + ...(p as any), + }, + prepSlot(component, manager, slots), ); return ( From 959aef3160046a02626b7f914b5255b8dd0ec410 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 13 Feb 2025 21:44:39 +0100 Subject: [PATCH 12/27] fix(progressbar): fixed radial state colors --- .../src/components/lf-progressbar/lf-progressbar.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/lf-progressbar/lf-progressbar.scss b/packages/core/src/components/lf-progressbar/lf-progressbar.scss index c2c98a0..11a5f91 100644 --- a/packages/core/src/components/lf-progressbar/lf-progressbar.scss +++ b/packages/core/src/components/lf-progressbar/lf-progressbar.scss @@ -183,13 +183,8 @@ $borderC: 0.1em solid rgba(var(--lf-color-surface), 0.375); &--has-value { .pie__half-circle { & { - /** - * @prop --lf-#{$comp}-radial-color: Sets the color for the radial variant of the #{$comp} component. - * Defaults to => rgb(var(--lf-color-primary)) - */ - border-color: var( - --lf-#{$comp}-radial-color, - rgb(var(--lf-color-primary)) + border-color: rgb( + var(--lf-#{$comp}-color-primary, rgb(var(--lf-color-primary))) ); } From 3a9f0f27ee33cd3f214cfd11f58f683251c6b78e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Feb 2025 20:45:20 +0000 Subject: [PATCH 13/27] chore(release): publish --- CHANGELOG.md | 7 +++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 4 ++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 7 +++++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 4 ++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 6 ++++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 6 ++++++ packages/showcase/package.json | 2 +- 16 files changed, 50 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59d2fdb..1a9bda1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +### Bug Fixes + +- **progressbar:** fixed radial state colors ([959aef3](https://github.com/lucafoscili/lf-widgets/commit/959aef3160046a02626b7f914b5255b8dd0ec410)) +- replaced composed tagnames with direct h() invocation ([7751582](https://github.com/lucafoscili/lf-widgets/commit/7751582ccc86a8bbd0c6266396a7a4be2c01c1ec)) + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 53f591a..1be9c7d 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index ae414cf..dc80023 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/assets + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) **Note:** Version bump only for package @lf-widgets/assets diff --git a/packages/assets/package.json b/packages/assets/package.json index aa86e38..529cac1 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 6ac239d..324596b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +### Bug Fixes + +- **progressbar:** fixed radial state colors ([959aef3](https://github.com/lucafoscili/lf-widgets/commit/959aef3160046a02626b7f914b5255b8dd0ec410)) +- replaced composed tagnames with direct h() invocation ([7751582](https://github.com/lucafoscili/lf-widgets/commit/7751582ccc86a8bbd0c6266396a7a4be2c01c1ec)) + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) ### Bug Fixes diff --git a/packages/core/package.json b/packages/core/package.json index d05cc12..950aa05 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index c586037..c8bbf1e 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/foundations + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) **Note:** Version bump only for package @lf-widgets/foundations diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 7b7e404..4577c06 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index 4d4a7d7..84c9ab4 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +### Bug Fixes + +- replaced composed tagnames with direct h() invocation ([7751582](https://github.com/lucafoscili/lf-widgets/commit/7751582ccc86a8bbd0c6266396a7a4be2c01c1ec)) + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) **Note:** Version bump only for package @lf-widgets/framework diff --git a/packages/framework/package.json b/packages/framework/package.json index c9a9bb9..75b8132 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index fdffaf8..0c98a5c 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index c8466f5..5e55476 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 9e95f47..0290f35 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index 26960f6..7461257 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index ff76e1d..2fbd47b 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) + +### Bug Fixes + +- replaced composed tagnames with direct h() invocation ([7751582](https://github.com/lucafoscili/lf-widgets/commit/7751582ccc86a8bbd0c6266396a7a4be2c01c1ec)) + ## [0.3.2-rc.2](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.1...0.3.2-rc.2) (2025-02-13) ### Bug Fixes diff --git a/packages/showcase/package.json b/packages/showcase/package.json index 450e7a5..ffb8333 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.2", + "version": "0.3.2-rc.3", "publishConfig": { "access": "public" }, From c4144009d2f0996fb1c0d0ec79e4e3d00ebf74d7 Mon Sep 17 00:00:00 2001 From: lucafoscili Date: Thu, 13 Feb 2025 20:46:55 +0000 Subject: [PATCH 14/27] chore: bump versions for release candidate --- .../src/components/lf-progressbar/readme.md | 29 +++++++++---------- .../src/components/lf-showcase/assets/doc.ts | 4 --- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/core/src/components/lf-progressbar/readme.md b/packages/core/src/components/lf-progressbar/readme.md index 6d6cbd0..b7d6c3d 100644 --- a/packages/core/src/components/lf-progressbar/readme.md +++ b/packages/core/src/components/lf-progressbar/readme.md @@ -84,21 +84,20 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ----------------------------------- | --------------------------------------------------------------------------------------------------------------- | -| `--lf-progressbar-border-color` | Sets the border color for the progressbar component. Defaults to => var(--lf-color-border) | -| `--lf-progressbar-border-radius` | Sets the border radius for the progressbar component. Defaults to => var(--lf-ui-border-radius) | -| `--lf-progressbar-color-on-bg` | Sets the color-on-bg color for the progressbar component. Defaults to => var(--lf-color-on-bg) | -| `--lf-progressbar-color-on-primary` | Sets the color-on-primary color for the progressbar component. Defaults to => var(--lf-color-on-primary) | -| `--lf-progressbar-color-on-surface` | Sets the color-on-surface color for the progressbar component. Defaults to => var(--lf-color-on-surface) | -| `--lf-progressbar-color-primary` | Sets the color-primary color for the progressbar component. Defaults to => var(--lf-color-primary) | -| `--lf-progressbar-color-surface` | Sets the color-surface color for the progressbar component. Defaults to => var(--lf-color-surface) | -| `--lf-progressbar-font-family` | Sets the primary font family for the progressbar component. Defaults to => var(--lf-font-family-primary) | -| `--lf-progressbar-font-size` | Sets the font size for the progressbar component. Defaults to => var(--lf-font-size) | -| `--lf-progressbar-height` | Sets the height for the progressbar component. Defaults to => 100% | -| `--lf-progressbar-padding` | Sets the padding for the progressbar component. Defaults to => 2em 0.5em | -| `--lf-progressbar-radial-color` | Sets the color for the radial variant of the progressbar component. Defaults to => rgb(var(--lf-color-primary)) | -| `--lf-progressbar-width` | Sets the width for the progressbar component. Defaults to => 100% | +| Name | Description | +| ----------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `--lf-progressbar-border-color` | Sets the border color for the progressbar component. Defaults to => var(--lf-color-border) | +| `--lf-progressbar-border-radius` | Sets the border radius for the progressbar component. Defaults to => var(--lf-ui-border-radius) | +| `--lf-progressbar-color-on-bg` | Sets the color-on-bg color for the progressbar component. Defaults to => var(--lf-color-on-bg) | +| `--lf-progressbar-color-on-primary` | Sets the color-on-primary color for the progressbar component. Defaults to => var(--lf-color-on-primary) | +| `--lf-progressbar-color-on-surface` | Sets the color-on-surface color for the progressbar component. Defaults to => var(--lf-color-on-surface) | +| `--lf-progressbar-color-primary` | Sets the color-primary color for the progressbar component. Defaults to => var(--lf-color-primary) | +| `--lf-progressbar-color-surface` | Sets the color-surface color for the progressbar component. Defaults to => var(--lf-color-surface) | +| `--lf-progressbar-font-family` | Sets the primary font family for the progressbar component. Defaults to => var(--lf-font-family-primary) | +| `--lf-progressbar-font-size` | Sets the font size for the progressbar component. Defaults to => var(--lf-font-size) | +| `--lf-progressbar-height` | Sets the height for the progressbar component. Defaults to => 100% | +| `--lf-progressbar-padding` | Sets the padding for the progressbar component. Defaults to => 2em 0.5em | +| `--lf-progressbar-width` | Sets the width for the progressbar component. Defaults to => 100% | ## Dependencies diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 0e652ab..093189d 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -3110,10 +3110,6 @@ export const LF_DOC: LfShowcaseDoc = { name: "--lf-progressbar-padding", docs: "Sets the padding for the progressbar component. Defaults to => 2em 0.5em", }, - { - name: "--lf-progressbar-radial-color", - docs: "Sets the color for the radial variant of the progressbar component. Defaults to => rgb(var(--lf-color-primary))", - }, { name: "--lf-progressbar-width", docs: "Sets the width for the progressbar component. Defaults to => 100%", From 72a2792e06dc716b094aecec038c115c8826a53b Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 00:07:17 +0100 Subject: [PATCH 15/27] fix(shapes): correctly imported shapes in related consumers --- .../components/lf-accordion/lf-accordion.tsx | 2 + .../src/components/lf-accordion/readme.md | 27 +++++ .../src/components/lf-article/lf-article.tsx | 2 + .../core/src/components/lf-article/readme.md | 27 +++++ .../core/src/components/lf-button/readme.md | 6 + .../core/src/components/lf-card/lf-card.tsx | 5 +- .../core/src/components/lf-card/readme.md | 27 +++++ .../components/lf-carousel/lf-carousel.tsx | 2 + .../core/src/components/lf-carousel/readme.md | 12 ++ .../core/src/components/lf-chart/readme.md | 2 +- .../core/src/components/lf-code/lf-code.tsx | 30 +++-- .../src/components/lf-compare/lf-compare.tsx | 2 + .../core/src/components/lf-compare/readme.md | 12 ++ .../core/src/components/lf-image/readme.md | 14 ++- .../src/components/lf-imageviewer/readme.md | 6 + .../core/src/components/lf-list/readme.md | 12 ++ .../src/components/lf-masonry/lf-masonry.tsx | 2 + .../core/src/components/lf-masonry/readme.md | 12 ++ .../src/components/lf-photoframe/readme.md | 4 +- .../lf-placeholder/lf-placeholder.tsx | 16 ++- .../src/components/lf-placeholder/readme.md | 2 +- .../src/components/lf-progressbar/readme.md | 12 ++ .../core/src/components/lf-spinner/readme.md | 12 ++ .../src/components/lf-textfield/readme.md | 14 ++- .../lf-typewriter/lf-typewriter.tsx | 31 ++--- .../src/components/lf-typewriter/readme.md | 12 ++ packages/core/src/utils/shapes.ts | 42 +++++++ .../src/framework/framework.declarations.ts | 12 +- .../framework/src/lf-data/helpers.cell.tsx | 32 +++--- .../src/lf-framework/lf-framework.ts | 12 ++ .../src/components/lf-showcase/assets/doc.ts | 108 +++++++++--------- .../components/component-template.tsx | 18 +-- 32 files changed, 397 insertions(+), 132 deletions(-) create mode 100644 packages/core/src/utils/shapes.ts diff --git a/packages/core/src/components/lf-accordion/lf-accordion.tsx b/packages/core/src/components/lf-accordion/lf-accordion.tsx index a4a2a36..9ab131d 100644 --- a/packages/core/src/components/lf-accordion/lf-accordion.tsx +++ b/packages/core/src/components/lf-accordion/lf-accordion.tsx @@ -32,6 +32,7 @@ import { VNode, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; +import { defineShapes } from "../../utils/shapes"; /** * Represents an accordion-style component that displays a list of data items, @@ -416,6 +417,7 @@ export class LfAccordion implements LfAccordionInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); } componentDidLoad() { const { info } = this.#framework.debug; diff --git a/packages/core/src/components/lf-accordion/readme.md b/packages/core/src/components/lf-accordion/readme.md index 7d98b86..b5e8824 100644 --- a/packages/core/src/components/lf-accordion/readme.md +++ b/packages/core/src/components/lf-accordion/readme.md @@ -130,6 +130,33 @@ Type: `Promise` | `--lf-accordion-text-margin` | Sets the margin of the accordion text. Defaults to => 0 0.5em 0 0 | +## Dependencies + +### Depends on + +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) +- [lf-button](../lf-button) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) + +### Graph +```mermaid +graph TD; + lf-accordion --> lf-list + lf-accordion --> lf-spinner + lf-accordion --> lf-image + lf-accordion --> lf-button + lf-accordion --> lf-typewriter + lf-accordion --> lf-progressbar + lf-accordion --> lf-textfield + lf-button --> lf-list + lf-button --> lf-spinner + style lf-accordion fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/lf-article/lf-article.tsx b/packages/core/src/components/lf-article/lf-article.tsx index 62591a1..32b4f3e 100644 --- a/packages/core/src/components/lf-article/lf-article.tsx +++ b/packages/core/src/components/lf-article/lf-article.tsx @@ -31,6 +31,7 @@ import { VNode, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; +import { defineShapes } from "../../utils/shapes"; /** * Represents an article-style component that displays structured content @@ -354,6 +355,7 @@ export class LfArticle implements LfArticleInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); } componentDidLoad() { const { info } = this.#framework.debug; diff --git a/packages/core/src/components/lf-article/readme.md b/packages/core/src/components/lf-article/readme.md index 407af06..cbf2493 100644 --- a/packages/core/src/components/lf-article/readme.md +++ b/packages/core/src/components/lf-article/readme.md @@ -113,6 +113,33 @@ Type: `Promise` | `--lf-article-padding-ul` | Sets the padding for the ul component. Defaults to => 1.25em | +## Dependencies + +### Depends on + +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) +- [lf-button](../lf-button) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) + +### Graph +```mermaid +graph TD; + lf-article --> lf-list + lf-article --> lf-spinner + lf-article --> lf-image + lf-article --> lf-button + lf-article --> lf-typewriter + lf-article --> lf-progressbar + lf-article --> lf-textfield + lf-button --> lf-list + lf-button --> lf-spinner + style lf-article fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/lf-button/readme.md b/packages/core/src/components/lf-button/readme.md index 6d77330..d5fdc9d 100644 --- a/packages/core/src/components/lf-button/readme.md +++ b/packages/core/src/components/lf-button/readme.md @@ -160,6 +160,9 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) - [lf-code](../lf-code) @@ -179,6 +182,9 @@ Type: `Promise` graph TD; lf-button --> lf-list lf-button --> lf-spinner + lf-accordion --> lf-button + lf-article --> lf-button + lf-card --> lf-button lf-carousel --> lf-button lf-chat --> lf-button lf-code --> lf-button diff --git a/packages/core/src/components/lf-card/lf-card.tsx b/packages/core/src/components/lf-card/lf-card.tsx index d5ef0e4..99c7cb3 100644 --- a/packages/core/src/components/lf-card/lf-card.tsx +++ b/packages/core/src/components/lf-card/lf-card.tsx @@ -37,6 +37,7 @@ import { } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; import { createAdapter } from "./lf-card-adapter"; +import { defineShapes } from "../../utils/shapes"; /** * The card component displays a card with a header, body, and footer section. @@ -72,7 +73,8 @@ export class LfCard implements LfCardInterface { /** * References the root HTML element of the component (). */ - @Element() rootElement: LfCardElement; + @Element() + rootElement: LfCardElement; //#region States @State() debugInfo: LfDebugLifecycleInfo; @@ -305,6 +307,7 @@ export class LfCard implements LfCardInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-card/readme.md b/packages/core/src/components/lf-card/readme.md index 8137083..3e86a8f 100644 --- a/packages/core/src/components/lf-card/readme.md +++ b/packages/core/src/components/lf-card/readme.md @@ -103,6 +103,33 @@ Type: `Promise` | `--lf-card-font-size` | Sets the font size for the card component. Defaults to => var(--lf-font-size) | +## Dependencies + +### Depends on + +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) +- [lf-button](../lf-button) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) + +### Graph +```mermaid +graph TD; + lf-card --> lf-list + lf-card --> lf-spinner + lf-card --> lf-image + lf-card --> lf-button + lf-card --> lf-typewriter + lf-card --> lf-progressbar + lf-card --> lf-textfield + lf-button --> lf-list + lf-button --> lf-spinner + style lf-card fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/lf-carousel/lf-carousel.tsx b/packages/core/src/components/lf-carousel/lf-carousel.tsx index 792ccb6..734974e 100644 --- a/packages/core/src/components/lf-carousel/lf-carousel.tsx +++ b/packages/core/src/components/lf-carousel/lf-carousel.tsx @@ -38,6 +38,7 @@ import { import { awaitFramework } from "../../utils/setup"; import { autoplay, navigation } from "./helpers.utils"; import { createAdapter } from "./lf-carousel-adapter"; +import { defineShapes } from "../../utils/shapes"; /** * The carousel component displays a carousel with slides that can be navigated using navigation controls or by clicking on slide indicators. @@ -465,6 +466,7 @@ export class LfCarousel implements LfCarouselInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); diff --git a/packages/core/src/components/lf-carousel/readme.md b/packages/core/src/components/lf-carousel/readme.md index 3f3c2ff..a0a0b52 100644 --- a/packages/core/src/components/lf-carousel/readme.md +++ b/packages/core/src/components/lf-carousel/readme.md @@ -137,11 +137,23 @@ Type: `Promise` ### Depends on - [lf-button](../lf-button) +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) ### Graph ```mermaid graph TD; lf-carousel --> lf-button + lf-carousel --> lf-list + lf-carousel --> lf-spinner + lf-carousel --> lf-image + lf-carousel --> lf-typewriter + lf-carousel --> lf-progressbar + lf-carousel --> lf-textfield lf-button --> lf-list lf-button --> lf-spinner style lf-carousel fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index 02efe85..e45cc45 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-code/lf-code.tsx b/packages/core/src/components/lf-code/lf-code.tsx index 4ba42da..6b7266f 100644 --- a/packages/core/src/components/lf-code/lf-code.tsx +++ b/packages/core/src/components/lf-code/lf-code.tsx @@ -493,23 +493,19 @@ export class LfCode implements LfCodeInterface { part={this.#p.code} > {this.lfShowHeader && this.#prepHeader()} - {h( - TagName, - { - className: `language-${lfLanguage} ${shouldPreserveSpace ? "" : "body"}`, - "data-lf": this.#lf.fadeIn, - key: this.value, - part: this.#p.prism, - ref: (el: HTMLDivElement) => { - if (el) { - this.#el = el; - } - }, - }, - shouldPreserveSpace - ? h("code", null, this.value) - : h("span", null, this.value), - )} + { + if (el) { + this.#el = el; + } + }} + > + {shouldPreserveSpace ? {this.value} : this.value} + diff --git a/packages/core/src/components/lf-compare/lf-compare.tsx b/packages/core/src/components/lf-compare/lf-compare.tsx index 008a12d..b9de9cf 100644 --- a/packages/core/src/components/lf-compare/lf-compare.tsx +++ b/packages/core/src/components/lf-compare/lf-compare.tsx @@ -38,6 +38,7 @@ import { } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; import { createAdapter } from "./lf-compare-adapter"; +import { defineShapes } from "../../utils/shapes"; /** * Represents a comparison component that displays two shapes side by side or @@ -405,6 +406,7 @@ export class LfCompare implements LfCompareInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-compare/readme.md b/packages/core/src/components/lf-compare/readme.md index 58fee7e..c7ffd63 100644 --- a/packages/core/src/components/lf-compare/readme.md +++ b/packages/core/src/components/lf-compare/readme.md @@ -103,12 +103,24 @@ Type: `Promise` - [lf-button](../lf-button) - [lf-tree](../lf-tree) +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) ### Graph ```mermaid graph TD; lf-compare --> lf-button lf-compare --> lf-tree + lf-compare --> lf-list + lf-compare --> lf-spinner + lf-compare --> lf-image + lf-compare --> lf-typewriter + lf-compare --> lf-progressbar + lf-compare --> lf-textfield lf-button --> lf-list lf-button --> lf-spinner lf-tree --> lf-textfield diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index 3bbd698..c83eda4 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -15,7 +15,7 @@ The component supports various customization options, including size, styling, a | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | | `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | | `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | @@ -96,15 +96,27 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) - [lf-badge](../lf-badge) - [lf-canvas](../lf-canvas) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) - [lf-photoframe](../lf-photoframe) ### Graph ```mermaid graph TD; + lf-accordion --> lf-image + lf-article --> lf-image lf-badge --> lf-image lf-canvas --> lf-image + lf-card --> lf-image + lf-carousel --> lf-image + lf-compare --> lf-image + lf-masonry --> lf-image lf-photoframe --> lf-image style lf-image fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-imageviewer/readme.md b/packages/core/src/components/lf-imageviewer/readme.md index 7ae86fc..7516ad0 100644 --- a/packages/core/src/components/lf-imageviewer/readme.md +++ b/packages/core/src/components/lf-imageviewer/readme.md @@ -203,7 +203,13 @@ graph TD; lf-button --> lf-list lf-button --> lf-spinner lf-tree --> lf-textfield + lf-masonry --> lf-list + lf-masonry --> lf-spinner + lf-masonry --> lf-image lf-masonry --> lf-button + lf-masonry --> lf-typewriter + lf-masonry --> lf-progressbar + lf-masonry --> lf-textfield style lf-imageviewer fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-list/readme.md b/packages/core/src/components/lf-list/readme.md index f22eac8..9f827c1 100644 --- a/packages/core/src/components/lf-list/readme.md +++ b/packages/core/src/components/lf-list/readme.md @@ -155,12 +155,24 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) - [lf-button](../lf-button) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; + lf-accordion --> lf-list + lf-article --> lf-list lf-button --> lf-list + lf-card --> lf-list + lf-carousel --> lf-list + lf-compare --> lf-list + lf-masonry --> lf-list style lf-list fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-masonry/lf-masonry.tsx b/packages/core/src/components/lf-masonry/lf-masonry.tsx index 259f93d..f43e6ff 100644 --- a/packages/core/src/components/lf-masonry/lf-masonry.tsx +++ b/packages/core/src/components/lf-masonry/lf-masonry.tsx @@ -40,6 +40,7 @@ import { VNode, Watch, } from "@stencil/core"; +import { defineShapes } from "../../utils/shapes"; import { awaitFramework } from "../../utils/setup"; import { createAdapter } from "./lf-masonry-adapter"; @@ -531,6 +532,7 @@ export class LfMasonry implements LfMasonryInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); + defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-masonry/readme.md b/packages/core/src/components/lf-masonry/readme.md index 288544b..646ceba 100644 --- a/packages/core/src/components/lf-masonry/readme.md +++ b/packages/core/src/components/lf-masonry/readme.md @@ -143,12 +143,24 @@ Type: `Promise` ### Depends on +- [lf-list](../lf-list) +- [lf-spinner](../lf-spinner) +- [lf-image](../lf-image) - [lf-button](../lf-button) +- [lf-typewriter](../lf-typewriter) +- [lf-progressbar](../lf-progressbar) +- [lf-textfield](../lf-textfield) ### Graph ```mermaid graph TD; + lf-masonry --> lf-list + lf-masonry --> lf-spinner + lf-masonry --> lf-image lf-masonry --> lf-button + lf-masonry --> lf-typewriter + lf-masonry --> lf-progressbar + lf-masonry --> lf-textfield lf-button --> lf-list lf-button --> lf-spinner lf-imageviewer --> lf-masonry diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index c9ef3b6..54226d7 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -15,10 +15,10 @@ The image may be overlaid with text or other elements. | Property | Attribute | Description | Type | Default | | --------------- | -------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events diff --git a/packages/core/src/components/lf-placeholder/lf-placeholder.tsx b/packages/core/src/components/lf-placeholder/lf-placeholder.tsx index 6dd33a6..efc8919 100644 --- a/packages/core/src/components/lf-placeholder/lf-placeholder.tsx +++ b/packages/core/src/components/lf-placeholder/lf-placeholder.tsx @@ -316,12 +316,16 @@ export class LfPlaceholder implements LfPlaceholderInterface { }, }; const Tag = ("lf-" + name) as LfComponentTag; - content = h(Tag, { - ...(sanitizeProps(lfProps, lfValue) as any), - ...evDispatcher, - "data-lf": LF_ATTRIBUTES.fadeIn, - ref: (el: LfComponentRootElement) => (this.#placeholderComponent = el), - }); + content = ( + + (this.#placeholderComponent = el) + } + > + ); } else if (lfIcon) { const { style } = assets.get(`./assets/svg/${lfIcon}.svg`); content = ( diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index cea3fa3..c321c99 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | diff --git a/packages/core/src/components/lf-progressbar/readme.md b/packages/core/src/components/lf-progressbar/readme.md index b7d6c3d..a65d8e6 100644 --- a/packages/core/src/components/lf-progressbar/readme.md +++ b/packages/core/src/components/lf-progressbar/readme.md @@ -104,12 +104,24 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; + lf-accordion --> lf-progressbar + lf-article --> lf-progressbar + lf-card --> lf-progressbar + lf-carousel --> lf-progressbar lf-chat --> lf-progressbar + lf-compare --> lf-progressbar + lf-masonry --> lf-progressbar style lf-progressbar fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-spinner/readme.md b/packages/core/src/components/lf-spinner/readme.md index ae65587..520bc1d 100644 --- a/packages/core/src/components/lf-spinner/readme.md +++ b/packages/core/src/components/lf-spinner/readme.md @@ -93,16 +93,28 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) - [lf-button](../lf-button) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) + - [lf-compare](../lf-compare) - [lf-imageviewer](../lf-imageviewer) + - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; + lf-accordion --> lf-spinner + lf-article --> lf-spinner lf-button --> lf-spinner + lf-card --> lf-spinner + lf-carousel --> lf-spinner lf-chat --> lf-spinner + lf-compare --> lf-spinner lf-imageviewer --> lf-spinner + lf-masonry --> lf-spinner style lf-spinner fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index 1680e1a..8410051 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -13,7 +13,7 @@ The text field may include an icon, label, helper text, and a character counter. | Property | Attribute | Description | Type | Default | | ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | | `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | | `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | | `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | @@ -147,16 +147,28 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) + - [lf-compare](../lf-compare) - [lf-imageviewer](../lf-imageviewer) + - [lf-masonry](../lf-masonry) - [lf-messenger](../lf-messenger) - [lf-tree](../lf-tree) ### Graph ```mermaid graph TD; + lf-accordion --> lf-textfield + lf-article --> lf-textfield + lf-card --> lf-textfield + lf-carousel --> lf-textfield lf-chat --> lf-textfield + lf-compare --> lf-textfield lf-imageviewer --> lf-textfield + lf-masonry --> lf-textfield lf-messenger --> lf-textfield lf-tree --> lf-textfield style lf-textfield fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx index 18a831f..3371c4f 100644 --- a/packages/core/src/components/lf-typewriter/lf-typewriter.tsx +++ b/packages/core/src/components/lf-typewriter/lf-typewriter.tsx @@ -317,25 +317,18 @@ export class LfTypewriter implements LfTypewriterInterface { return (
- {h( - TagName, - { - className: bemClass(typewriter._, typewriter.text), - part: this.#p.text, - }, - [ - h("span", null, displayedText || "\u00A0"), - shouldShowCursor && - h( - "span", - { - className: bemClass(typewriter._, typewriter.cursor), - part: this.#p.cursor, - }, - null, - ), - ], - )} + + {displayedText || "\u00A0"} + {shouldShowCursor && ( + + )} +
); } diff --git a/packages/core/src/components/lf-typewriter/readme.md b/packages/core/src/components/lf-typewriter/readme.md index 5fc4a3e..7bed18f 100644 --- a/packages/core/src/components/lf-typewriter/readme.md +++ b/packages/core/src/components/lf-typewriter/readme.md @@ -102,12 +102,24 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; + lf-accordion --> lf-typewriter + lf-article --> lf-typewriter + lf-card --> lf-typewriter + lf-carousel --> lf-typewriter lf-chat --> lf-typewriter + lf-compare --> lf-typewriter + lf-masonry --> lf-typewriter style lf-typewriter fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/utils/shapes.ts b/packages/core/src/utils/shapes.ts new file mode 100644 index 0000000..ece9c0e --- /dev/null +++ b/packages/core/src/utils/shapes.ts @@ -0,0 +1,42 @@ +import { LfFrameworkInterface } from "@lf-widgets/foundations"; +import { LfBadge } from "../components/lf-badge/lf-badge"; +import { LfButton } from "../components/lf-button/lf-button"; +import { LfCanvas } from "../components/lf-canvas/lf-canvas"; +import { LfCard } from "../components/lf-card/lf-card"; +import { LfChart } from "../components/lf-chart/lf-chart"; +import { LfChat } from "../components/lf-chat/lf-chat"; +import { LfChip } from "../components/lf-chip/lf-chip"; +import { LfCode } from "../components/lf-code/lf-code"; +import { LfImage } from "../components/lf-image/lf-image"; +import { LfPhotoframe } from "../components/lf-photoframe/lf-photoframe"; +import { LfTextfield } from "../components/lf-textfield/lf-textfield"; +import { LfToggle } from "../components/lf-toggle/lf-toggle"; +import { LfTypewriter } from "../components/lf-typewriter/lf-typewriter"; +import { LfUpload } from "../components/lf-upload/lf-upload"; + +//#region defineShapes +export const defineShapes = (framework: LfFrameworkInterface) => { + if (framework.shapes.get()) { + return; + } + + framework.shapes.set({ + badge: LfBadge.name, + button: LfButton.name, + canvas: LfCanvas.name, + card: LfCard.name, + chart: LfChart.name, + chat: LfChat.name, + chip: LfChip.name, + code: LfCode.name, + image: LfImage.name, + number: LfTextfield.name, + photoframe: LfPhotoframe.name, + slot: LfTextfield.name, + text: LfTextfield.name, + toggle: LfToggle.name, + typewriter: LfTypewriter.name, + upload: LfUpload.name, + }); +}; +//#endregion diff --git a/packages/foundations/src/framework/framework.declarations.ts b/packages/foundations/src/framework/framework.declarations.ts index 10d8c98..db75503 100644 --- a/packages/foundations/src/framework/framework.declarations.ts +++ b/packages/foundations/src/framework/framework.declarations.ts @@ -4,7 +4,7 @@ import { LfComponentPropsFor, } from "../foundations/components.declarations"; import { LfColorInterface } from "./color.declarations"; -import { LfDataInterface } from "./data.declarations"; +import { LfDataInterface, LfDataShapes } from "./data.declarations"; import { LfDebugInterface } from "./debug.declarations"; import { LfDragInterface } from "./drag.declarations"; import { LfEffectsInterface } from "./effects.declarations"; @@ -48,6 +48,10 @@ export interface LfFrameworkInterface { props: { [key: string]: any }, compName: C, ): LfComponentPropsFor; + shapes: { + get: () => LfFrameworkShapes; + set: (value: LfFrameworkShapes) => void; + }; } //#endregion @@ -88,5 +92,9 @@ export type LfFrameworkAllowedKeysMap = { typeof getComponentProps >][number]]: any; }; - +export type LfFrameworkShapesMap = WeakMap< + LfFrameworkInterface, + Record +>; +export type LfFrameworkShapes = Record; //#endregion diff --git a/packages/framework/src/lf-data/helpers.cell.tsx b/packages/framework/src/lf-data/helpers.cell.tsx index 7a98742..0040b33 100644 --- a/packages/framework/src/lf-data/helpers.cell.tsx +++ b/packages/framework/src/lf-data/helpers.cell.tsx @@ -100,24 +100,20 @@ export const cellDecorateShapes = < }; elements.push( - h( - TagName, - { - "data-component": component, - "data-cy": CY_ATTRIBUTES.shape, - id: `${shape}${index}`, - key: `${shape}${index}`, - ref: (el: LfComponentRootElement) => { - if (el && Array.isArray(refsCb) && refsCb[index]) { - const cb = refsCb[index]; - cb(el); - } - }, - ...eventHandler, - ...sanitizeProps(toSpread, component), - }, - null, - ), + ) => { + if (el && Array.isArray(refsCb) && refsCb[index]) { + const cb = refsCb[index]; + cb(el); + } + }} + {...eventHandler} + {...sanitizeProps(toSpread, component)} + >, ); } break; diff --git a/packages/framework/src/lf-framework/lf-framework.ts b/packages/framework/src/lf-framework/lf-framework.ts index 95d69c6..90efa26 100644 --- a/packages/framework/src/lf-framework/lf-framework.ts +++ b/packages/framework/src/lf-framework/lf-framework.ts @@ -15,6 +15,8 @@ import { LfFrameworkModuleKey, LfFrameworkModuleOptions, LfFrameworkSetAssetPath, + LfFrameworkShapes, + LfFrameworkShapesMap, LfFrameworkUtilities, LfLLMInterface, LfPortalInterface, @@ -42,6 +44,7 @@ export class LfFramework implements LfFrameworkInterface { }, ], ]); + #SHAPES: LfFrameworkShapesMap = new WeakMap(); assets: { get: LfFrameworkGetAssetPath; @@ -303,4 +306,13 @@ export class LfFramework implements LfFrameworkInterface { } } //#endregion + + //#region shapes + shapes = { + get: () => this.#SHAPES.get(this), + set: (shapes: LfFrameworkShapes) => { + this.#SHAPES.set(this, shapes); + }, + }; + //#endregion } diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 093189d..2ced33b 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -60,7 +60,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Accordion component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Accordion component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -197,7 +197,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Article component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Article component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfArticleDataset", }, { @@ -515,7 +515,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The dataset for the button, containing the nodes to be displayed.\nThe first node will be used to set the icon and label if not provided.", + docs: "The dataset for the button, containing the nodes to be displayed.\r\nThe first node will be used to set the icon and label if not provided.", type: "LfDataDataset", }, { @@ -590,7 +590,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the button.\nRelevant only when lfToggable is set to true.", + docs: "Sets the initial state of the button.\r\nRelevant only when lfToggable is set to true.", type: "boolean", }, ], @@ -691,7 +691,7 @@ export const LF_DOC: LfShowcaseDoc = { docs: "Retrieves the HTMLLfImageElement from the canvas.", returns: { type: "Promise", - docs: "A promise that resolves with the HTMLLfImageElement instance\nrepresenting the image element in the canvas.", + docs: "A promise that resolves with the HTMLLfImageElement instance\r\nrepresenting the image element in the canvas.", }, signature: "() => Promise", }, @@ -715,7 +715,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "resizeCanvas", - docs: "Resizes the canvas elements to match the container's dimensions.\n\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\nto match the current container's height and width obtained via getBoundingClientRect().", + docs: "Resizes the canvas elements to match the container's dimensions.\r\n\r\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\r\nto match the current container's height and width obtained via getBoundingClientRect().", returns: { type: "Promise", docs: "A Promise that resolves when the resize operation is complete", @@ -724,7 +724,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasHeight", - docs: "Sets the canvas height for both the board and preview elements.\nIf a value is provided, it will set that specific height.\nIf no value is provided, it will set the height based on the container's bounding client rect.", + docs: "Sets the canvas height for both the board and preview elements.\r\nIf a value is provided, it will set that specific height.\r\nIf no value is provided, it will set the height based on the container's bounding client rect.", returns: { type: "Promise", docs: "Promise that resolves when the height has been set", @@ -733,7 +733,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasWidth", - docs: "Sets the width of the canvas element(s).\nIf a value is provided, sets the width to that specific value.\nIf no value is provided, sets the width to match the container's width.\nWhen cursor preview is enabled, also updates the preview canvas width.", + docs: "Sets the width of the canvas element(s).\r\nIf a value is provided, sets the width to that specific value.\r\nIf no value is provided, sets the width to match the container's width.\r\nWhen cursor preview is enabled, also updates the preview canvas width.", returns: { type: "Promise", docs: "Promise that resolves when width is set", @@ -788,7 +788,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfStrokeTolerance", - docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\nThis prop sets the tolerance of the algorithm (null to disable).", + docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\r\nThis prop sets the tolerance of the algorithm (null to disable).", type: "number", }, { @@ -879,12 +879,12 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Card component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Card component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLayout", - docs: 'The layout style for the card component.\nCan be set to different predefined styles like "material" design.', + docs: 'The layout style for the card component.\r\nCan be set to different predefined styles like "material" design.', type: '"debug" | "keywords" | "material" | "upload"', }, { @@ -971,7 +971,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "nextSlide", - docs: "Moves the carousel to the next slide.\nTriggers the next slide transition using the carousel controller's next function.", + docs: "Moves the carousel to the next slide.\r\nTriggers the next slide transition using the carousel controller's next function.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete.", @@ -980,7 +980,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "prevSlide", - docs: "Moves the carousel to the previous slide by invoking the `previous` method\nfrom the carousel controller's index set.", + docs: "Moves the carousel to the previous slide by invoking the `previous` method\r\nfrom the carousel controller's index set.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete", @@ -1014,7 +1014,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Carousel component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Carousel component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1139,12 +1139,12 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLegend", - docs: "Sets the position of the legend.\nSupported values: bottom, left, right, top, hidden.\nKeep in mind that legend types are tied to chart types, some combinations might not work.", + docs: "Sets the position of the legend.\r\nSupported values: bottom, left, right, top, hidden.\r\nKeep in mind that legend types are tied to chart types, some combinations might not work.", type: '"bottom" | "hidden" | "left" | "right" | "top"', }, { @@ -1169,8 +1169,8 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTypes", - docs: "The type of the chart.\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", - type: '("bar" | "line" | "radar" | "calendar" | "scatter" | "pie" | "area" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', + docs: "The type of the chart.\r\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", + type: '("area" | "line" | "bar" | "radar" | "calendar" | "scatter" | "pie" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', }, { name: "lfXAxis", @@ -1459,7 +1459,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chip component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chip component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1489,7 +1489,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the chip.\nRelevant only when the chip can be selected.", + docs: "Sets the initial state of the chip.\r\nRelevant only when the chip can be selected.", type: "string[]", }, ], @@ -1748,7 +1748,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1826,7 +1826,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "close", - docs: "Closes the drawer component.\nUses requestAnimationFrame to ensure smooth animation and state update.\nDispatches a 'close' custom event when the drawer is closed.", + docs: "Closes the drawer component.\r\nUses requestAnimationFrame to ensure smooth animation and state update.\r\nDispatches a 'close' custom event when the drawer is closed.", returns: { type: "Promise", docs: "Promise that resolves when the drawer closing animation is scheduled", @@ -1880,7 +1880,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "toggle", - docs: "Toggles the drawer state between opened and closed.\nIf the drawer is currently opened, it will be closed.\nIf the drawer is currently closed, it will be opened.", + docs: "Toggles the drawer state between opened and closed.\r\nIf the drawer is currently opened, it will be closed.\r\nIf the drawer is currently closed, it will be opened.", returns: { type: "Promise", docs: "A promise that resolves when the toggle operation is complete", @@ -1910,7 +1910,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfResponsive", - docs: 'A number representing a screen-width breakpoint for responsiveness.\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\notherwise `"slide"`.', + docs: 'A number representing a screen-width breakpoint for responsiveness.\r\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\r\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\r\notherwise `"slide"`.', type: "number", }, { @@ -2078,22 +2078,22 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHtmlAttributes", - docs: "Allows customization of the image element.\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", - docs: "Controls the display of a loading indicator.\nWhen enabled, a spinner is shown until the image finishes loading.\nThis property is not compatible with SVG images.", + docs: "Controls the display of a loading indicator.\r\nWhen enabled, a spinner is shown until the image finishes loading.\r\nThis property is not compatible with SVG images.", type: "boolean", }, { name: "lfSizeX", - docs: "Sets the width of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the width of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { name: "lfSizeY", - docs: "Sets the height of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the height of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { @@ -2108,7 +2108,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Defines the source URL of the image.\nThis property is used to set the image resource that the component should display.", + docs: "Defines the source URL of the image.\r\nThis property is used to set the image resource that the component should display.", type: "string", }, ], @@ -2143,7 +2143,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "addSnapshot", - docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\nIt has no effect when the current shape is not set.", + docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\r\nIt has no effect when the current shape is not set.", returns: { type: "Promise", docs: "", @@ -2152,7 +2152,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "clearHistory", - docs: "Clears the history related to the shape identified by the index.\nWhen index is not provided, it clear the full history.", + docs: "Clears the history related to the shape identified by the index.\r\nWhen index is not provided, it clear the full history.", returns: { type: "Promise", docs: "", @@ -2245,7 +2245,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Imageviewer component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Imageviewer component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2295,7 +2295,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "focusNext", - docs: "Moves focus to the next item in the list.\nIf no item is currently focused, focuses the selected item.\nIf the last item is focused, wraps around to the first item.", + docs: "Moves focus to the next item in the list.\r\nIf no item is currently focused, focuses the selected item.\r\nIf the last item is focused, wraps around to the first item.", returns: { type: "Promise", docs: "A promise that resolves when the focus operation is complete", @@ -2304,7 +2304,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "focusPrevious", - docs: "Focuses the previous item in the list.\nIf no item is currently focused, it focuses the selected item.\nIf focused item is the first one, it wraps around to the last item.", + docs: "Focuses the previous item in the list.\r\nIf no item is currently focused, it focuses the selected item.\r\nIf focused item is the first one, it wraps around to the last item.", returns: { type: "Promise", docs: "Promise that resolves when the focus operation is complete", @@ -2349,7 +2349,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "selectNode", - docs: "Selects a node in the list at the specified index.\nIf no index is provided, selects the currently focused node.", + docs: "Selects a node in the list at the specified index.\r\nIf no index is provided, selects the currently focused node.", returns: { type: "Promise", docs: "A promise that resolves when the selection is complete.", @@ -2369,7 +2369,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2414,7 +2414,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the list.\nRelevant only when the list can be selected.", + docs: "Sets the initial state of the list.\r\nRelevant only when the list can be selected.", type: "number", }, ], @@ -2543,7 +2543,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfColumns", - docs: "Number of columns of the masonry, doesn't affect sequential views.\nCan be set with a number or an array of numbers that identify each breakpoint.", + docs: "Number of columns of the masonry, doesn't affect sequential views.\r\nCan be set with a number or an array of numbers that identify each breakpoint.", type: "number | number[]", }, { @@ -2668,7 +2668,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "reset", - docs: "Resets the messenger component to its initial state.\nClears covers, current character, and message history.\nReinitializes the component.", + docs: "Resets the messenger component to its initial state.\r\nClears covers, current character, and message history.\r\nReinitializes the component.", returns: { type: "Promise", docs: "A promise that resolves when the reset is complete", @@ -2702,7 +2702,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfMessengerDataset", }, { @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -2928,7 +2928,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfIcon", docs: "Displays an animated SVG placeholder until the component is loaded.", - type: '"x" | "id" | "replace" | "search" | "brush" | "list" | "progress" | "upload" | "check" | "code" | "copy" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "download" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "article" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "key" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', + type: '"article" | "code" | "progress" | "download" | "id" | "x" | "replace" | "copy" | "key" | "search" | "brush" | "list" | "upload" | "check" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', }, { name: "lfProps", @@ -2947,7 +2947,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTrigger", - docs: "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport.", + docs: "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport.", type: '"both" | "props" | "viewport"', }, { @@ -3026,7 +3026,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfCenteredLabel", - docs: "Displays the label in the middle of the progress bar.\nIt's the default for the radial variant and can't be changed.", + docs: "Displays the label in the middle of the progress bar.\r\nIt's the default for the radial variant and can't be changed.", type: "boolean", }, { @@ -3181,7 +3181,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfLeadingLabel", - docs: "When true, displays the label before the slider component.\nDefaults to `false`.", + docs: "When true, displays the label before the slider component.\r\nDefaults to `false`.", type: "boolean", }, { @@ -3360,7 +3360,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDimensions", - docs: "Defines the width and height of the spinner.\nIn the bar variant, it specifies only the height.", + docs: "Defines the width and height of the spinner.\r\nIn the bar variant, it specifies only the height.", type: "string", }, { @@ -3567,7 +3567,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Tabbar component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tabbar component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -3722,13 +3722,13 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHelper", - docs: "Sets the helper text for the text field.\nThe helper text can provide additional information or instructions to the user.", + docs: "Sets the helper text for the text field.\r\nThe helper text can provide additional information or instructions to the user.", type: "LfTextfieldHelper", }, { name: "lfHtmlAttributes", - docs: "Allows customization of the input or textarea element through additional HTML attributes.\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", @@ -4168,7 +4168,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Tree component.\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tree component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -4183,7 +4183,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfInitialExpansionDepth", - docs: "Sets the initial expanded nodes based on the specified depth.\nIf the property is not provided, all nodes in the tree will be expanded.", + docs: "Sets the initial expanded nodes based on the specified depth.\r\nIf the property is not provided, all nodes in the tree will be expanded.", type: "number", }, { diff --git a/packages/showcase/src/components/lf-showcase/components/component-template.tsx b/packages/showcase/src/components/lf-showcase/components/component-template.tsx index 45b4ae1..d2b50a9 100644 --- a/packages/showcase/src/components/lf-showcase/components/component-template.tsx +++ b/packages/showcase/src/components/lf-showcase/components/component-template.tsx @@ -137,15 +137,15 @@ const prepExample = ( const { description, hasMinHeight, hasParent, props, slots } = example; const TagName = component; const p = props as LfComponentPropsFor; - const tag = h( - TagName, - { - "data-cy": CY_ATTRIBUTES.showcaseExample, - key: `${category}-${id}`, - id: `${category}-${id}`, - ...(p as any), - }, - prepSlot(component, manager, slots), + const tag = ( + + {prepSlot(component, manager, slots)} + ); return ( From 46af79efa317b8c982f3969f3f5766785040577e Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 00:10:36 +0100 Subject: [PATCH 16/27] chore: update dependencies --- yarn.lock | 140 +++++++++++++++++++++++++++--------------------------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/yarn.lock b/yarn.lock index 88e0ed3..dcbbdca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -764,8 +764,8 @@ __metadata: linkType: hard "@nx/devkit@npm:>=17.1.2 < 21": - version: 20.4.2 - resolution: "@nx/devkit@npm:20.4.2" + version: 20.4.3 + resolution: "@nx/devkit@npm:20.4.3" dependencies: ejs: "npm:^3.1.7" enquirer: "npm:~2.3.6" @@ -777,76 +777,76 @@ __metadata: yargs-parser: "npm:21.1.1" peerDependencies: nx: ">= 19 <= 21" - checksum: 10c0/886c85ded0cfab2775b881138f461363c4aebf44478011d60664bef3e3706f51fd02b3910346d56f23e97516e0a13db2e309aa75a54ecf98f14015a8cb5586d3 + checksum: 10c0/a4bafb34a87c1dc793b9139918c67b30a4bf68281fb49de8622922b8e5ce835f9dff9a864bfa664a40cb59fd63dcc5ea5a7e50ab6a3ef4159684f5374c2da648 languageName: node linkType: hard -"@nx/nx-darwin-arm64@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-darwin-arm64@npm:20.4.2" +"@nx/nx-darwin-arm64@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-darwin-arm64@npm:20.4.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@nx/nx-darwin-x64@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-darwin-x64@npm:20.4.2" +"@nx/nx-darwin-x64@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-darwin-x64@npm:20.4.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@nx/nx-freebsd-x64@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-freebsd-x64@npm:20.4.2" +"@nx/nx-freebsd-x64@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-freebsd-x64@npm:20.4.3" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@nx/nx-linux-arm-gnueabihf@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-linux-arm-gnueabihf@npm:20.4.2" +"@nx/nx-linux-arm-gnueabihf@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-linux-arm-gnueabihf@npm:20.4.3" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@nx/nx-linux-arm64-gnu@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-linux-arm64-gnu@npm:20.4.2" +"@nx/nx-linux-arm64-gnu@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-linux-arm64-gnu@npm:20.4.3" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-arm64-musl@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-linux-arm64-musl@npm:20.4.2" +"@nx/nx-linux-arm64-musl@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-linux-arm64-musl@npm:20.4.3" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@nx/nx-linux-x64-gnu@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-linux-x64-gnu@npm:20.4.2" +"@nx/nx-linux-x64-gnu@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-linux-x64-gnu@npm:20.4.3" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-x64-musl@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-linux-x64-musl@npm:20.4.2" +"@nx/nx-linux-x64-musl@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-linux-x64-musl@npm:20.4.3" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@nx/nx-win32-arm64-msvc@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-win32-arm64-msvc@npm:20.4.2" +"@nx/nx-win32-arm64-msvc@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-win32-arm64-msvc@npm:20.4.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@nx/nx-win32-x64-msvc@npm:20.4.2": - version: 20.4.2 - resolution: "@nx/nx-win32-x64-msvc@npm:20.4.2" +"@nx/nx-win32-x64-msvc@npm:20.4.3": + version: 20.4.3 + resolution: "@nx/nx-win32-x64-msvc@npm:20.4.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -1227,11 +1227,11 @@ __metadata: linkType: hard "@stencil/core@npm:^4": - version: 4.25.3 - resolution: "@stencil/core@npm:4.25.3" + version: 4.26.0 + resolution: "@stencil/core@npm:4.26.0" bin: stencil: bin/stencil - checksum: 10c0/b9083983d7294c91424ef7693c086941c92997023499225046ce01522029045f41b607ad2846c8800e56e8060cbd8a712486c8ceb5a2ab0508fe580ac40cae51 + checksum: 10c0/c190bdb8b6ed0cbfecd2186ffab8bb1dee2a103e0ff8b2f9b6650e4ab42fbbf6013bebe706c30b962c16454ce4cdefadea9dac5899bd712a173988539409fc02 languageName: node linkType: hard @@ -1351,11 +1351,11 @@ __metadata: linkType: hard "@types/node@npm:*, @types/node@npm:^22": - version: 22.13.1 - resolution: "@types/node@npm:22.13.1" + version: 22.13.4 + resolution: "@types/node@npm:22.13.4" dependencies: undici-types: "npm:~6.20.0" - checksum: 10c0/d4e56d41d8bd53de93da2651c0a0234e330bd7b1b6d071b1a94bd3b5ee2d9f387519e739c52a15c1faa4fb9d97e825b848421af4b2e50e6518011e7adb4a34b7 + checksum: 10c0/3a234fa7766a3efc382cf81f66f474c26cdab2f54f43f757634c81c0444eb2160c2dabbde9741e4983078a318a88515b65416b5f1ab5478548579d7b3ead1d95 languageName: node linkType: hard @@ -1952,12 +1952,12 @@ __metadata: linkType: hard "call-bind-apply-helpers@npm:^1.0.1": - version: 1.0.1 - resolution: "call-bind-apply-helpers@npm:1.0.1" + version: 1.0.2 + resolution: "call-bind-apply-helpers@npm:1.0.2" dependencies: es-errors: "npm:^1.3.0" function-bind: "npm:^1.1.2" - checksum: 10c0/acb2ab68bf2718e68a3e895f0d0b73ccc9e45b9b6f210f163512ba76f91dab409eb8792f6dae188356f9095747512a3101646b3dea9d37fb8c7c6bf37796d18c + checksum: 10c0/47bd9901d57b857590431243fea704ff18078b16890a6b3e021e12d279bbf211d039155e27d7566b374d49ee1f8189344bac9833dec7a20cdec370506361c938 languageName: node linkType: hard @@ -4119,11 +4119,11 @@ __metadata: linkType: hard "is-ssh@npm:^1.4.0": - version: 1.4.0 - resolution: "is-ssh@npm:1.4.0" + version: 1.4.1 + resolution: "is-ssh@npm:1.4.1" dependencies: protocols: "npm:^2.0.1" - checksum: 10c0/3eb30d1bcb4507cd25562e7ac61a1c0aa31772134c67cec9c3afe6f4d57ec17e8c2892600a608e8e583f32f53f36465b8968c0305f2855cfbff95acfd049e113 + checksum: 10c0/021a7355cb032625d58db3cc8266ad9aa698cbabf460b71376a0307405577fd7d3aa0826c0bf1951d7809f134c0ee80403306f6d7633db94a5a3600a0106b398 languageName: node linkType: hard @@ -5180,8 +5180,8 @@ __metadata: linkType: hard "node-gyp@npm:latest": - version: 11.0.0 - resolution: "node-gyp@npm:11.0.0" + version: 11.1.0 + resolution: "node-gyp@npm:11.1.0" dependencies: env-paths: "npm:^2.2.0" exponential-backoff: "npm:^3.1.1" @@ -5195,7 +5195,7 @@ __metadata: which: "npm:^5.0.0" bin: node-gyp: bin/node-gyp.js - checksum: 10c0/a3b885bbee2d271f1def32ba2e30ffcf4562a3db33af06b8b365e053153e2dd2051b9945783c3c8e852d26a0f20f65b251c7e83361623383a99635c0280ee573 + checksum: 10c0/c38977ce502f1ea41ba2b8721bd5b49bc3d5b3f813eabfac8414082faf0620ccb5211e15c4daecc23ed9f5e3e9cc4da00e575a0bcfc2a95a069294f2afa1e0cd languageName: node linkType: hard @@ -5366,20 +5366,20 @@ __metadata: linkType: hard "nx@npm:>=17.1.2 < 21": - version: 20.4.2 - resolution: "nx@npm:20.4.2" + version: 20.4.3 + resolution: "nx@npm:20.4.3" dependencies: "@napi-rs/wasm-runtime": "npm:0.2.4" - "@nx/nx-darwin-arm64": "npm:20.4.2" - "@nx/nx-darwin-x64": "npm:20.4.2" - "@nx/nx-freebsd-x64": "npm:20.4.2" - "@nx/nx-linux-arm-gnueabihf": "npm:20.4.2" - "@nx/nx-linux-arm64-gnu": "npm:20.4.2" - "@nx/nx-linux-arm64-musl": "npm:20.4.2" - "@nx/nx-linux-x64-gnu": "npm:20.4.2" - "@nx/nx-linux-x64-musl": "npm:20.4.2" - "@nx/nx-win32-arm64-msvc": "npm:20.4.2" - "@nx/nx-win32-x64-msvc": "npm:20.4.2" + "@nx/nx-darwin-arm64": "npm:20.4.3" + "@nx/nx-darwin-x64": "npm:20.4.3" + "@nx/nx-freebsd-x64": "npm:20.4.3" + "@nx/nx-linux-arm-gnueabihf": "npm:20.4.3" + "@nx/nx-linux-arm64-gnu": "npm:20.4.3" + "@nx/nx-linux-arm64-musl": "npm:20.4.3" + "@nx/nx-linux-x64-gnu": "npm:20.4.3" + "@nx/nx-linux-x64-musl": "npm:20.4.3" + "@nx/nx-win32-arm64-msvc": "npm:20.4.3" + "@nx/nx-win32-x64-msvc": "npm:20.4.3" "@yarnpkg/lockfile": "npm:^1.1.0" "@yarnpkg/parsers": "npm:3.0.2" "@zkochan/js-yaml": "npm:0.0.7" @@ -5445,7 +5445,7 @@ __metadata: bin: nx: bin/nx.js nx-cloud: bin/nx-cloud.js - checksum: 10c0/19edc0242eea6fc8ceaa4de6bc1765241ef44ca6b32e706d617e4d20a04f6029dcbb9a9cdc043edeffccd331464a73705031a73de5999ddb8ff1784ed9705a57 + checksum: 10c0/f37878a8fe95c05d86203adff7dd77df80b76e91c5e24bfb00f5a8c6f394c99dc57d844f1a31ecdce184bd8a052df8e937ff23975a6228d3f001e51f8265c2bc languageName: node linkType: hard @@ -5911,22 +5911,22 @@ __metadata: linkType: hard "postcss@npm:^8.5.1": - version: 8.5.1 - resolution: "postcss@npm:8.5.1" + version: 8.5.2 + resolution: "postcss@npm:8.5.2" dependencies: nanoid: "npm:^3.3.8" picocolors: "npm:^1.1.1" source-map-js: "npm:^1.2.1" - checksum: 10c0/c4d90c59c98e8a0c102b77d3f4cac190f883b42d63dc60e2f3ed840f16197c0c8e25a4327d2e9a847b45a985612317dc0534178feeebd0a1cf3eb0eecf75cae4 + checksum: 10c0/3044d49bc725029ab62292e8bf9849741251b95f3b754e191bf8b4025414d40ec3b4ac05c5a563d4b50060b5c8e96683eb4d783d8d8fa3867eb7b763cbe66127 languageName: node linkType: hard "prettier@npm:^3": - version: 3.4.2 - resolution: "prettier@npm:3.4.2" + version: 3.5.1 + resolution: "prettier@npm:3.5.1" bin: prettier: bin/prettier.cjs - checksum: 10c0/99e076a26ed0aba4ebc043880d0f08bbb8c59a4c6641cdee6cdadf2205bdd87aa1d7823f50c3aea41e015e99878d37c58d7b5f0e663bba0ef047f94e36b96446 + checksum: 10c0/9f6f810eae455d6e4213845151a484a2338f2e0d6a8b84ee8e13a83af8a2421ef6c1e31e61e4b135671fb57b9541f6624648880cc2061ac803e243ac898c0123 languageName: node linkType: hard @@ -6710,12 +6710,12 @@ __metadata: linkType: hard "socks@npm:^2.8.3": - version: 2.8.3 - resolution: "socks@npm:2.8.3" + version: 2.8.4 + resolution: "socks@npm:2.8.4" dependencies: ip-address: "npm:^9.0.5" smart-buffer: "npm:^4.2.0" - checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7 + checksum: 10c0/00c3271e233ccf1fb83a3dd2060b94cc37817e0f797a93c560b9a7a86c4a0ec2961fb31263bdd24a3c28945e24868b5f063cd98744171d9e942c513454b50ae5 languageName: node linkType: hard From 121e9a3c0a484cf478bc20f02b3ee48f67d11eb2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Feb 2025 23:11:18 +0000 Subject: [PATCH 17/27] chore(release): publish --- CHANGELOG.md | 6 ++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 4 ++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 6 ++++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 6 ++++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 6 ++++++ packages/showcase/package.json | 2 +- 16 files changed, 50 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a9bda1..ccc2321 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +### Bug Fixes + +- **shapes:** correctly imported shapes in related consumers ([72a2792](https://github.com/lucafoscili/lf-widgets/commit/72a2792e06dc716b094aecec038c115c8826a53b)) + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 1be9c7d..67d3853 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index dc80023..27ae74f 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/assets + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) **Note:** Version bump only for package @lf-widgets/assets diff --git a/packages/assets/package.json b/packages/assets/package.json index 529cac1..887d983 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 324596b..9522b64 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +### Bug Fixes + +- **shapes:** correctly imported shapes in related consumers ([72a2792](https://github.com/lucafoscili/lf-widgets/commit/72a2792e06dc716b094aecec038c115c8826a53b)) + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) ### Bug Fixes diff --git a/packages/core/package.json b/packages/core/package.json index 950aa05..421b2ef 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index c8bbf1e..4814cae 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +### Bug Fixes + +- **shapes:** correctly imported shapes in related consumers ([72a2792](https://github.com/lucafoscili/lf-widgets/commit/72a2792e06dc716b094aecec038c115c8826a53b)) + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) **Note:** Version bump only for package @lf-widgets/foundations diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 4577c06..0efe7e4 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index 84c9ab4..d3808aa 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +### Bug Fixes + +- **shapes:** correctly imported shapes in related consumers ([72a2792](https://github.com/lucafoscili/lf-widgets/commit/72a2792e06dc716b094aecec038c115c8826a53b)) + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) ### Bug Fixes diff --git a/packages/framework/package.json b/packages/framework/package.json index 75b8132..cec3afe 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 0c98a5c..d2aec87 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 5e55476..b14ba34 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 0290f35..6a8fa88 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index 7461257..ea743bb 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index 2fbd47b..720998b 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) + +### Bug Fixes + +- **shapes:** correctly imported shapes in related consumers ([72a2792](https://github.com/lucafoscili/lf-widgets/commit/72a2792e06dc716b094aecec038c115c8826a53b)) + ## [0.3.2-rc.3](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.2...0.3.2-rc.3) (2025-02-13) ### Bug Fixes diff --git a/packages/showcase/package.json b/packages/showcase/package.json index ffb8333..cb92eac 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.3", + "version": "0.3.2-rc.4", "publishConfig": { "access": "public" }, From 11c469b98f3ba330547ae472d6c66a4af6d668cb Mon Sep 17 00:00:00 2001 From: lucafoscili Date: Thu, 13 Feb 2025 23:12:56 +0000 Subject: [PATCH 18/27] chore: bump versions for release candidate --- .../core/src/components/lf-chart/readme.md | 2 +- .../core/src/components/lf-image/readme.md | 2 +- .../src/components/lf-photoframe/readme.md | 4 +- .../src/components/lf-placeholder/readme.md | 2 +- .../src/components/lf-textfield/readme.md | 2 +- .../src/components/lf-showcase/assets/doc.ts | 108 +++++++++--------- 6 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index e45cc45..02efe85 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index c83eda4..c6c2d95 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -15,7 +15,7 @@ The component supports various customization options, including size, styling, a | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | | `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | | `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index 54226d7..c9ef3b6 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -15,10 +15,10 @@ The image may be overlaid with text or other elements. | Property | Attribute | Description | Type | Default | | --------------- | -------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index c321c99..cea3fa3 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index 8410051..617ab5e 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -13,7 +13,7 @@ The text field may include an icon, label, helper text, and a character counter. | Property | Attribute | Description | Type | Default | | ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | | `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | | `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | | `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 2ced33b..093189d 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -60,7 +60,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Accordion component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Accordion component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -197,7 +197,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Article component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Article component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfArticleDataset", }, { @@ -515,7 +515,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The dataset for the button, containing the nodes to be displayed.\r\nThe first node will be used to set the icon and label if not provided.", + docs: "The dataset for the button, containing the nodes to be displayed.\nThe first node will be used to set the icon and label if not provided.", type: "LfDataDataset", }, { @@ -590,7 +590,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the button.\r\nRelevant only when lfToggable is set to true.", + docs: "Sets the initial state of the button.\nRelevant only when lfToggable is set to true.", type: "boolean", }, ], @@ -691,7 +691,7 @@ export const LF_DOC: LfShowcaseDoc = { docs: "Retrieves the HTMLLfImageElement from the canvas.", returns: { type: "Promise", - docs: "A promise that resolves with the HTMLLfImageElement instance\r\nrepresenting the image element in the canvas.", + docs: "A promise that resolves with the HTMLLfImageElement instance\nrepresenting the image element in the canvas.", }, signature: "() => Promise", }, @@ -715,7 +715,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "resizeCanvas", - docs: "Resizes the canvas elements to match the container's dimensions.\r\n\r\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\r\nto match the current container's height and width obtained via getBoundingClientRect().", + docs: "Resizes the canvas elements to match the container's dimensions.\n\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\nto match the current container's height and width obtained via getBoundingClientRect().", returns: { type: "Promise", docs: "A Promise that resolves when the resize operation is complete", @@ -724,7 +724,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasHeight", - docs: "Sets the canvas height for both the board and preview elements.\r\nIf a value is provided, it will set that specific height.\r\nIf no value is provided, it will set the height based on the container's bounding client rect.", + docs: "Sets the canvas height for both the board and preview elements.\nIf a value is provided, it will set that specific height.\nIf no value is provided, it will set the height based on the container's bounding client rect.", returns: { type: "Promise", docs: "Promise that resolves when the height has been set", @@ -733,7 +733,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasWidth", - docs: "Sets the width of the canvas element(s).\r\nIf a value is provided, sets the width to that specific value.\r\nIf no value is provided, sets the width to match the container's width.\r\nWhen cursor preview is enabled, also updates the preview canvas width.", + docs: "Sets the width of the canvas element(s).\nIf a value is provided, sets the width to that specific value.\nIf no value is provided, sets the width to match the container's width.\nWhen cursor preview is enabled, also updates the preview canvas width.", returns: { type: "Promise", docs: "Promise that resolves when width is set", @@ -788,7 +788,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfStrokeTolerance", - docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\r\nThis prop sets the tolerance of the algorithm (null to disable).", + docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\nThis prop sets the tolerance of the algorithm (null to disable).", type: "number", }, { @@ -879,12 +879,12 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Card component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Card component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLayout", - docs: 'The layout style for the card component.\r\nCan be set to different predefined styles like "material" design.', + docs: 'The layout style for the card component.\nCan be set to different predefined styles like "material" design.', type: '"debug" | "keywords" | "material" | "upload"', }, { @@ -971,7 +971,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "nextSlide", - docs: "Moves the carousel to the next slide.\r\nTriggers the next slide transition using the carousel controller's next function.", + docs: "Moves the carousel to the next slide.\nTriggers the next slide transition using the carousel controller's next function.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete.", @@ -980,7 +980,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "prevSlide", - docs: "Moves the carousel to the previous slide by invoking the `previous` method\r\nfrom the carousel controller's index set.", + docs: "Moves the carousel to the previous slide by invoking the `previous` method\nfrom the carousel controller's index set.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete", @@ -1014,7 +1014,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Carousel component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Carousel component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1139,12 +1139,12 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLegend", - docs: "Sets the position of the legend.\r\nSupported values: bottom, left, right, top, hidden.\r\nKeep in mind that legend types are tied to chart types, some combinations might not work.", + docs: "Sets the position of the legend.\nSupported values: bottom, left, right, top, hidden.\nKeep in mind that legend types are tied to chart types, some combinations might not work.", type: '"bottom" | "hidden" | "left" | "right" | "top"', }, { @@ -1169,8 +1169,8 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTypes", - docs: "The type of the chart.\r\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", - type: '("area" | "line" | "bar" | "radar" | "calendar" | "scatter" | "pie" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', + docs: "The type of the chart.\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", + type: '("bar" | "line" | "radar" | "calendar" | "scatter" | "pie" | "area" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', }, { name: "lfXAxis", @@ -1459,7 +1459,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chip component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chip component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1489,7 +1489,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the chip.\r\nRelevant only when the chip can be selected.", + docs: "Sets the initial state of the chip.\nRelevant only when the chip can be selected.", type: "string[]", }, ], @@ -1748,7 +1748,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1826,7 +1826,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "close", - docs: "Closes the drawer component.\r\nUses requestAnimationFrame to ensure smooth animation and state update.\r\nDispatches a 'close' custom event when the drawer is closed.", + docs: "Closes the drawer component.\nUses requestAnimationFrame to ensure smooth animation and state update.\nDispatches a 'close' custom event when the drawer is closed.", returns: { type: "Promise", docs: "Promise that resolves when the drawer closing animation is scheduled", @@ -1880,7 +1880,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "toggle", - docs: "Toggles the drawer state between opened and closed.\r\nIf the drawer is currently opened, it will be closed.\r\nIf the drawer is currently closed, it will be opened.", + docs: "Toggles the drawer state between opened and closed.\nIf the drawer is currently opened, it will be closed.\nIf the drawer is currently closed, it will be opened.", returns: { type: "Promise", docs: "A promise that resolves when the toggle operation is complete", @@ -1910,7 +1910,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfResponsive", - docs: 'A number representing a screen-width breakpoint for responsiveness.\r\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\r\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\r\notherwise `"slide"`.', + docs: 'A number representing a screen-width breakpoint for responsiveness.\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\notherwise `"slide"`.', type: "number", }, { @@ -2078,22 +2078,22 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHtmlAttributes", - docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the image element.\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", - docs: "Controls the display of a loading indicator.\r\nWhen enabled, a spinner is shown until the image finishes loading.\r\nThis property is not compatible with SVG images.", + docs: "Controls the display of a loading indicator.\nWhen enabled, a spinner is shown until the image finishes loading.\nThis property is not compatible with SVG images.", type: "boolean", }, { name: "lfSizeX", - docs: "Sets the width of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the width of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { name: "lfSizeY", - docs: "Sets the height of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the height of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { @@ -2108,7 +2108,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Defines the source URL of the image.\r\nThis property is used to set the image resource that the component should display.", + docs: "Defines the source URL of the image.\nThis property is used to set the image resource that the component should display.", type: "string", }, ], @@ -2143,7 +2143,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "addSnapshot", - docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\r\nIt has no effect when the current shape is not set.", + docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\nIt has no effect when the current shape is not set.", returns: { type: "Promise", docs: "", @@ -2152,7 +2152,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "clearHistory", - docs: "Clears the history related to the shape identified by the index.\r\nWhen index is not provided, it clear the full history.", + docs: "Clears the history related to the shape identified by the index.\nWhen index is not provided, it clear the full history.", returns: { type: "Promise", docs: "", @@ -2245,7 +2245,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Imageviewer component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Imageviewer component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2295,7 +2295,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "focusNext", - docs: "Moves focus to the next item in the list.\r\nIf no item is currently focused, focuses the selected item.\r\nIf the last item is focused, wraps around to the first item.", + docs: "Moves focus to the next item in the list.\nIf no item is currently focused, focuses the selected item.\nIf the last item is focused, wraps around to the first item.", returns: { type: "Promise", docs: "A promise that resolves when the focus operation is complete", @@ -2304,7 +2304,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "focusPrevious", - docs: "Focuses the previous item in the list.\r\nIf no item is currently focused, it focuses the selected item.\r\nIf focused item is the first one, it wraps around to the last item.", + docs: "Focuses the previous item in the list.\nIf no item is currently focused, it focuses the selected item.\nIf focused item is the first one, it wraps around to the last item.", returns: { type: "Promise", docs: "Promise that resolves when the focus operation is complete", @@ -2349,7 +2349,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "selectNode", - docs: "Selects a node in the list at the specified index.\r\nIf no index is provided, selects the currently focused node.", + docs: "Selects a node in the list at the specified index.\nIf no index is provided, selects the currently focused node.", returns: { type: "Promise", docs: "A promise that resolves when the selection is complete.", @@ -2369,7 +2369,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2414,7 +2414,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the list.\r\nRelevant only when the list can be selected.", + docs: "Sets the initial state of the list.\nRelevant only when the list can be selected.", type: "number", }, ], @@ -2543,7 +2543,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfColumns", - docs: "Number of columns of the masonry, doesn't affect sequential views.\r\nCan be set with a number or an array of numbers that identify each breakpoint.", + docs: "Number of columns of the masonry, doesn't affect sequential views.\nCan be set with a number or an array of numbers that identify each breakpoint.", type: "number | number[]", }, { @@ -2668,7 +2668,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "reset", - docs: "Resets the messenger component to its initial state.\r\nClears covers, current character, and message history.\r\nReinitializes the component.", + docs: "Resets the messenger component to its initial state.\nClears covers, current character, and message history.\nReinitializes the component.", returns: { type: "Promise", docs: "A promise that resolves when the reset is complete", @@ -2702,7 +2702,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfMessengerDataset", }, { @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -2928,7 +2928,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfIcon", docs: "Displays an animated SVG placeholder until the component is loaded.", - type: '"article" | "code" | "progress" | "download" | "id" | "x" | "replace" | "copy" | "key" | "search" | "brush" | "list" | "upload" | "check" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', + type: '"x" | "id" | "replace" | "search" | "brush" | "list" | "progress" | "upload" | "check" | "code" | "copy" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "download" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "article" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "key" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', }, { name: "lfProps", @@ -2947,7 +2947,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTrigger", - docs: "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport.", + docs: "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport.", type: '"both" | "props" | "viewport"', }, { @@ -3026,7 +3026,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfCenteredLabel", - docs: "Displays the label in the middle of the progress bar.\r\nIt's the default for the radial variant and can't be changed.", + docs: "Displays the label in the middle of the progress bar.\nIt's the default for the radial variant and can't be changed.", type: "boolean", }, { @@ -3181,7 +3181,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfLeadingLabel", - docs: "When true, displays the label before the slider component.\r\nDefaults to `false`.", + docs: "When true, displays the label before the slider component.\nDefaults to `false`.", type: "boolean", }, { @@ -3360,7 +3360,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDimensions", - docs: "Defines the width and height of the spinner.\r\nIn the bar variant, it specifies only the height.", + docs: "Defines the width and height of the spinner.\nIn the bar variant, it specifies only the height.", type: "string", }, { @@ -3567,7 +3567,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Tabbar component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tabbar component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -3722,13 +3722,13 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHelper", - docs: "Sets the helper text for the text field.\r\nThe helper text can provide additional information or instructions to the user.", + docs: "Sets the helper text for the text field.\nThe helper text can provide additional information or instructions to the user.", type: "LfTextfieldHelper", }, { name: "lfHtmlAttributes", - docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the input or textarea element through additional HTML attributes.\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", @@ -4168,7 +4168,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Tree component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tree component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -4183,7 +4183,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfInitialExpansionDepth", - docs: "Sets the initial expanded nodes based on the specified depth.\r\nIf the property is not provided, all nodes in the tree will be expanded.", + docs: "Sets the initial expanded nodes based on the specified depth.\nIf the property is not provided, all nodes in the tree will be expanded.", type: "number", }, { From 3e53ed71da916d3b829f20c5ba34fd5a28aa7ff2 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:45:19 +0100 Subject: [PATCH 19/27] fix(card): fixed unscrollable description --- .../components/lf-card/elements.material.tsx | 77 ++++++++++++++----- .../components/lf-card/style.material.scss | 6 ++ 2 files changed, 63 insertions(+), 20 deletions(-) diff --git a/packages/core/src/components/lf-card/elements.material.tsx b/packages/core/src/components/lf-card/elements.material.tsx index e6514e4..64aeef5 100644 --- a/packages/core/src/components/lf-card/elements.material.tsx +++ b/packages/core/src/components/lf-card/elements.material.tsx @@ -1,8 +1,15 @@ -import { LfCardAdapter } from "@lf-widgets/foundations"; +import { LfCardAdapter, LfDataCell } from "@lf-widgets/foundations"; import { h, VNode } from "@stencil/core"; +import { LfShape } from "../../utils/shapes"; import { LfCard } from "./lf-card"; //#region Material layout +/** + * Prepares the material layout for the LfCard component. + * + * @param {() => LfCardAdapter} getAdapter - Function to get the LfCardAdapter instance. + * @returns {VNode} The virtual node representing the material layout. + */ export const prepMaterial = (getAdapter: () => LfCardAdapter): VNode => { const { blocks, @@ -15,8 +22,7 @@ export const prepMaterial = (getAdapter: () => LfCardAdapter): VNode => { shapes, } = getAdapter().controller.get; const { material } = defaults; - const { data, effects, theme } = manager; - const { decorate } = data.cell.shapes; + const { effects, theme } = manager; const { bemClass } = theme; const { materialLayout, textContent } = blocks; @@ -24,38 +30,72 @@ export const prepMaterial = (getAdapter: () => LfCardAdapter): VNode => { const comp = compInstance as LfCard; //#region Button - const buttons = decorate("button", button, async (e) => - comp.onLfEvent(e, "lf-event"), - ); + const buttons: LfDataCell<"button">[] = []; + for (let index = 0; index < button.length; index++) { + buttons.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasButton = Boolean(buttons?.length); //#endregion //#region Image - const images = decorate( - "image", - image, - async (e) => comp.onLfEvent(e, "lf-event"), - material.image(), - ); + const images: LfDataCell<"image">[] = []; + const imagesDef = material.image(); + for (let index = 0; index < image.length; index++) { + images.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasImage = Boolean(images?.length); //#endregion //#region Text - const texts = decorate("text", text, async (e) => - comp.onLfEvent(e, "lf-event"), - ); + const texts: LfDataCell<"text">[] = []; + for (let index = 0; index < text.length; index++) { + texts.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasText = Boolean(texts?.length); const title = (hasText && text?.[0]?.value) || null; const subtitle = (hasText && text?.[1]?.value) || null; const description = (hasText && text?.[2]?.value) || null; //#endregion + let rippleSurface: HTMLDivElement; + return (
{ + effects.ripple(e as PointerEvent, rippleSurface); + }} part={parts.materialLayout} > {hasImage && ( @@ -81,14 +121,11 @@ export const prepMaterial = (getAdapter: () => LfCardAdapter): VNode => {
{ - effects.ripple(e as PointerEvent, e.currentTarget as HTMLElement); - }} - part={lfAttributes.rippleSurface} + ref={(r: HTMLDivElement) => (rippleSurface = r)} >
{hasButton && (
- {...buttons} + {buttons}
)}
diff --git a/packages/core/src/components/lf-card/style.material.scss b/packages/core/src/components/lf-card/style.material.scss index a1dcd35..df4e714 100644 --- a/packages/core/src/components/lf-card/style.material.scss +++ b/packages/core/src/components/lf-card/style.material.scss @@ -11,6 +11,7 @@ $box-shadow-color: var(--lf-#{$comp}-color-primary, var(--lf-color-primary)); 0 2px 1px -1px rgba($box-shadow-color, 0.1), 0 1px 1px 0 rgba($box-shadow-color, 0.1), 0 1px 3px 0 rgba($box-shadow-color, 0.6); + cursor: pointer; display: flex; flex-direction: column; overflow: auto; @@ -100,3 +101,8 @@ $box-shadow-color: var(--lf-#{$comp}-color-primary, var(--lf-color-primary)); } } } + +[data-lf="ripple-surface"] { + pointer-events: none; + z-index: 1; +} From 8d8a2b71a7b14f739f3c1fa8207fbd78dfcb065e Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:45:44 +0100 Subject: [PATCH 20/27] fix(chart): increased tooltip's background alpha --- packages/core/src/components/lf-chart/helpers.utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/lf-chart/helpers.utils.ts b/packages/core/src/components/lf-chart/helpers.utils.ts index c3b8d08..8663b22 100644 --- a/packages/core/src/components/lf-chart/helpers.utils.ts +++ b/packages/core/src/components/lf-chart/helpers.utils.ts @@ -210,7 +210,7 @@ export const prepTooltip = ( const { compute } = manager.color; const tooltip: TooltipComponentOption = { - backgroundColor: `rgba(${compute(background).rgbValues}, 0.575)`, + backgroundColor: `rgba(${compute(background).rgbValues}, 0.875)`, formatter, textStyle: { color: text, From e0735eeba9c9df65b601f565b8955de076f7fdb1 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 20:09:53 +0100 Subject: [PATCH 21/27] fix(code): adjusted style --- packages/core/src/components/lf-code/lf-code.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/lf-code/lf-code.scss b/packages/core/src/components/lf-code/lf-code.scss index 4655821..22bf774 100644 --- a/packages/core/src/components/lf-code/lf-code.scss +++ b/packages/core/src/components/lf-code/lf-code.scss @@ -8,7 +8,6 @@ $borderC: 1px solid rgb(var(--lf-color-border)); #lf-component, .container { - overflow: auto; position: relative; } @@ -28,7 +27,7 @@ $borderC: 1px solid rgb(var(--lf-color-border)); } &--has-header { - grid-template-rows: max-content 1fr; + grid-template-rows: auto 1fr; } &__header { @@ -53,6 +52,7 @@ $borderC: 1px solid rgb(var(--lf-color-border)); * Defaults to => 1px solid var(--lf-color-border) */ border-top: var(--lf-#{comp}-border-top, $borderC); + box-sizing: border-box; display: flex; height: var(--lf-#{$comp}-header-height, 2.25em); justify-content: var(--lf-#{$comp}-header-justify, space-between); @@ -84,6 +84,7 @@ pre, border-top-left-radius: 0; border-top-right-radius: 0; box-sizing: border-box; + overflow: auto; @include lf-comp-glassmorphize($comp, "surface", "all", 0.375); } From dcb112a9858bfe2bf17bf6b5aa4dc75a850eed3e Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 20:10:19 +0100 Subject: [PATCH 22/27] fix(shapes): extracted from framework, moved to core --- .../components/lf-accordion/lf-accordion.tsx | 17 +- .../src/components/lf-accordion/readme.md | 55 +++- .../src/components/lf-article/lf-article.tsx | 17 +- .../core/src/components/lf-article/readme.md | 55 +++- .../core/src/components/lf-badge/readme.md | 15 + .../core/src/components/lf-canvas/readme.md | 12 + .../src/components/lf-card/elements.debug.tsx | 97 +++++-- .../components/lf-card/elements.keywords.tsx | 92 +++++-- .../components/lf-card/elements.upload.tsx | 44 ++- .../core/src/components/lf-card/lf-card.tsx | 2 - .../core/src/components/lf-card/readme.md | 48 +++- .../components/lf-carousel/lf-carousel.tsx | 20 +- .../core/src/components/lf-carousel/readme.md | 51 +++- .../core/src/components/lf-chart/readme.md | 23 ++ .../core/src/components/lf-chat/readme.md | 12 + .../core/src/components/lf-chip/readme.md | 12 + .../core/src/components/lf-code/readme.md | 12 + .../src/components/lf-compare/lf-compare.tsx | 32 ++- .../core/src/components/lf-compare/readme.md | 55 +++- .../core/src/components/lf-image/readme.md | 18 +- .../src/components/lf-imageviewer/readme.md | 38 ++- .../core/src/components/lf-list/readme.md | 12 - .../src/components/lf-masonry/lf-masonry.tsx | 29 +- .../core/src/components/lf-masonry/readme.md | 55 +++- .../src/components/lf-photoframe/readme.md | 29 +- .../src/components/lf-progressbar/readme.md | 12 - .../core/src/components/lf-spinner/readme.md | 12 - .../src/components/lf-textfield/readme.md | 40 +-- .../core/src/components/lf-toggle/readme.md | 23 ++ .../core/src/components/lf-upload/readme.md | 23 ++ packages/core/src/utils/shapes.ts | 42 --- packages/core/src/utils/shapes.tsx | 257 ++++++++++++++++++ .../src/components/accordion.declarations.ts | 3 +- .../src/components/article.declarations.ts | 3 +- .../src/components/badge.declarations.ts | 5 +- .../src/components/button.declarations.ts | 3 +- .../src/components/canvas.declarations.ts | 3 +- .../src/components/card.declarations.ts | 5 +- .../src/components/carousel.declarations.ts | 3 +- .../src/components/chart.declarations.ts | 5 +- .../src/components/chat.declarations.ts | 5 +- .../src/components/chip.declarations.ts | 10 +- .../src/components/code.declarations.ts | 5 +- .../src/components/compare.declarations.ts | 3 +- .../src/components/drawer.declarations.ts | 3 +- .../src/components/header.declarations.ts | 8 +- .../src/components/image.declarations.ts | 5 +- .../components/imageviewer.declarations.ts | 3 +- .../src/components/list.declarations.ts | 10 +- .../src/components/masonry.declarations.ts | 3 +- .../src/components/messenger.declarations.ts | 3 +- .../src/components/photoframe.declarations.ts | 3 +- .../components/placeholder.declarations.ts | 8 +- .../components/progressbar.declarations.ts | 8 +- .../src/components/slider.declarations.ts | 8 +- .../src/components/spinner.declarations.ts | 8 +- .../src/components/splash.declarations.ts | 8 +- .../src/components/tabbar.declarations.ts | 8 +- .../src/components/textfield.declarations.ts | 3 +- .../src/components/toast.declarations.ts | 10 +- .../src/components/toggle.declarations.ts | 8 +- .../src/components/tree.declarations.ts | 5 +- .../src/components/typewriter.declarations.ts | 8 +- .../src/components/upload.declarations.ts | 3 +- .../foundations/components.declarations.ts | 20 ++ .../src/framework/data.declarations.ts | 102 ++----- .../src/framework/framework.constants.ts | 1 + .../framework/src/lf-data/helpers.cell.tsx | 158 ----------- packages/framework/src/lf-data/lf-data.ts | 51 +--- 69 files changed, 1137 insertions(+), 632 deletions(-) delete mode 100644 packages/core/src/utils/shapes.ts create mode 100644 packages/core/src/utils/shapes.tsx diff --git a/packages/core/src/components/lf-accordion/lf-accordion.tsx b/packages/core/src/components/lf-accordion/lf-accordion.tsx index 9ab131d..d9936b7 100644 --- a/packages/core/src/components/lf-accordion/lf-accordion.tsx +++ b/packages/core/src/components/lf-accordion/lf-accordion.tsx @@ -32,7 +32,7 @@ import { VNode, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; -import { defineShapes } from "../../utils/shapes"; +import { LfShape } from "../../utils/shapes"; /** * Represents an accordion-style component that displays a list of data items, @@ -395,17 +395,19 @@ export class LfAccordion implements LfAccordionInterface { return nodes; } #prepCell = (node: LfDataNode): VNode => { - const { data } = this.#framework; - const { decorate } = data.cell.shapes; - const { cells } = node; const key = cells && Object.keys(cells)[0]; const cell = cells?.[key]; - const shape = decorate(cell.shape, [cell], async (e) => - this.onLfEvent(e, "lf-event"), + return ( + this.onLfEvent(e, "lf-event")} + framework={this.#framework} + > ); - return shape[0]; }; //#endregion @@ -417,7 +419,6 @@ export class LfAccordion implements LfAccordionInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); } componentDidLoad() { const { info } = this.#framework.debug; diff --git a/packages/core/src/components/lf-accordion/readme.md b/packages/core/src/components/lf-accordion/readme.md index b5e8824..63b148b 100644 --- a/packages/core/src/components/lf-accordion/readme.md +++ b/packages/core/src/components/lf-accordion/readme.md @@ -134,26 +134,61 @@ Type: `Promise` ### Depends on -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) -- [lf-image](../lf-image) +- [lf-badge](../lf-badge) - [lf-button](../lf-button) +- [lf-canvas](../lf-canvas) +- [lf-card](../lf-card) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) +- [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) ### Graph ```mermaid graph TD; - lf-accordion --> lf-list - lf-accordion --> lf-spinner - lf-accordion --> lf-image + lf-accordion --> lf-badge lf-accordion --> lf-button + lf-accordion --> lf-canvas + lf-accordion --> lf-card + lf-accordion --> lf-chart + lf-accordion --> lf-chat + lf-accordion --> lf-chip + lf-accordion --> lf-code + lf-accordion --> lf-image + lf-accordion --> lf-photoframe + lf-accordion --> lf-toggle lf-accordion --> lf-typewriter - lf-accordion --> lf-progressbar - lf-accordion --> lf-textfield + lf-accordion --> lf-upload + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image style lf-accordion fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-article/lf-article.tsx b/packages/core/src/components/lf-article/lf-article.tsx index 32b4f3e..4cb24df 100644 --- a/packages/core/src/components/lf-article/lf-article.tsx +++ b/packages/core/src/components/lf-article/lf-article.tsx @@ -31,7 +31,7 @@ import { VNode, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; -import { defineShapes } from "../../utils/shapes"; +import { LfShape } from "../../utils/shapes"; /** * Represents an article-style component that displays structured content @@ -315,8 +315,7 @@ export class LfArticle implements LfArticleInterface { ); } #contentTemplate(node: LfArticleNode, depth: number): VNode { - const { data, theme } = this.#framework; - const { decorate } = data.cell.shapes; + const { theme } = this.#framework; const { cells, cssStyle, tagName, value } = node; const key = cells && Object.keys(cells)[0]; @@ -325,10 +324,15 @@ export class LfArticle implements LfArticleInterface { const { content } = this.#b; if (cell) { - const shape = decorate(cell.shape, [cell], async (e) => - this.onLfEvent(e, "lf-event"), + return ( + this.onLfEvent(e, "lf-event")} + framework={this.#framework} + > ); - return shape[0]; } else { const ComponentTag = tagName ? tagName : "span"; return ( @@ -355,7 +359,6 @@ export class LfArticle implements LfArticleInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); } componentDidLoad() { const { info } = this.#framework.debug; diff --git a/packages/core/src/components/lf-article/readme.md b/packages/core/src/components/lf-article/readme.md index cbf2493..66a6c77 100644 --- a/packages/core/src/components/lf-article/readme.md +++ b/packages/core/src/components/lf-article/readme.md @@ -117,26 +117,61 @@ Type: `Promise` ### Depends on -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) -- [lf-image](../lf-image) +- [lf-badge](../lf-badge) - [lf-button](../lf-button) +- [lf-canvas](../lf-canvas) +- [lf-card](../lf-card) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) +- [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) ### Graph ```mermaid graph TD; - lf-article --> lf-list - lf-article --> lf-spinner - lf-article --> lf-image + lf-article --> lf-badge lf-article --> lf-button + lf-article --> lf-canvas + lf-article --> lf-card + lf-article --> lf-chart + lf-article --> lf-chat + lf-article --> lf-chip + lf-article --> lf-code + lf-article --> lf-image + lf-article --> lf-photoframe + lf-article --> lf-toggle lf-article --> lf-typewriter - lf-article --> lf-progressbar - lf-article --> lf-textfield + lf-article --> lf-upload + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image style lf-article fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-badge/readme.md b/packages/core/src/components/lf-badge/readme.md index fefc14f..fd090c5 100644 --- a/packages/core/src/components/lf-badge/readme.md +++ b/packages/core/src/components/lf-badge/readme.md @@ -97,6 +97,15 @@ Type: `Promise` ## Dependencies +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + ### Depends on - [lf-image](../lf-image) @@ -105,6 +114,12 @@ Type: `Promise` ```mermaid graph TD; lf-badge --> lf-image + lf-accordion --> lf-badge + lf-article --> lf-badge + lf-card --> lf-badge + lf-carousel --> lf-badge + lf-compare --> lf-badge + lf-masonry --> lf-badge style lf-badge fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-canvas/readme.md b/packages/core/src/components/lf-canvas/readme.md index 336ed6f..f68d516 100644 --- a/packages/core/src/components/lf-canvas/readme.md +++ b/packages/core/src/components/lf-canvas/readme.md @@ -193,7 +193,13 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) - [lf-imageviewer](../lf-imageviewer) + - [lf-masonry](../lf-masonry) ### Depends on @@ -203,7 +209,13 @@ Type: `Promise` ```mermaid graph TD; lf-canvas --> lf-image + lf-accordion --> lf-canvas + lf-article --> lf-canvas + lf-card --> lf-canvas + lf-carousel --> lf-canvas + lf-compare --> lf-canvas lf-imageviewer --> lf-canvas + lf-masonry --> lf-canvas style lf-canvas fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-card/elements.debug.tsx b/packages/core/src/components/lf-card/elements.debug.tsx index e52add9..d3cafd7 100644 --- a/packages/core/src/components/lf-card/elements.debug.tsx +++ b/packages/core/src/components/lf-card/elements.debug.tsx @@ -1,5 +1,12 @@ -import { LfCardAdapter } from "@lf-widgets/foundations"; +import { + LfButtonElement, + LfCardAdapter, + LfCodeElement, + LfDataCell, + LfToggleElement, +} from "@lf-widgets/foundations"; import { h, VNode } from "@stencil/core"; +import { LfShape } from "../../utils/shapes"; import { LfCard } from "./lf-card"; export const prepDebug = (getAdapter: () => LfCardAdapter): VNode => { @@ -9,8 +16,7 @@ export const prepDebug = (getAdapter: () => LfCardAdapter): VNode => { const { blocks, compInstance, defaults, manager, parts, shapes } = controller.get; const { debug } = defaults; - const { data, theme } = manager; - const { decorate } = data.cell.shapes; + const { theme } = manager; const { bemClass } = theme; const { debugLayout } = blocks; @@ -18,39 +24,72 @@ export const prepDebug = (getAdapter: () => LfCardAdapter): VNode => { const comp = compInstance as LfCard; //#region Button - const buttons = decorate<"LfButton", "button">( - "button", - button, - async (e) => comp.onLfEvent(e, "lf-event"), - debug.button(), - layouts.debug.button, - [(r) => (refs.layouts.debug.button = r)], - ); + const buttons: LfDataCell<"button">[] = []; + const buttonsDef = debug.button(); + for (let index = 0; index < button.length; index++) { + buttons.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + defaultCb={layouts.debug.button} + refCallback={(r: LfButtonElement) => (refs.layouts.debug.button = r)} + >, + ); + } const hasButton = Boolean(buttons?.length); - const hasButton2 = Boolean(buttons?.length > 1); + const hasMoreButtons = Boolean(buttons?.length > 1); //#endregion //#region Code - const codes = decorate<"LfCode", "code">( - "code", - code, - async (e) => comp.onLfEvent(e, "lf-event"), - debug.code(), - layouts.debug.code, - [(r) => (refs.layouts.debug.code = r)], - ); + const codes: LfDataCell<"code">[] = []; + const codesDef = debug.code(); + for (let index = 0; index < code.length; index++) { + codes.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + defaultCb={layouts.debug.code} + refCallback={(r: LfCodeElement) => (refs.layouts.debug.code = r)} + >, + ); + } const hasCode = Boolean(codes?.length); //#endregion //#region Toggle - const toggles = decorate<"LfToggle", "toggle">( - "toggle", - toggle, - async (e) => comp.onLfEvent(e, "lf-event"), - debug.toggle(), - layouts.debug.toggle, - [(r) => (refs.layouts.debug.toggle = r)], - ); + const toggles: LfDataCell<"toggle">[] = []; + const togglesDef = debug.toggle(); + for (let index = 0; index < toggle.length; index++) { + toggles.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + defaultCb={layouts.debug.toggle} + refCallback={(r: LfToggleElement) => (refs.layouts.debug.toggle = r)} + >, + ); + } const hasToggle = Boolean(toggles?.length); //#endregion @@ -71,7 +110,7 @@ export const prepDebug = (getAdapter: () => LfCardAdapter): VNode => { {buttons[0]} )} - {hasButton2 && ( + {hasMoreButtons && (
{buttons[1]}
diff --git a/packages/core/src/components/lf-card/elements.keywords.tsx b/packages/core/src/components/lf-card/elements.keywords.tsx index 02eba9d..8b8145e 100644 --- a/packages/core/src/components/lf-card/elements.keywords.tsx +++ b/packages/core/src/components/lf-card/elements.keywords.tsx @@ -1,5 +1,11 @@ -import { LfButtonEventPayload, LfCardAdapter } from "@lf-widgets/foundations"; +import { + LfButtonElement, + LfCardAdapter, + LfChipElement, + LfDataCell, +} from "@lf-widgets/foundations"; import { h, VNode } from "@stencil/core"; +import { LfShape } from "../../utils/shapes"; import { LfCard } from "./lf-card"; export const prepKeywords = (getAdapter: () => LfCardAdapter): VNode => { @@ -9,8 +15,7 @@ export const prepKeywords = (getAdapter: () => LfCardAdapter): VNode => { const { blocks, compInstance, defaults, manager, parts, shapes } = controller.get; const { keywords } = defaults; - const { data, theme } = manager; - const { decorate } = data.cell.shapes; + const { theme } = manager; const { bemClass } = theme; const { keywordsLayout } = blocks; @@ -18,40 +23,69 @@ export const prepKeywords = (getAdapter: () => LfCardAdapter): VNode => { const comp = compInstance as LfCard; //#region Button - const buttonCb = (e: CustomEvent) => { - layouts.keywords.button(e); - }; - const buttons = decorate<"LfButton", "button">( - "button", - button, - async (e) => comp.onLfEvent(e, "lf-event"), - keywords.button(), - buttonCb, - [() => refs.layouts.keywords.button], - ); + const buttons: LfDataCell<"button">[] = []; + const buttonsDef = keywords.button(); + for (let index = 0; index < button.length; index++) { + buttons.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + defaultCb={layouts.keywords.button} + refCallback={(r: LfButtonElement) => (refs.layouts.keywords.button = r)} + >, + ); + } const hasButton = Boolean(buttons?.length); //#endregion //#region Chart - const charts = decorate( - "chart", - chart, - async (e) => comp.onLfEvent(e, "lf-event"), - keywords.chart(), - ); + const charts: LfDataCell<"chart">[] = []; + const chartsDef = keywords.chart(); + for (let index = 0; index < chart.length; index++) { + charts.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasChart = Boolean(charts?.length); //#endregion //#region Chip - const chips = decorate<"LfChip", "chip">( - "chip", - chip, - async (e) => comp.onLfEvent(e, "lf-event"), - keywords.chip(), - undefined, - [(r) => (refs.layouts.keywords.chip = r)], - ); - const hasChip = Boolean(chips?.length); + const chips: LfDataCell<"chip">[] = []; + const chipsDef = keywords.chip(); + for (let index = 0; index < chart.length; index++) { + chips.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + refCallback={(r: LfChipElement) => (refs.layouts.keywords.chip = r)} + >, + ); + } + const hasChip = Boolean(charts?.length); //#endregion return ( diff --git a/packages/core/src/components/lf-card/elements.upload.tsx b/packages/core/src/components/lf-card/elements.upload.tsx index 596755a..c4fa157 100644 --- a/packages/core/src/components/lf-card/elements.upload.tsx +++ b/packages/core/src/components/lf-card/elements.upload.tsx @@ -1,13 +1,13 @@ -import { LfCardAdapter } from "@lf-widgets/foundations"; +import { LfCardAdapter, LfDataCell } from "@lf-widgets/foundations"; import { h, VNode } from "@stencil/core"; +import { LfShape } from "../../utils/shapes"; import { LfCard } from "./lf-card"; //#region Upload layout export const prepUpload = (getAdapter: () => LfCardAdapter): VNode => { const { blocks, compInstance, defaults, manager, parts, shapes } = getAdapter().controller.get; - const { data, theme } = manager; - const { decorate } = data.cell.shapes; + const { theme } = manager; const { bemClass } = theme; const { uploadLayout } = blocks; @@ -15,19 +15,39 @@ export const prepUpload = (getAdapter: () => LfCardAdapter): VNode => { const comp = compInstance as LfCard; //#region Button - const buttons = decorate( - "button", - button, - async (e) => comp.onLfEvent(e, "lf-event"), - defaults.upload.button(), - ); + const buttons: LfDataCell<"button">[] = []; + const buttonsDef = defaults.upload.button(); + for (let index = 0; index < button.length; index++) { + buttons.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasButton = Boolean(buttons?.length); //#endregion //#region Upload - const uploads = decorate("upload", upload, async (e) => - comp.onLfEvent(e, "lf-event"), - ); + const uploads: LfDataCell<"upload">[] = []; + for (let index = 0; index < upload.length; index++) { + uploads.push( + comp.onLfEvent(e, "lf-event")} + framework={manager} + >, + ); + } const hasUpload = Boolean(uploads?.length); //#endregion diff --git a/packages/core/src/components/lf-card/lf-card.tsx b/packages/core/src/components/lf-card/lf-card.tsx index 99c7cb3..1f34557 100644 --- a/packages/core/src/components/lf-card/lf-card.tsx +++ b/packages/core/src/components/lf-card/lf-card.tsx @@ -37,7 +37,6 @@ import { } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; import { createAdapter } from "./lf-card-adapter"; -import { defineShapes } from "../../utils/shapes"; /** * The card component displays a card with a header, body, and footer section. @@ -307,7 +306,6 @@ export class LfCard implements LfCardInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-card/readme.md b/packages/core/src/components/lf-card/readme.md index 3e86a8f..6f6eae7 100644 --- a/packages/core/src/components/lf-card/readme.md +++ b/packages/core/src/components/lf-card/readme.md @@ -105,28 +105,52 @@ Type: `Promise` ## Dependencies +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](.) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + ### Depends on -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) -- [lf-image](../lf-image) +- [lf-badge](../lf-badge) - [lf-button](../lf-button) +- [lf-canvas](../lf-canvas) +- [lf-card](.) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) +- [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) ### Graph ```mermaid graph TD; - lf-card --> lf-list - lf-card --> lf-spinner - lf-card --> lf-image - lf-card --> lf-button - lf-card --> lf-typewriter - lf-card --> lf-progressbar - lf-card --> lf-textfield + lf-card --> lf-card + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image + lf-accordion --> lf-card + lf-article --> lf-card + lf-carousel --> lf-card + lf-compare --> lf-card + lf-masonry --> lf-card style lf-card fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-carousel/lf-carousel.tsx b/packages/core/src/components/lf-carousel/lf-carousel.tsx index 734974e..4ee8479 100644 --- a/packages/core/src/components/lf-carousel/lf-carousel.tsx +++ b/packages/core/src/components/lf-carousel/lf-carousel.tsx @@ -36,9 +36,9 @@ import { Watch, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; +import { LfShape } from "../../utils/shapes"; import { autoplay, navigation } from "./helpers.utils"; import { createAdapter } from "./lf-carousel-adapter"; -import { defineShapes } from "../../utils/shapes"; /** * The carousel component displays a carousel with slides that can be navigated using navigation controls or by clicking on slide indicators. @@ -423,7 +423,6 @@ export class LfCarousel implements LfCarouselInterface { ); } #prepSlide(): VNode { - const { decorate } = this.#framework.data.cell.shapes; const { bemClass } = this.#framework.theme; const { currentIndex, lfShape } = this; @@ -440,19 +439,21 @@ export class LfCarousel implements LfCarouselInterface { }), ); - const decoratedShapes = decorate( - lfShape, - this.shapes[lfShape], - async (e) => this.onLfEvent(e, "lf-event"), - props, - ); + const cell = this.shapes[lfShape][currentIndex]; + const defaultCell = props[currentIndex]; return (
- {decoratedShapes[currentIndex]} + this.onLfEvent(e, "lf-event")} + framework={this.#framework} + >
); } @@ -466,7 +467,6 @@ export class LfCarousel implements LfCarouselInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); diff --git a/packages/core/src/components/lf-carousel/readme.md b/packages/core/src/components/lf-carousel/readme.md index a0a0b52..42ec64f 100644 --- a/packages/core/src/components/lf-carousel/readme.md +++ b/packages/core/src/components/lf-carousel/readme.md @@ -136,26 +136,61 @@ Type: `Promise` ### Depends on +- [lf-badge](../lf-badge) - [lf-button](../lf-button) -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) +- [lf-canvas](../lf-canvas) +- [lf-card](../lf-card) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) - [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) ### Graph ```mermaid graph TD; + lf-carousel --> lf-badge lf-carousel --> lf-button - lf-carousel --> lf-list - lf-carousel --> lf-spinner + lf-carousel --> lf-canvas + lf-carousel --> lf-card + lf-carousel --> lf-chart + lf-carousel --> lf-chat + lf-carousel --> lf-chip + lf-carousel --> lf-code lf-carousel --> lf-image + lf-carousel --> lf-photoframe + lf-carousel --> lf-toggle lf-carousel --> lf-typewriter - lf-carousel --> lf-progressbar - lf-carousel --> lf-textfield + lf-carousel --> lf-upload + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image style lf-carousel fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index e45cc45..517d370 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -106,6 +106,29 @@ Type: `Promise` | `--lf-chart-font-size` | Sets the font size for the chart component. Defaults to => var(--lf-font-size) | +## Dependencies + +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + +### Graph +```mermaid +graph TD; + lf-accordion --> lf-chart + lf-article --> lf-chart + lf-card --> lf-chart + lf-carousel --> lf-chart + lf-compare --> lf-chart + lf-masonry --> lf-chart + style lf-chart fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/lf-chat/readme.md b/packages/core/src/components/lf-chat/readme.md index a0c5914..024497b 100644 --- a/packages/core/src/components/lf-chat/readme.md +++ b/packages/core/src/components/lf-chat/readme.md @@ -147,6 +147,12 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) - [lf-messenger](../lf-messenger) ### Depends on @@ -170,6 +176,12 @@ graph TD; lf-code --> lf-button lf-button --> lf-list lf-button --> lf-spinner + lf-accordion --> lf-chat + lf-article --> lf-chat + lf-card --> lf-chat + lf-carousel --> lf-chat + lf-compare --> lf-chat + lf-masonry --> lf-chat lf-messenger --> lf-chat style lf-chat fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-chip/readme.md b/packages/core/src/components/lf-chip/readme.md index df69986..26037af 100644 --- a/packages/core/src/components/lf-chip/readme.md +++ b/packages/core/src/components/lf-chip/readme.md @@ -133,11 +133,23 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) - [lf-messenger](../lf-messenger) ### Graph ```mermaid graph TD; + lf-accordion --> lf-chip + lf-article --> lf-chip + lf-card --> lf-chip + lf-carousel --> lf-chip + lf-compare --> lf-chip + lf-masonry --> lf-chip lf-messenger --> lf-chip style lf-chip fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-code/readme.md b/packages/core/src/components/lf-code/readme.md index ea837dc..31572f1 100644 --- a/packages/core/src/components/lf-code/readme.md +++ b/packages/core/src/components/lf-code/readme.md @@ -106,7 +106,13 @@ Type: `Promise` ### Used by + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) - [lf-messenger](../lf-messenger) ### Depends on @@ -119,7 +125,13 @@ graph TD; lf-code --> lf-button lf-button --> lf-list lf-button --> lf-spinner + lf-accordion --> lf-code + lf-article --> lf-code + lf-card --> lf-code + lf-carousel --> lf-code lf-chat --> lf-code + lf-compare --> lf-code + lf-masonry --> lf-code lf-messenger --> lf-code style lf-code fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-compare/lf-compare.tsx b/packages/core/src/components/lf-compare/lf-compare.tsx index b9de9cf..ed6924b 100644 --- a/packages/core/src/components/lf-compare/lf-compare.tsx +++ b/packages/core/src/components/lf-compare/lf-compare.tsx @@ -37,8 +37,8 @@ import { Watch, } from "@stencil/core"; import { awaitFramework } from "../../utils/setup"; +import { LfShape } from "../../utils/shapes"; import { createAdapter } from "./lf-compare-adapter"; -import { defineShapes } from "../../utils/shapes"; /** * Represents a comparison component that displays two shapes side by side or @@ -320,7 +320,7 @@ export class LfCompare implements LfCompareInterface { ); } #prepView(): VNode { - const { data, sanitizeProps, theme } = this.#framework; + const { sanitizeProps, theme } = this.#framework; const { bemClass } = theme; const { view } = this.#b; @@ -348,13 +348,6 @@ export class LfCompare implements LfCompareInterface { rightSanitized.push(sanitizeProps(s)); } - const shapes = data.cell.shapes.decorate( - lfShape, - [leftShape, rightShape], - async (e) => this.onLfEvent(e, "lf-event"), - [...leftSanitized, ...rightSanitized], - ); - return (
-
{shapes[0]}
+
+ this.onLfEvent(e, "lf-event")} + framework={this.#framework} + > +
{isLeftPanelOpened && leftTree()} {isRightPanelOpened && rightTree()} {this.#isOverlay() && ( @@ -381,7 +382,15 @@ export class LfCompare implements LfCompareInterface { />
)} -
{shapes[1]}
+
+ this.onLfEvent(e, "lf-event")} + framework={this.#framework} + > +
); @@ -406,7 +415,6 @@ export class LfCompare implements LfCompareInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-compare/readme.md b/packages/core/src/components/lf-compare/readme.md index c7ffd63..b320145 100644 --- a/packages/core/src/components/lf-compare/readme.md +++ b/packages/core/src/components/lf-compare/readme.md @@ -101,28 +101,63 @@ Type: `Promise` ### Depends on +- [lf-badge](../lf-badge) - [lf-button](../lf-button) -- [lf-tree](../lf-tree) -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) +- [lf-canvas](../lf-canvas) +- [lf-card](../lf-card) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) - [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) +- [lf-tree](../lf-tree) ### Graph ```mermaid graph TD; + lf-compare --> lf-badge lf-compare --> lf-button - lf-compare --> lf-tree - lf-compare --> lf-list - lf-compare --> lf-spinner + lf-compare --> lf-canvas + lf-compare --> lf-card + lf-compare --> lf-chart + lf-compare --> lf-chat + lf-compare --> lf-chip + lf-compare --> lf-code lf-compare --> lf-image + lf-compare --> lf-photoframe + lf-compare --> lf-toggle lf-compare --> lf-typewriter - lf-compare --> lf-progressbar - lf-compare --> lf-textfield + lf-compare --> lf-upload + lf-compare --> lf-tree + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image lf-tree --> lf-textfield style lf-compare fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index c83eda4..ddcba24 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -13,15 +13,15 @@ The component supports various customization options, including size, styling, a ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | -| `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | -| `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | -| `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | -| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfUiState` | `lf-ui-state` | Reflects the specified state color defined by the theme. | `"danger" \| "disabled" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `"primary"` | -| `lfValue` | `lf-value` | Defines the source URL of the image. This property is used to set the image resource that the component should display. | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | +| `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | +| `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | +| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | +| `lfUiState` | `lf-ui-state` | Reflects the specified state color defined by the theme. | `"danger" \| "disabled" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `"primary"` | +| `lfValue` | `lf-value` | Defines the source URL of the image. This property is used to set the image resource that the component should display. | `string` | `""` | ## Events diff --git a/packages/core/src/components/lf-imageviewer/readme.md b/packages/core/src/components/lf-imageviewer/readme.md index 7516ad0..97fa1ce 100644 --- a/packages/core/src/components/lf-imageviewer/readme.md +++ b/packages/core/src/components/lf-imageviewer/readme.md @@ -203,13 +203,41 @@ graph TD; lf-button --> lf-list lf-button --> lf-spinner lf-tree --> lf-textfield - lf-masonry --> lf-list - lf-masonry --> lf-spinner - lf-masonry --> lf-image + lf-masonry --> lf-badge lf-masonry --> lf-button + lf-masonry --> lf-canvas + lf-masonry --> lf-card + lf-masonry --> lf-chart + lf-masonry --> lf-chat + lf-masonry --> lf-chip + lf-masonry --> lf-code + lf-masonry --> lf-image + lf-masonry --> lf-photoframe + lf-masonry --> lf-toggle lf-masonry --> lf-typewriter - lf-masonry --> lf-progressbar - lf-masonry --> lf-textfield + lf-masonry --> lf-upload + lf-badge --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image style lf-imageviewer fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-list/readme.md b/packages/core/src/components/lf-list/readme.md index 9f827c1..f22eac8 100644 --- a/packages/core/src/components/lf-list/readme.md +++ b/packages/core/src/components/lf-list/readme.md @@ -155,24 +155,12 @@ Type: `Promise` ### Used by - - [lf-accordion](../lf-accordion) - - [lf-article](../lf-article) - [lf-button](../lf-button) - - [lf-card](../lf-card) - - [lf-carousel](../lf-carousel) - - [lf-compare](../lf-compare) - - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; - lf-accordion --> lf-list - lf-article --> lf-list lf-button --> lf-list - lf-card --> lf-list - lf-carousel --> lf-list - lf-compare --> lf-list - lf-masonry --> lf-list style lf-list fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-masonry/lf-masonry.tsx b/packages/core/src/components/lf-masonry/lf-masonry.tsx index f43e6ff..972da44 100644 --- a/packages/core/src/components/lf-masonry/lf-masonry.tsx +++ b/packages/core/src/components/lf-masonry/lf-masonry.tsx @@ -40,8 +40,8 @@ import { VNode, Watch, } from "@stencil/core"; -import { defineShapes } from "../../utils/shapes"; import { awaitFramework } from "../../utils/setup"; +import { LfShape } from "../../utils/shapes"; import { createAdapter } from "./lf-masonry-adapter"; /** @@ -425,8 +425,6 @@ export class LfMasonry implements LfMasonryInterface { return 1; } #divideShapesIntoColumns = (): VNode[][] => { - const { decorate } = this.#framework.data.cell.shapes; - const { lfShape, selectedShape, shapes } = this; const props: Partial>[] = shapes[this.lfShape].map( @@ -448,17 +446,21 @@ export class LfMasonry implements LfMasonryInterface { (): VNode[] => [], [], ); - const decoratedShapes = decorate( - lfShape, - shapes[lfShape], - async (e) => this.onLfEvent(e, "lf-event"), - props, - ); - decoratedShapes.forEach((element: VNode, index: number) => { - element.$attrs$["data-index"] = index.toString(); - columns[index % this.#currentColumns].push(element); - }); + for (let index = 0; index < shapes[lfShape].length; index++) { + const cell = shapes[lfShape][index]; + const defaultCell = props[index]; + + columns[index % this.#currentColumns].push( + this.onLfEvent(e, "lf-event")} + framework={this.#framework} + >, + ); + } return columns; }; @@ -532,7 +534,6 @@ export class LfMasonry implements LfMasonryInterface { } async componentWillLoad() { this.#framework = await awaitFramework(this); - defineShapes(this.#framework); this.#initAdapter(); this.updateShapes(); } diff --git a/packages/core/src/components/lf-masonry/readme.md b/packages/core/src/components/lf-masonry/readme.md index 646ceba..32c4255 100644 --- a/packages/core/src/components/lf-masonry/readme.md +++ b/packages/core/src/components/lf-masonry/readme.md @@ -143,26 +143,61 @@ Type: `Promise` ### Depends on -- [lf-list](../lf-list) -- [lf-spinner](../lf-spinner) -- [lf-image](../lf-image) +- [lf-badge](../lf-badge) - [lf-button](../lf-button) +- [lf-canvas](../lf-canvas) +- [lf-card](../lf-card) +- [lf-chart](../lf-chart) +- [lf-chat](../lf-chat) +- [lf-chip](../lf-chip) +- [lf-code](../lf-code) +- [lf-image](../lf-image) +- [lf-photoframe](../lf-photoframe) +- [lf-toggle](../lf-toggle) - [lf-typewriter](../lf-typewriter) -- [lf-progressbar](../lf-progressbar) -- [lf-textfield](../lf-textfield) +- [lf-upload](../lf-upload) ### Graph ```mermaid graph TD; - lf-masonry --> lf-list - lf-masonry --> lf-spinner - lf-masonry --> lf-image + lf-masonry --> lf-badge lf-masonry --> lf-button + lf-masonry --> lf-canvas + lf-masonry --> lf-card + lf-masonry --> lf-chart + lf-masonry --> lf-chat + lf-masonry --> lf-chip + lf-masonry --> lf-code + lf-masonry --> lf-image + lf-masonry --> lf-photoframe + lf-masonry --> lf-toggle lf-masonry --> lf-typewriter - lf-masonry --> lf-progressbar - lf-masonry --> lf-textfield + lf-masonry --> lf-upload + lf-badge --> lf-image lf-button --> lf-list lf-button --> lf-spinner + lf-canvas --> lf-image + lf-card --> lf-badge + lf-card --> lf-button + lf-card --> lf-canvas + lf-card --> lf-card + lf-card --> lf-chart + lf-card --> lf-chat + lf-card --> lf-chip + lf-card --> lf-code + lf-card --> lf-image + lf-card --> lf-photoframe + lf-card --> lf-toggle + lf-card --> lf-typewriter + lf-card --> lf-upload + lf-chat --> lf-spinner + lf-chat --> lf-code + lf-chat --> lf-button + lf-chat --> lf-typewriter + lf-chat --> lf-progressbar + lf-chat --> lf-textfield + lf-code --> lf-button + lf-photoframe --> lf-image lf-imageviewer --> lf-masonry style lf-masonry fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index 54226d7..37c52e6 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -12,13 +12,13 @@ The image may be overlaid with text or other elements. ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | -------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | -| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| Property | Attribute | Description | Type | Default | +| --------------- | -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | +| `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events @@ -93,6 +93,15 @@ Type: `Promise` ## Dependencies +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + ### Depends on - [lf-image](../lf-image) @@ -101,6 +110,12 @@ Type: `Promise` ```mermaid graph TD; lf-photoframe --> lf-image + lf-accordion --> lf-photoframe + lf-article --> lf-photoframe + lf-card --> lf-photoframe + lf-carousel --> lf-photoframe + lf-compare --> lf-photoframe + lf-masonry --> lf-photoframe style lf-photoframe fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-progressbar/readme.md b/packages/core/src/components/lf-progressbar/readme.md index a65d8e6..b7d6c3d 100644 --- a/packages/core/src/components/lf-progressbar/readme.md +++ b/packages/core/src/components/lf-progressbar/readme.md @@ -104,24 +104,12 @@ Type: `Promise` ### Used by - - [lf-accordion](../lf-accordion) - - [lf-article](../lf-article) - - [lf-card](../lf-card) - - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) - - [lf-compare](../lf-compare) - - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; - lf-accordion --> lf-progressbar - lf-article --> lf-progressbar - lf-card --> lf-progressbar - lf-carousel --> lf-progressbar lf-chat --> lf-progressbar - lf-compare --> lf-progressbar - lf-masonry --> lf-progressbar style lf-progressbar fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-spinner/readme.md b/packages/core/src/components/lf-spinner/readme.md index 520bc1d..ae65587 100644 --- a/packages/core/src/components/lf-spinner/readme.md +++ b/packages/core/src/components/lf-spinner/readme.md @@ -93,28 +93,16 @@ Type: `Promise` ### Used by - - [lf-accordion](../lf-accordion) - - [lf-article](../lf-article) - [lf-button](../lf-button) - - [lf-card](../lf-card) - - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) - - [lf-compare](../lf-compare) - [lf-imageviewer](../lf-imageviewer) - - [lf-masonry](../lf-masonry) ### Graph ```mermaid graph TD; - lf-accordion --> lf-spinner - lf-article --> lf-spinner lf-button --> lf-spinner - lf-card --> lf-spinner - lf-carousel --> lf-spinner lf-chat --> lf-spinner - lf-compare --> lf-spinner lf-imageviewer --> lf-spinner - lf-masonry --> lf-spinner style lf-spinner fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index 8410051..aeba0cc 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -10,20 +10,20 @@ The text field may include an icon, label, helper text, and a character counter. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | -| `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | -| `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | -| `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | -| `lfStretchY` | `lf-stretch-y` | Sets the text field to fill the available height of its container. | `boolean` | `false` | -| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfStyling` | `lf-styling` | Sets the styling variant for the text field. | `"flat" \| "outlined" \| "raised" \| "textarea"` | `"raised"` | -| `lfTrailingIcon` | `lf-trailing-icon` | When enabled, the text field's icon will be displayed on the trailing side. | `boolean` | `false` | -| `lfUiSize` | `lf-ui-size` | The size of the component. | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall" \| "xxlarge" \| "xxsmall"` | `"medium"` | -| `lfUiState` | `lf-ui-state` | Reflects the specified state color defined by the theme. | `"danger" \| "disabled" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `"primary"` | -| `lfValue` | `lf-value` | Sets the initial value of the text field. | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | +| `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | +| `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | +| `lfStretchY` | `lf-stretch-y` | Sets the text field to fill the available height of its container. | `boolean` | `false` | +| `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | +| `lfStyling` | `lf-styling` | Sets the styling variant for the text field. | `"flat" \| "outlined" \| "raised" \| "textarea"` | `"raised"` | +| `lfTrailingIcon` | `lf-trailing-icon` | When enabled, the text field's icon will be displayed on the trailing side. | `boolean` | `false` | +| `lfUiSize` | `lf-ui-size` | The size of the component. | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall" \| "xxlarge" \| "xxsmall"` | `"medium"` | +| `lfUiState` | `lf-ui-state` | Reflects the specified state color defined by the theme. | `"danger" \| "disabled" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `"primary"` | +| `lfValue` | `lf-value` | Sets the initial value of the text field. | `string` | `""` | ## Events @@ -147,28 +147,16 @@ Type: `Promise` ### Used by - - [lf-accordion](../lf-accordion) - - [lf-article](../lf-article) - - [lf-card](../lf-card) - - [lf-carousel](../lf-carousel) - [lf-chat](../lf-chat) - - [lf-compare](../lf-compare) - [lf-imageviewer](../lf-imageviewer) - - [lf-masonry](../lf-masonry) - [lf-messenger](../lf-messenger) - [lf-tree](../lf-tree) ### Graph ```mermaid graph TD; - lf-accordion --> lf-textfield - lf-article --> lf-textfield - lf-card --> lf-textfield - lf-carousel --> lf-textfield lf-chat --> lf-textfield - lf-compare --> lf-textfield lf-imageviewer --> lf-textfield - lf-masonry --> lf-textfield lf-messenger --> lf-textfield lf-tree --> lf-textfield style lf-textfield fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/core/src/components/lf-toggle/readme.md b/packages/core/src/components/lf-toggle/readme.md index 54ae545..f290e8d 100644 --- a/packages/core/src/components/lf-toggle/readme.md +++ b/packages/core/src/components/lf-toggle/readme.md @@ -129,6 +129,29 @@ Type: `Promise` | `--lf-toggle-track-width` | Sets the width for the toggle component's track. Defaults to => 3em | +## Dependencies + +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + +### Graph +```mermaid +graph TD; + lf-accordion --> lf-toggle + lf-article --> lf-toggle + lf-card --> lf-toggle + lf-carousel --> lf-toggle + lf-compare --> lf-toggle + lf-masonry --> lf-toggle + style lf-toggle fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/lf-upload/readme.md b/packages/core/src/components/lf-upload/readme.md index 236b676..267b2be 100644 --- a/packages/core/src/components/lf-upload/readme.md +++ b/packages/core/src/components/lf-upload/readme.md @@ -103,6 +103,29 @@ Type: `Promise` | `--lf-upload-padding` | Sets the padding for the upload component. Defaults to => 1em | +## Dependencies + +### Used by + + - [lf-accordion](../lf-accordion) + - [lf-article](../lf-article) + - [lf-card](../lf-card) + - [lf-carousel](../lf-carousel) + - [lf-compare](../lf-compare) + - [lf-masonry](../lf-masonry) + +### Graph +```mermaid +graph TD; + lf-accordion --> lf-upload + lf-article --> lf-upload + lf-card --> lf-upload + lf-carousel --> lf-upload + lf-compare --> lf-upload + lf-masonry --> lf-upload + style lf-upload fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/utils/shapes.ts b/packages/core/src/utils/shapes.ts deleted file mode 100644 index ece9c0e..0000000 --- a/packages/core/src/utils/shapes.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { LfFrameworkInterface } from "@lf-widgets/foundations"; -import { LfBadge } from "../components/lf-badge/lf-badge"; -import { LfButton } from "../components/lf-button/lf-button"; -import { LfCanvas } from "../components/lf-canvas/lf-canvas"; -import { LfCard } from "../components/lf-card/lf-card"; -import { LfChart } from "../components/lf-chart/lf-chart"; -import { LfChat } from "../components/lf-chat/lf-chat"; -import { LfChip } from "../components/lf-chip/lf-chip"; -import { LfCode } from "../components/lf-code/lf-code"; -import { LfImage } from "../components/lf-image/lf-image"; -import { LfPhotoframe } from "../components/lf-photoframe/lf-photoframe"; -import { LfTextfield } from "../components/lf-textfield/lf-textfield"; -import { LfToggle } from "../components/lf-toggle/lf-toggle"; -import { LfTypewriter } from "../components/lf-typewriter/lf-typewriter"; -import { LfUpload } from "../components/lf-upload/lf-upload"; - -//#region defineShapes -export const defineShapes = (framework: LfFrameworkInterface) => { - if (framework.shapes.get()) { - return; - } - - framework.shapes.set({ - badge: LfBadge.name, - button: LfButton.name, - canvas: LfCanvas.name, - card: LfCard.name, - chart: LfChart.name, - chat: LfChat.name, - chip: LfChip.name, - code: LfCode.name, - image: LfImage.name, - number: LfTextfield.name, - photoframe: LfPhotoframe.name, - slot: LfTextfield.name, - text: LfTextfield.name, - toggle: LfToggle.name, - typewriter: LfTypewriter.name, - upload: LfUpload.name, - }); -}; -//#endregion diff --git a/packages/core/src/utils/shapes.tsx b/packages/core/src/utils/shapes.tsx new file mode 100644 index 0000000..8bfc253 --- /dev/null +++ b/packages/core/src/utils/shapes.tsx @@ -0,0 +1,257 @@ +import { + CY_ATTRIBUTES, + LfComponentName, + LfComponentPropsFor, + LfDataCell, + LfDataShapes, + LfEvent, + LfFrameworkAllowedKeysMap, + LfShapePropsInterface, +} from "@lf-widgets/foundations"; +import { FunctionalComponent, h } from "@stencil/core"; + +/** + * Renders a shape or a specific Lf component depending on the provided props. + * + * @param props - The properties required for rendering various shapes or components. + * @param props.framework - Contains necessary data helpers and a sanitizeProps function. + * @param props.shape - The type of shape to render (e.g., "slot", "number", "text"). + * @param props.index - The index of the current shape or component used as part of rendering. + * @param props.cell - Data related to the shape or component, including a value to display. + * @param props.eventDispatcher - Callback function that dispatches or handles component events. + * @param props.defaultCb - Optional callback invoked before event dispatching. + * @param props.refCallback - Reference callback for the rendered element. + * + * @returns A JSX element corresponding to the specified shape or Lf component. + */ +export const LfShape: FunctionalComponent = ({ + framework, + shape, + index, + cell, + eventDispatcher, + defaultCb, + refCallback, +}) => { + const { data, sanitizeProps } = framework; + const { stringify } = data.cell; + + const handler = (e: LfEvent) => { + if (defaultCb) { + defaultCb(e); + } + eventDispatcher(e); + }; + + switch (shape) { + case "badge": + return ( + + ); + case "button": + return ( + + ); + case "canvas": + return ( + + ); + case "card": + return ( + + ); + case "chart": + return ( + + ); + case "chat": + return ( + + ); + case "chip": + return ( + + ); + case "code": + return ( + + ); + case "image": + return ( + + ); + case "photoframe": + return ( + + ); + case "toggle": + return ( + + ); + case "typewriter": + return ( + + ); + case "upload": + return ( + + ); + } + + switch (shape) { + case "slot": + return ( + + ); + case "number": + case "text": + default: + return ( +
+ {cell.value} +
+ ); + } +}; + +const decorator = ( + component: C | null, + shape: S, + cell: Partial, + index: number, +): LfComponentPropsFor & Partial => { + const toSpread: Partial & + Partial & { + [key: `data-${string}`]: string; + } = {}; + + const clean = () => { + const hasValue = toSpread["value"] && !toSpread["lfValue"]; + + if (hasValue) { + toSpread["lfValue"] = toSpread["value"]; + } + + delete toSpread["htmlProps"]; + delete toSpread["shape"]; + delete toSpread["value"]; + }; + + if (cell.htmlProps) { + for (const key in cell.htmlProps) { + const k = key as keyof Partial; + const prop = cell.htmlProps[k]; + if (k === "dataset") { + for (const k in prop) { + toSpread[`data-${k}`] = prop[k]; + } + } + } + } + for (const key in cell) { + const k = key as keyof (Partial> & { + htmlProps?: Record; + }); + const prop = cell[k]; + toSpread[k] = prop; + } + + const id = toSpread?.["htmlProps"]?.["id"] || `${shape}${index}`; + clean(); + + return { + "data-component": component || shape, + "data-cy": CY_ATTRIBUTES.shape, + "data-index": index, + id, + key: `${shape}${index}`, + ...toSpread, + }; +}; diff --git a/packages/foundations/src/components/accordion.declarations.ts b/packages/foundations/src/components/accordion.declarations.ts index 67a94db..6ffc869 100644 --- a/packages/foundations/src/components/accordion.declarations.ts +++ b/packages/foundations/src/components/accordion.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfDataDataset } from "../framework/data.declarations"; @@ -13,7 +14,7 @@ export interface LfAccordionInterface LfAccordionPropsInterface {} export interface LfAccordionElement extends HTMLStencilElement, - LfAccordionInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/article.declarations.ts b/packages/foundations/src/components/article.declarations.ts index 1591b7e..e07206d 100644 --- a/packages/foundations/src/components/article.declarations.ts +++ b/packages/foundations/src/components/article.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfDataDataset, LfDataNode } from "../framework/data.declarations"; @@ -12,7 +13,7 @@ export interface LfArticleInterface LfArticlePropsInterface {} export interface LfArticleElement extends HTMLStencilElement, - LfArticleInterface {} + Omit {} //#endregion //#region Dataset diff --git a/packages/foundations/src/components/badge.declarations.ts b/packages/foundations/src/components/badge.declarations.ts index 7b109fb..9008d9a 100644 --- a/packages/foundations/src/components/badge.declarations.ts +++ b/packages/foundations/src/components/badge.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; @@ -11,7 +12,9 @@ import { LfImagePropsInterface } from "./image.declarations"; export interface LfBadgeInterface extends LfComponent<"LfBadge">, LfBadgePropsInterface {} -export interface LfBadgeElement extends HTMLStencilElement, LfBadgeInterface {} +export interface LfBadgeElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/button.declarations.ts b/packages/foundations/src/components/button.declarations.ts index 827e38a..c61ac0c 100644 --- a/packages/foundations/src/components/button.declarations.ts +++ b/packages/foundations/src/components/button.declarations.ts @@ -13,6 +13,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEvent, LfEventPayload } from "../foundations/events.declarations"; @@ -41,7 +42,7 @@ export interface LfButtonInterface } export interface LfButtonElement extends HTMLStencilElement, - LfButtonInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/canvas.declarations.ts b/packages/foundations/src/components/canvas.declarations.ts index 2c823a5..7f7add4 100644 --- a/packages/foundations/src/components/canvas.declarations.ts +++ b/packages/foundations/src/components/canvas.declarations.ts @@ -10,6 +10,7 @@ import { CY_ATTRIBUTES } from "../foundations/components.constants"; import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -37,7 +38,7 @@ export interface LfCanvasInterface } export interface LfCanvasElement extends HTMLStencilElement, - LfCanvasInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/card.declarations.ts b/packages/foundations/src/components/card.declarations.ts index 9609598..6c6de9d 100644 --- a/packages/foundations/src/components/card.declarations.ts +++ b/packages/foundations/src/components/card.declarations.ts @@ -12,6 +12,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -37,7 +38,9 @@ import { LfToggleElement, LfToggleEventPayload } from "./toggle.declarations"; export interface LfCardInterface extends LfComponent<"LfCard">, LfCardPropsInterface {} -export interface LfCardElement extends HTMLStencilElement, LfCardInterface {} +export interface LfCardElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/carousel.declarations.ts b/packages/foundations/src/components/carousel.declarations.ts index e647831..2e1f6fa 100644 --- a/packages/foundations/src/components/carousel.declarations.ts +++ b/packages/foundations/src/components/carousel.declarations.ts @@ -10,6 +10,7 @@ import { CY_ATTRIBUTES } from "../foundations/components.constants"; import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -28,7 +29,7 @@ export interface LfCarouselInterface LfCarouselPropsInterface {} export interface LfCarouselElement extends HTMLStencilElement, - LfCarouselInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/chart.declarations.ts b/packages/foundations/src/components/chart.declarations.ts index a9cfb65..0847387 100644 --- a/packages/foundations/src/components/chart.declarations.ts +++ b/packages/foundations/src/components/chart.declarations.ts @@ -17,6 +17,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfFrameworkInterface } from "../framework/framework.declarations"; @@ -36,7 +37,9 @@ import { export interface LfChartInterface extends LfComponent<"LfChart">, LfChartPropsInterface {} -export interface LfChartElement extends HTMLStencilElement, LfChartInterface {} +export interface LfChartElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/chat.declarations.ts b/packages/foundations/src/components/chat.declarations.ts index 0cca68c..997ce97 100644 --- a/packages/foundations/src/components/chat.declarations.ts +++ b/packages/foundations/src/components/chat.declarations.ts @@ -13,6 +13,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -40,7 +41,9 @@ import { LfTypewriterPropsInterface } from "./typewriter.declarations"; export interface LfChatInterface extends LfComponent<"LfChat">, LfChatPropsInterface {} -export interface LfChatElement extends HTMLStencilElement, LfChatInterface {} +export interface LfChatElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/chip.declarations.ts b/packages/foundations/src/components/chip.declarations.ts index 6bebce1..f755574 100644 --- a/packages/foundations/src/components/chip.declarations.ts +++ b/packages/foundations/src/components/chip.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfDataDataset, LfDataNode } from "../framework/data.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; @@ -13,7 +17,9 @@ export interface LfChipInterface nodes: (LfDataNode[] | string[]) & Array, ) => Promise; } -export interface LfChipElement extends HTMLStencilElement, LfChipInterface {} +export interface LfChipElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/code.declarations.ts b/packages/foundations/src/components/code.declarations.ts index dbeb7f9..d03ca51 100644 --- a/packages/foundations/src/components/code.declarations.ts +++ b/packages/foundations/src/components/code.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; @@ -10,7 +11,9 @@ import { LF_CODE_EVENTS } from "./code.constants"; export interface LfCodeInterface extends LfComponent<"LfCode">, LfCodePropsInterface {} -export interface LfCodeElement extends HTMLStencilElement, LfCodeInterface {} +export interface LfCodeElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/compare.declarations.ts b/packages/foundations/src/components/compare.declarations.ts index 712f208..fa2a5aa 100644 --- a/packages/foundations/src/components/compare.declarations.ts +++ b/packages/foundations/src/components/compare.declarations.ts @@ -13,6 +13,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -39,7 +40,7 @@ export interface LfCompareInterface LfComparePropsInterface {} export interface LfCompareElement extends HTMLStencilElement, - LfCompareInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/drawer.declarations.ts b/packages/foundations/src/components/drawer.declarations.ts index 4c3049c..fd223a6 100644 --- a/packages/foundations/src/components/drawer.declarations.ts +++ b/packages/foundations/src/components/drawer.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { @@ -20,7 +21,7 @@ export interface LfDrawerInterface } export interface LfDrawerElement extends HTMLStencilElement, - LfDrawerInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/header.declarations.ts b/packages/foundations/src/components/header.declarations.ts index a68adf1..db5229b 100644 --- a/packages/foundations/src/components/header.declarations.ts +++ b/packages/foundations/src/components/header.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LF_HEADER_EVENTS } from "./header.constants"; @@ -8,7 +12,7 @@ export interface LfHeaderInterface LfHeaderPropsInterface {} export interface LfHeaderElement extends HTMLStencilElement, - LfHeaderInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/image.declarations.ts b/packages/foundations/src/components/image.declarations.ts index f098aa8..ba01812 100644 --- a/packages/foundations/src/components/image.declarations.ts +++ b/packages/foundations/src/components/image.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfFrameworkAllowedKeysMap } from "../framework/framework.declarations"; @@ -10,7 +11,9 @@ import { LF_IMAGE_EVENTS } from "./image.constants"; export interface LfImageInterface extends LfComponent<"LfImage">, LfImagePropsInterface {} -export interface LfImageElement extends HTMLStencilElement, LfImageInterface {} +export interface LfImageElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/imageviewer.declarations.ts b/packages/foundations/src/components/imageviewer.declarations.ts index a7744d9..733312b 100644 --- a/packages/foundations/src/components/imageviewer.declarations.ts +++ b/packages/foundations/src/components/imageviewer.declarations.ts @@ -13,6 +13,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -54,7 +55,7 @@ export interface LfImageviewerInterface } export interface LfImageviewerElement extends HTMLStencilElement, - LfImageviewerInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/list.declarations.ts b/packages/foundations/src/components/list.declarations.ts index 423050e..5bd5f82 100644 --- a/packages/foundations/src/components/list.declarations.ts +++ b/packages/foundations/src/components/list.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfDataDataset, LfDataNode } from "../framework/data.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; @@ -8,7 +12,9 @@ import { LF_LIST_EVENTS } from "./list.constants"; export interface LfListInterface extends LfComponent<"LfList">, LfListPropsInterface {} -export interface LfListElement extends HTMLStencilElement, LfListInterface {} +export interface LfListElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/masonry.declarations.ts b/packages/foundations/src/components/masonry.declarations.ts index 8da034e..324e280 100644 --- a/packages/foundations/src/components/masonry.declarations.ts +++ b/packages/foundations/src/components/masonry.declarations.ts @@ -12,6 +12,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -38,7 +39,7 @@ export interface LfMasonryInterface } export interface LfMasonryElement extends HTMLStencilElement, - LfMasonryInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/messenger.declarations.ts b/packages/foundations/src/components/messenger.declarations.ts index c4d1ebd..e21f4df 100644 --- a/packages/foundations/src/components/messenger.declarations.ts +++ b/packages/foundations/src/components/messenger.declarations.ts @@ -13,6 +13,7 @@ import { import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -39,7 +40,7 @@ export interface LfMessengerInterface LfMessengerPropsInterface {} export interface LfMessengerElement extends HTMLStencilElement, - LfMessengerInterface {} + Omit {} //#endregion //#region Adapter diff --git a/packages/foundations/src/components/photoframe.declarations.ts b/packages/foundations/src/components/photoframe.declarations.ts index f54df79..cd2e785 100644 --- a/packages/foundations/src/components/photoframe.declarations.ts +++ b/packages/foundations/src/components/photoframe.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfFrameworkAllowedKeysMap } from "../framework/framework.declarations"; @@ -15,7 +16,7 @@ export interface LfPhotoframeInterface LfPhotoframePropsInterface {} export interface LfPhotoframeElement extends HTMLStencilElement, - LfPhotoframeInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/placeholder.declarations.ts b/packages/foundations/src/components/placeholder.declarations.ts index ceda7bf..c797287 100644 --- a/packages/foundations/src/components/placeholder.declarations.ts +++ b/packages/foundations/src/components/placeholder.declarations.ts @@ -1,7 +1,9 @@ import { - HTMLStencilElement, LfComponent, + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, LfComponentName, - LfComponentProps + LfComponentProps, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeIcon } from "../framework/theme.declarations"; @@ -16,7 +18,7 @@ export interface LfPlaceholderInterface LfPlaceholderPropsInterface {} export interface LfPlaceholderElement extends HTMLStencilElement, - LfPlaceholderInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/progressbar.declarations.ts b/packages/foundations/src/components/progressbar.declarations.ts index f0f7508..d1844dc 100644 --- a/packages/foundations/src/components/progressbar.declarations.ts +++ b/packages/foundations/src/components/progressbar.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; import { LF_PROGRESSBAR_EVENTS } from "./progressbar.constants"; @@ -9,7 +13,7 @@ export interface LfProgressbarInterface LfProgressbarPropsInterface {} export interface LfProgressbarElement extends HTMLStencilElement, - LfProgressbarInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/slider.declarations.ts b/packages/foundations/src/components/slider.declarations.ts index 3e48faf..eda8049 100644 --- a/packages/foundations/src/components/slider.declarations.ts +++ b/packages/foundations/src/components/slider.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; import { LF_SLIDER_EVENTS } from "./slider.constants"; @@ -9,7 +13,7 @@ export interface LfSliderInterface LfSliderPropsInterface {} export interface LfSliderElement extends HTMLStencilElement, - LfSliderInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/spinner.declarations.ts b/packages/foundations/src/components/spinner.declarations.ts index 19a4dec..126eeda 100644 --- a/packages/foundations/src/components/spinner.declarations.ts +++ b/packages/foundations/src/components/spinner.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LF_SPINNER_EVENTS } from "./spinner.constants"; @@ -8,7 +12,7 @@ export interface LfSpinnerInterface LfSpinnerPropsInterface {} export interface LfSpinnerElement extends HTMLStencilElement, - LfSpinnerInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/splash.declarations.ts b/packages/foundations/src/components/splash.declarations.ts index 8091d0d..c17e429 100644 --- a/packages/foundations/src/components/splash.declarations.ts +++ b/packages/foundations/src/components/splash.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LF_SPLASH_EVENTS, LF_SPLASH_STATES } from "./splash.constants"; @@ -8,7 +12,7 @@ export interface LfSplashInterface LfSplashPropsInterface {} export interface LfSplashElement extends HTMLStencilElement, - LfSplashInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/tabbar.declarations.ts b/packages/foundations/src/components/tabbar.declarations.ts index 1e415e9..d980b43 100644 --- a/packages/foundations/src/components/tabbar.declarations.ts +++ b/packages/foundations/src/components/tabbar.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfDataDataset, LfDataNode } from "../framework/data.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; @@ -10,7 +14,7 @@ export interface LfTabbarInterface LfTabbarPropsInterface {} export interface LfTabbarElement extends HTMLStencilElement, - LfTabbarInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/textfield.declarations.ts b/packages/foundations/src/components/textfield.declarations.ts index d893d69..c1b1e61 100644 --- a/packages/foundations/src/components/textfield.declarations.ts +++ b/packages/foundations/src/components/textfield.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfFrameworkAllowedKeysMap } from "../framework/framework.declarations"; @@ -22,7 +23,7 @@ export interface LfTextfieldInterface } export interface LfTextfieldElement extends HTMLStencilElement, - LfTextfieldInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/toast.declarations.ts b/packages/foundations/src/components/toast.declarations.ts index fecf53d..88f4076 100644 --- a/packages/foundations/src/components/toast.declarations.ts +++ b/packages/foundations/src/components/toast.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeIcon, @@ -11,7 +15,9 @@ import { LF_TOAST_EVENTS } from "./toast.constants"; export interface LfToastInterface extends LfComponent<"LfToast">, LfToastPropsInterface {} -export interface LfToastElement extends HTMLStencilElement, LfToastInterface {} +export interface LfToastElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/toggle.declarations.ts b/packages/foundations/src/components/toggle.declarations.ts index 757bff3..9df1792 100644 --- a/packages/foundations/src/components/toggle.declarations.ts +++ b/packages/foundations/src/components/toggle.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize, LfThemeUIState } from "../framework/theme.declarations"; import { LF_TOGGLE_EVENTS, LF_TOGGLE_STATES } from "./toggle.constants"; @@ -11,7 +15,7 @@ export interface LfToggleInterface } export interface LfToggleElement extends HTMLStencilElement, - LfToggleInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/tree.declarations.ts b/packages/foundations/src/components/tree.declarations.ts index 5c89c27..d632567 100644 --- a/packages/foundations/src/components/tree.declarations.ts +++ b/packages/foundations/src/components/tree.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, VNode, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; @@ -13,7 +14,9 @@ import { LF_TREE_EVENTS } from "./tree.constants"; export interface LfTreeInterface extends LfComponent<"LfTree">, LfTreePropsInterface {} -export interface LfTreeElement extends HTMLStencilElement, LfTreeInterface {} +export interface LfTreeElement + extends HTMLStencilElement, + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/typewriter.declarations.ts b/packages/foundations/src/components/typewriter.declarations.ts index 0664b58..2c9035f 100644 --- a/packages/foundations/src/components/typewriter.declarations.ts +++ b/packages/foundations/src/components/typewriter.declarations.ts @@ -1,4 +1,8 @@ -import { HTMLStencilElement, LfComponent } from "../foundations/components.declarations"; +import { + HTMLStencilElement, + LfComponent, + LfComponentClassProperties, +} from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LfThemeUISize } from "../framework/theme.declarations"; import { @@ -13,7 +17,7 @@ export interface LfTypewriterInterface LfTypewriterPropsInterface {} export interface LfTypewriterElement extends HTMLStencilElement, - LfTypewriterInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/components/upload.declarations.ts b/packages/foundations/src/components/upload.declarations.ts index 98f6c08..7c95b5b 100644 --- a/packages/foundations/src/components/upload.declarations.ts +++ b/packages/foundations/src/components/upload.declarations.ts @@ -1,6 +1,7 @@ import { HTMLStencilElement, LfComponent, + LfComponentClassProperties, } from "../foundations/components.declarations"; import { LfEventPayload } from "../foundations/events.declarations"; import { LF_UPLOAD_EVENTS } from "./upload.constants"; @@ -11,7 +12,7 @@ export interface LfUploadInterface LfUploadPropsInterface {} export interface LfUploadElement extends HTMLStencilElement, - LfUploadInterface {} + Omit {} //#endregion //#region Events diff --git a/packages/foundations/src/foundations/components.declarations.ts b/packages/foundations/src/foundations/components.declarations.ts index f0b6fce..be3b29a 100644 --- a/packages/foundations/src/foundations/components.declarations.ts +++ b/packages/foundations/src/foundations/components.declarations.ts @@ -158,12 +158,21 @@ import { LfUploadInterface, LfUploadPropsInterface, } from "../components/upload.declarations"; +import { + LfDataCell, + LfDataShapeCallback, + LfDataShapeEventDispatcher, + LfDataShapeRefCallback, + LfDataShapes, + LfFrameworkInterface, +} from "../framework"; import { LfDebugLifecycleInfo } from "../framework/debug.declarations"; export interface LfComponent extends LfComponentCommon { rootElement: LfComponentElementMap[T]; } +export type LfComponentClassProperties = "rootElement" | "debugInfo"; export type LfComponentType = T extends keyof LfComponentClassMap ? LfComponentClassMap[T] @@ -256,6 +265,17 @@ export type LfComponentTag = export interface LfComponentBaseProps { lfStyle?: string; } +export interface LfShapePropsInterface { + framework: LfFrameworkInterface; + shape: S; + index: number; + cell: Partial>; + eventDispatcher: LfDataShapeEventDispatcher; + defaultCb?: S extends "text" + ? never + : LfDataShapeCallback; + refCallback?: LfDataShapeRefCallback; +} export type LfDynamicComponentProps = { [K in `lf${Capitalize}`]?: any; }; diff --git a/packages/foundations/src/framework/data.declarations.ts b/packages/foundations/src/framework/data.declarations.ts index 9f86f54..332a7df 100644 --- a/packages/foundations/src/framework/data.declarations.ts +++ b/packages/foundations/src/framework/data.declarations.ts @@ -1,81 +1,36 @@ +import { LfBadgePropsInterface } from "../components/badge.declarations"; +import { LfButtonPropsInterface } from "../components/button.declarations"; +import { LfCanvasPropsInterface } from "../components/canvas.declarations"; +import { LfCardPropsInterface } from "../components/card.declarations"; +import { LfChartPropsInterface } from "../components/chart.declarations"; import { - LfBadgeElement, - LfBadgePropsInterface, -} from "../components/badge.declarations"; -import { - LfButtonElement, - LfButtonPropsInterface, -} from "../components/button.declarations"; -import { - LfCanvasElement, - LfCanvasPropsInterface, -} from "../components/canvas.declarations"; -import { - LfCardElement, - LfCardPropsInterface, -} from "../components/card.declarations"; -import { - LfChartElement, - LfChartPropsInterface, -} from "../components/chart.declarations"; -import { - LfChatElement, LfChatHistory, LfChatPropsInterface, } from "../components/chat.declarations"; -import { - LfChipElement, - LfChipPropsInterface, -} from "../components/chip.declarations"; -import { - LfCodeElement, - LfCodePropsInterface, -} from "../components/code.declarations"; -import { - LfImageElement, - LfImagePropsInterface, -} from "../components/image.declarations"; -import { - LfPhotoframeElement, - LfPhotoframePropsInterface, -} from "../components/photoframe.declarations"; -import { - LfToggleElement, - LfTogglePropsInterface, -} from "../components/toggle.declarations"; -import { - LfTypewriterElement, - LfTypewriterPropsInterface, -} from "../components/typewriter.declarations"; -import { - LfUploadElement, - LfUploadPropsInterface, -} from "../components/upload.declarations"; +import { LfChipPropsInterface } from "../components/chip.declarations"; +import { LfCodePropsInterface } from "../components/code.declarations"; +import { LfImagePropsInterface } from "../components/image.declarations"; +import { LfPhotoframePropsInterface } from "../components/photoframe.declarations"; +import { LfTogglePropsInterface } from "../components/toggle.declarations"; +import { LfTypewriterPropsInterface } from "../components/typewriter.declarations"; +import { LfUploadPropsInterface } from "../components/upload.declarations"; import { LfComponent, LfComponentName, LfComponentRootElement, - VNode, } from "../foundations/components.declarations"; import { LfEventPayload, LfEventType, } from "../foundations/events.declarations"; import { LF_DATA_SHAPE_MAP, LF_DATA_SHAPES } from "./data.constants"; +import { LfFrameworkAllowedKeysMap } from "./framework.declarations"; //#region Class export interface LfDataInterface { cell: { exists: (node: LfDataNode) => boolean; shapes: { - decorate: ( - shape: S, - items: Partial>[], - eventDispatcher: LfDataShapeEventDispatcher, - defaultProps?: Partial>[], - defaultCb?: S extends "text" ? never : LfDataShapeCallback, - refsCb?: Array>, - ) => VNode[]; get: ( cell: LfDataCell, deepCopy?: boolean, @@ -116,101 +71,104 @@ export interface LfDataNode { export interface LfDataBaseCell { value: string; shape?: LfDataShapes; - htmlProps?: Partial; + htmlProps?: Partial; } export type LfDataCell = T extends "badge" ? Partial & { shape: "badge"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "button" ? Partial & { shape: "button"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "canvas" ? Partial & { shape: "canvas"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "card" ? Partial & { shape: "card"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "chart" ? Partial & { shape: "chart"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "chat" ? Partial & { shape: "chat"; value: LfChatHistory; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "chip" ? Partial & { shape: "chip"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "code" ? Partial & { shape: "code"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "image" ? Partial & { shape: "image"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "number" ? { shape: "number"; value: number; + htmlProps?: Partial; } : T extends "photoframe" ? Partial & { shape: "photoframe"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "slot" ? { shape: "slot"; value: string; + htmlProps?: Partial; } : T extends "toggle" ? Partial & { shape: "toggle"; value: boolean; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "upload" ? Partial & { shape: "upload"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "typewriter" ? Partial & { shape: "typewriter"; value: string; - htmlProps?: Partial; + htmlProps?: Partial; } : T extends "text" ? { shape?: "text"; value: string; + htmlProps?: Partial; } : LfDataBaseCell; export type LfDataCellNameToShape = typeof LF_DATA_SHAPE_MAP; diff --git a/packages/foundations/src/framework/framework.constants.ts b/packages/foundations/src/framework/framework.constants.ts index c1e2ca2..5049d7a 100644 --- a/packages/foundations/src/framework/framework.constants.ts +++ b/packages/foundations/src/framework/framework.constants.ts @@ -7,6 +7,7 @@ export const LF_FRAMEWORK_ALLOWED_ATTRS = [ "autofocus", "checked", "class", + "dataset", "disabled", "href", "htmlProps", diff --git a/packages/framework/src/lf-data/helpers.cell.tsx b/packages/framework/src/lf-data/helpers.cell.tsx index 0040b33..c602b2b 100644 --- a/packages/framework/src/lf-data/helpers.cell.tsx +++ b/packages/framework/src/lf-data/helpers.cell.tsx @@ -1,128 +1,12 @@ import { - CY_ATTRIBUTES, - LfComponentName, - LfComponentRootElement, - LfFrameworkInterface, LfDataCell, LfDataDataset, LfDataNode, - LfDataShapeCallback, - LfDataShapeEventDispatcher, - LfDataShapeRefCallback, LfDataShapes, LfDataShapesMap, - LfEvent, - LfEventPayload, } from "@lf-widgets/foundations"; -import { h, VNode } from "@stencil/core"; import { nodeExists } from "./helpers.node"; -//#region cellDecorateShapes -/** - * Creates an array of virtual nodes based on the provided shape and items configuration. - * - * @template C - Type extending LfComponentName - * @template S - Type extending LfDataShapes or "text" - * - * @param {LfFramework} lfFramework - Manager instance containing data and sanitization utilities - * @param {C} component - The component name - * @param {S} shape - The shape type to render ("slot", "number", "text" or other LfDataShapes) - * @param {Partial>[]} items - Array of cell data items to render - * @param {LfDataShapeEventDispatcher} eventDispatcher - Function to dispatch shape events - * @param {Partial>[]} [defaultProps] - Optional array of default properties for each item - * @param {LfDataShapeCallback} [defaultCb] - Optional default callback for shape events (not applicable for "text" shape) - * @param {Array>} [refsCb] - Optional array of ref callbacks for each item - * - * @returns {VNode[]} Array of virtual nodes representing the rendered shapes - * - * @description - * This function handles the creation of different types of elements based on the shape parameter: - * - For "slot" shape: Creates slot elements with name attribute - * - For "number" or "text" shapes: Creates div elements with the value - * - For other shapes: Creates custom elements with event handling and ref binding - */ -export const cellDecorateShapes = < - C extends LfComponentName, - S extends LfDataShapes | "text", ->( - lfFramework: LfFrameworkInterface, - component: C, - shape: S, - items: Partial>[], - eventDispatcher: LfDataShapeEventDispatcher, - defaultProps?: Partial>[], - defaultCb?: S extends "text" ? never : LfDataShapeCallback, - refsCb?: Array>, -) => { - const { data, sanitizeProps } = lfFramework; - const { stringify } = data.cell; - - const elements: VNode[] = []; - - switch (shape) { - case "slot": - for (let index = 0; items && index < items.length; index++) { - elements.push( - , - ); - } - break; - case "number": - case "text": - for (let index = 0; items && index < items.length; index++) { - elements.push( -
- {items[index].value} -
, - ); - } - break; - default: - for (let index = 0; items && index < items.length; index++) { - const props = items[index]; - const toSpread = {}; - if (defaultProps?.[index]) { - decorateSpreader(toSpread, defaultProps[index] as LfDataCell); - } - decorateSpreader(toSpread, props as LfDataCell); - - const TagName = "lf-" + shape; - const eventHandler = { - ["onLf-" + shape + "-event"]: (e: LfEvent>) => { - if (defaultCb) { - defaultCb(e); - } - eventDispatcher(e); - }, - }; - - elements.push( - ) => { - if (el && Array.isArray(refsCb) && refsCb[index]) { - const cb = refsCb[index]; - cb(el); - } - }} - {...eventHandler} - {...sanitizeProps(toSpread, component)} - >, - ); - } - break; - } - - return elements; -}; -//#endregion - //#region cellExists /** * Checks if a data node has any cells defined. @@ -352,45 +236,3 @@ export const cellStringify = (value: unknown) => { } }; //#endregion - -const decorateSpreader = ( - toSpread: Record, - props: Partial> & { - htmlProps?: Record; - }, -) => { - const clean = () => { - if (toSpread["value"] && !toSpread["lfValue"]) { - toSpread["lfValue"] = toSpread["value"]; - } else if (toSpread["lfValue"] && !toSpread["value"]) { - toSpread["value"] = toSpread["lfValue"]; - } - delete toSpread["htmlProps"]; - delete toSpread["shape"]; - delete toSpread["value"]; - }; - if (props.htmlProps) { - for (const key in props.htmlProps) { - const prop = props.htmlProps[key]; - if (key === "className") { - toSpread["class"] = prop; - } else { - toSpread[key] = prop; - } - if (key === "dataset") { - for (const k in prop) { - toSpread[`data-${k}`] = prop[k]; - } - } - } - } - for (const key in props) { - const k = key as keyof (Partial> & { - htmlProps?: Record; - }); - const prop = props[k]; - toSpread[key] = prop; - } - - clean(); -}; diff --git a/packages/framework/src/lf-data/lf-data.ts b/packages/framework/src/lf-data/lf-data.ts index 02473b2..fc18027 100644 --- a/packages/framework/src/lf-data/lf-data.ts +++ b/packages/framework/src/lf-data/lf-data.ts @@ -1,21 +1,15 @@ import { - LfComponentName, - LfFrameworkInterface, LfDataCell, LfDataColumn, LfDataDataset, LfDataInterface, LfDataNode, LfDataNodeOperations, - LfDataShapeCallback, - LfDataShapeComponentMap, - LfDataShapeEventDispatcher, - LfDataShapeRefCallback, LfDataShapes, LfDataShapesMap, + LfFrameworkInterface, } from "@lf-widgets/foundations"; import { - cellDecorateShapes, cellExists, cellGetAllShapes, cellGetShape, @@ -35,29 +29,7 @@ import { } from "./helpers.node"; export class LfData implements LfDataInterface { - #MANAGER: LfFrameworkInterface; - #SHAPES_MAP: LfDataShapeComponentMap = { - badge: "LfBadge", - button: "LfButton", - canvas: "LfCanvas", - card: "LfCard", - chart: "LfChart", - chat: "LfChat", - chip: "LfChip", - code: "LfCode", - image: "LfImage", - number: "LfTextfield", - photoframe: "LfPhotoframe", - slot: "LfTextfield", - text: "LfTextfield", - toggle: "LfToggle", - typewriter: "LfTypewriter", - upload: "LfUpload", - }; - - constructor(lfFramework: LfFrameworkInterface) { - this.#MANAGER = lfFramework; - } + constructor(_lfFramework: LfFrameworkInterface) {} //#region Cell /** @@ -65,7 +37,6 @@ export class LfData implements LfDataInterface { * @property {Object} cell - The cell management object * @property {(node: LfDataNode) => boolean} cell.exists - Checks if a cell exists in the given node * @property {Object} cell.shapes - Contains methods for managing cell shapes - * @property {(shape: S, items: Partial>[], eventDispatcher: LfDataShapeEventDispatcher, defaultProps?: Partial>[], defaultCb?: S extends "text" ? never : LfDataShapeCallback) => void} cell.shapes.decorate - Decorates cells with shapes * @property {(cell: LfDataCell, deepCopy?: boolean) => LfDataCell} cell.shapes.get - Retrieves a shape from a cell * @property {(dataset: LfDataDataset, deepCopy?: boolean) => LfDataCell[]} cell.shapes.getAll - Retrieves all shapes from a dataset * @property {(value: LfDataCell["value"]) => string} cell.stringify - Converts a cell value to string @@ -73,24 +44,6 @@ export class LfData implements LfDataInterface { cell: LfDataInterface["cell"] = { exists: (node: LfDataNode) => cellExists(node), shapes: { - decorate: ( - shape: S, - items: Partial>[], - eventDispatcher: LfDataShapeEventDispatcher, - defaultProps?: Partial>[], - defaultCb?: S extends "text" ? never : LfDataShapeCallback, - refsCb?: Array>, - ) => - cellDecorateShapes( - this.#MANAGER, - this.#SHAPES_MAP[shape], - shape, - items, - eventDispatcher, - defaultProps, - defaultCb, - refsCb, - ), get: ( cell: LfDataCell, deepCopy = true, From 494c9b6bc86f9ce0eb4bc2096af65c9b0d52d774 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 20:11:36 +0100 Subject: [PATCH 23/27] docs: readme --- .../showcase/src/components/lf-showcase/assets/doc.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 2ced33b..9d74ad4 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -2079,7 +2079,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfHtmlAttributes", docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -3728,7 +3728,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfHtmlAttributes", docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", From 298009dbd465b19bdda05bf59562bf2738d3ac07 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 20:13:02 +0100 Subject: [PATCH 24/27] docs: readme --- packages/core/src/components/lf-chart/readme.md | 2 +- packages/core/src/components/lf-placeholder/readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index 94b3db3..517d370 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index cea3fa3..c321c99 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | From 023478f9df3a718ea851a4afb74cfadef1a431cb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 14 Feb 2025 19:13:44 +0000 Subject: [PATCH 25/27] chore(release): publish --- CHANGELOG.md | 9 +++++++++ lerna.json | 2 +- packages/assets/CHANGELOG.md | 4 ++++ packages/assets/package.json | 2 +- packages/core/CHANGELOG.md | 9 +++++++++ packages/core/package.json | 2 +- packages/foundations/CHANGELOG.md | 6 ++++++ packages/foundations/package.json | 2 +- packages/framework/CHANGELOG.md | 6 ++++++ packages/framework/package.json | 2 +- packages/react-core/CHANGELOG.md | 4 ++++ packages/react-core/package.json | 2 +- packages/react-showcase/CHANGELOG.md | 4 ++++ packages/react-showcase/package.json | 2 +- packages/showcase/CHANGELOG.md | 4 ++++ packages/showcase/package.json | 2 +- 16 files changed, 54 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ccc2321..7342740 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +### Bug Fixes + +- **card:** fixed unscrollable description ([3e53ed7](https://github.com/lucafoscili/lf-widgets/commit/3e53ed71da916d3b829f20c5ba34fd5a28aa7ff2)) +- **chart:** increased tooltip's background alpha ([8d8a2b7](https://github.com/lucafoscili/lf-widgets/commit/8d8a2b71a7b14f739f3c1fa8207fbd78dfcb065e)) +- **code:** adjusted style ([e0735ee](https://github.com/lucafoscili/lf-widgets/commit/e0735eeba9c9df65b601f565b8955de076f7fdb1)) +- **shapes:** extracted from framework, moved to core ([dcb112a](https://github.com/lucafoscili/lf-widgets/commit/dcb112a9858bfe2bf17bf6b5aa4dc75a850eed3e)) + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) ### Bug Fixes diff --git a/lerna.json b/lerna.json index 67d3853..2bc6c8d 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "command": { "publish": { "conventionalCommits": true, diff --git a/packages/assets/CHANGELOG.md b/packages/assets/CHANGELOG.md index 27ae74f..7b81451 100644 --- a/packages/assets/CHANGELOG.md +++ b/packages/assets/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +**Note:** Version bump only for package @lf-widgets/assets + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-assets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) **Note:** Version bump only for package @lf-widgets/assets diff --git a/packages/assets/package.json b/packages/assets/package.json index 887d983..ae90bb2 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 9522b64..c1159e3 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +### Bug Fixes + +- **card:** fixed unscrollable description ([3e53ed7](https://github.com/lucafoscili/lf-widgets/commit/3e53ed71da916d3b829f20c5ba34fd5a28aa7ff2)) +- **chart:** increased tooltip's background alpha ([8d8a2b7](https://github.com/lucafoscili/lf-widgets/commit/8d8a2b71a7b14f739f3c1fa8207fbd78dfcb065e)) +- **code:** adjusted style ([e0735ee](https://github.com/lucafoscili/lf-widgets/commit/e0735eeba9c9df65b601f565b8955de076f7fdb1)) +- **shapes:** extracted from framework, moved to core ([dcb112a](https://github.com/lucafoscili/lf-widgets/commit/dcb112a9858bfe2bf17bf6b5aa4dc75a850eed3e)) + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) ### Bug Fixes diff --git a/packages/core/package.json b/packages/core/package.json index 421b2ef..8a5445d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/foundations/CHANGELOG.md b/packages/foundations/CHANGELOG.md index 4814cae..6930da8 100644 --- a/packages/foundations/CHANGELOG.md +++ b/packages/foundations/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +### Bug Fixes + +- **shapes:** extracted from framework, moved to core ([dcb112a](https://github.com/lucafoscili/lf-widgets/commit/dcb112a9858bfe2bf17bf6b5aa4dc75a850eed3e)) + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) ### Bug Fixes diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 0efe7e4..dc41557 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/framework/CHANGELOG.md b/packages/framework/CHANGELOG.md index d3808aa..7303909 100644 --- a/packages/framework/CHANGELOG.md +++ b/packages/framework/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +### Bug Fixes + +- **shapes:** extracted from framework, moved to core ([dcb112a](https://github.com/lucafoscili/lf-widgets/commit/dcb112a9858bfe2bf17bf6b5aa4dc75a850eed3e)) + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) ### Bug Fixes diff --git a/packages/framework/package.json b/packages/framework/package.json index cec3afe..fcc230a 100644 --- a/packages/framework/package.json +++ b/packages/framework/package.json @@ -4,7 +4,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index d2aec87..6f6aab9 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +**Note:** Version bump only for package @lf-widgets/react-core + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index b14ba34..1e27b40 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/react-showcase/CHANGELOG.md b/packages/react-showcase/CHANGELOG.md index 6a8fa88..00f9e94 100644 --- a/packages/react-showcase/CHANGELOG.md +++ b/packages/react-showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +**Note:** Version bump only for package @lf-widgets/react-showcase + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) **Note:** Version bump only for package @lf-widgets/react-showcase diff --git a/packages/react-showcase/package.json b/packages/react-showcase/package.json index ea743bb..0097edb 100644 --- a/packages/react-showcase/package.json +++ b/packages/react-showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, diff --git a/packages/showcase/CHANGELOG.md b/packages/showcase/CHANGELOG.md index 720998b..420fa14 100644 --- a/packages/showcase/CHANGELOG.md +++ b/packages/showcase/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.3.2-rc.5](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.4...0.3.2-rc.5) (2025-02-14) + +**Note:** Version bump only for package @lf-widgets/showcase + ## [0.3.2-rc.4](https://github.com/lucafoscili/lf-widgets/compare/0.3.2-rc.3...0.3.2-rc.4) (2025-02-13) ### Bug Fixes diff --git a/packages/showcase/package.json b/packages/showcase/package.json index cb92eac..865a6f5 100644 --- a/packages/showcase/package.json +++ b/packages/showcase/package.json @@ -5,7 +5,7 @@ "name": "Luca Foscili", "url": "https://www.lucafoscili.com" }, - "version": "0.3.2-rc.4", + "version": "0.3.2-rc.5", "publishConfig": { "access": "public" }, From d777f91aae5779b625a1570f108c7a9530e7f4b5 Mon Sep 17 00:00:00 2001 From: lucafoscili Date: Fri, 14 Feb 2025 19:15:18 +0000 Subject: [PATCH 26/27] chore: bump versions for release candidate --- .../core/src/components/lf-chart/readme.md | 2 +- .../core/src/components/lf-image/readme.md | 2 +- .../src/components/lf-photoframe/readme.md | 4 +- .../src/components/lf-placeholder/readme.md | 2 +- .../src/components/lf-textfield/readme.md | 2 +- .../src/components/lf-showcase/assets/doc.ts | 108 +++++++++--------- 6 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/core/src/components/lf-chart/readme.md b/packages/core/src/components/lf-chart/readme.md index 517d370..94b3db3 100644 --- a/packages/core/src/components/lf-chart/readme.md +++ b/packages/core/src/components/lf-chart/readme.md @@ -25,7 +25,7 @@ component, and resizing the chart. | `lfSizeX` | `lf-size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `"100%"` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | -| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("area" \| "line" \| "bar" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | +| `lfTypes` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `("bar" \| "line" \| "radar" \| "calendar" \| "scatter" \| "pie" \| "area" \| "funnel" \| "sankey" \| "candlestick" \| "heatmap" \| "bubble" \| "gaussian" \| "hbar" \| "sbar")[]` | `["line"]` | | `lfXAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | | `lfYAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | diff --git a/packages/core/src/components/lf-image/readme.md b/packages/core/src/components/lf-image/readme.md index ddcba24..9b66f91 100644 --- a/packages/core/src/components/lf-image/readme.md +++ b/packages/core/src/components/lf-image/readme.md @@ -15,7 +15,7 @@ The component supports various customization options, including size, styling, a | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | +| `lfHtmlAttributes` | -- | Allows customization of the image element. This can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `{}` | | `lfShowSpinner` | `lf-show-spinner` | Controls the display of a loading indicator. When enabled, a spinner is shown until the image finishes loading. This property is not compatible with SVG images. | `boolean` | `false` | | `lfSizeX` | `lf-size-x` | Sets the width of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | | `lfSizeY` | `lf-size-y` | Sets the height of the icon. This property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%. | `string` | `"100%"` | diff --git a/packages/core/src/components/lf-photoframe/readme.md b/packages/core/src/components/lf-photoframe/readme.md index 37c52e6..5090fdd 100644 --- a/packages/core/src/components/lf-photoframe/readme.md +++ b/packages/core/src/components/lf-photoframe/readme.md @@ -15,10 +15,10 @@ The image may be overlaid with text or other elements. | Property | Attribute | Description | Type | Default | | --------------- | -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `lfOverlay` | -- | When not empty, this text will be overlayed on the photo - blocking the view. | `LfPhotoframeOverlay` | `null` | -| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfPlaceholder` | -- | Html attributes of the picture before the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Percentage of the component dimensions entering the viewport (0.1 => 1). | `number` | `0.25` | -| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | +| `lfValue` | -- | Html attributes of the picture after the component enters the viewport. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `null` | ## Events diff --git a/packages/core/src/components/lf-placeholder/readme.md b/packages/core/src/components/lf-placeholder/readme.md index c321c99..cea3fa3 100644 --- a/packages/core/src/components/lf-placeholder/readme.md +++ b/packages/core/src/components/lf-placeholder/readme.md @@ -13,7 +13,7 @@ Represents a placeholder loading component that renders a placeholder until the | Property | Attribute | Description | Type | Default | | ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"article" \| "code" \| "progress" \| "download" \| "id" \| "x" \| "replace" \| "copy" \| "key" \| "search" \| "brush" \| "list" \| "upload" \| "check" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | +| `lfIcon` | `lf-icon` | Displays an animated SVG placeholder until the component is loaded. | `"x" \| "id" \| "replace" \| "search" \| "brush" \| "list" \| "progress" \| "upload" \| "check" \| "code" \| "copy" \| "refresh" \| "settings" \| "messages" \| "temperature" \| "hexagon-plus" \| "photo-x" \| "chevron-right" \| "copy-check" \| "square-x" \| "lock" \| "download" \| "chevron-down" \| "edit" \| "info-hexagon" \| "hexagon-minus" \| "chevron-left" \| "lf-website" \| "lf-signature" \| "alert-triangle" \| "adjustments-horizontal" \| "arrow-autofit-content" \| "arrow-back" \| "article" \| "bell-ringing" \| "brand-facebook" \| "brand-github" \| "brand-instagram" \| "brand-linkedin" \| "brand-npm" \| "brand-reddit" \| "brand-x" \| "bug" \| "calendar-clock" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-up" \| "chart-column" \| "chart-histogram" \| "chevron-compact-down" \| "chevron-compact-left" \| "chevron-compact-right" \| "chevron-compact-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chevron-up" \| "circle-arrow-down" \| "circle-arrow-left" \| "circle-arrow-right" \| "circle-arrow-up" \| "circle-caret-down" \| "circle-caret-left" \| "circle-caret-right" \| "circle-caret-up" \| "circle-chevron-down" \| "circle-chevron-left" \| "circle-chevron-right" \| "circle-chevron-up" \| "circle-x" \| "code-circle-2" \| "color-swatch" \| "columns-2" \| "contrast-2" \| "door" \| "drag-drop" \| "droplet" \| "file" \| "folder" \| "forms" \| "hexagon-minus-2" \| "hexagon-plus-2" \| "hourglass-low" \| "ikosaedr" \| "image-in-picture" \| "inner-shadow-bottom" \| "key" \| "layout-board-split" \| "layout-list" \| "layout-navbar" \| "layout-navbar-inactive" \| "layout-sidebar" \| "list-tree" \| "loader" \| "loader-2" \| "loader-3" \| "menu-2" \| "message-circle-user" \| "microphone" \| "moon" \| "movie" \| "music" \| "network" \| "notification" \| "numbers" \| "off-brush" \| "off-hexagon" \| "off-id" \| "off-microphone" \| "off-moon" \| "off-notification" \| "off-palette" \| "off-replace" \| "off-search" \| "off-template" \| "palette" \| "pdf" \| "percentage-60" \| "photo" \| "photo-search" \| "robot" \| "schema" \| "shirt" \| "slideshow" \| "square-toggle" \| "stack-pop" \| "stack-push" \| "sunset-2" \| "template" \| "toggle-right" \| "viewport-tall" \| "viewport-wide" \| "wand" \| "writing" \| "zip"` | `"template"` | | `lfProps` | -- | Sets the props of the component to be placeholder loaded. | `LfCodePropsInterface \| LfTogglePropsInterface \| LfTextfieldPropsInterface \| LfAccordionPropsInterface \| LfArticlePropsInterface \| LfBadgePropsInterface \| LfButtonPropsInterface \| LfCanvasPropsInterface \| LfCardPropsInterface \| LfCarouselPropsInterface \| LfChartPropsInterface \| LfChatPropsInterface \| LfChipPropsInterface \| LfComparePropsInterface \| LfDrawerPropsInterface \| LfHeaderPropsInterface \| LfImagePropsInterface \| LfImageviewerPropsInterface \| LfListPropsInterface \| LfMasonryPropsInterface \| LfMessengerPropsInterface \| LfPhotoframePropsInterface \| LfPlaceholderPropsInterface \| LfProgressbarPropsInterface \| LfSliderPropsInterface \| LfSpinnerPropsInterface \| LfSplashPropsInterface \| LfTabbarPropsInterface \| LfToastPropsInterface \| LfTreePropsInterface \| LfTypewriterPropsInterface \| LfUploadPropsInterface` | `{}` | | `lfStyle` | `lf-style` | Custom styling for the component. | `string` | `""` | | `lfThreshold` | `lf-threshold` | Sets the threshold for the IntersectionObserver. | `number` | `0.25` | diff --git a/packages/core/src/components/lf-textfield/readme.md b/packages/core/src/components/lf-textfield/readme.md index aeba0cc..d06a460 100644 --- a/packages/core/src/components/lf-textfield/readme.md +++ b/packages/core/src/components/lf-textfield/readme.md @@ -13,7 +13,7 @@ The text field may include an icon, label, helper text, and a character counter. | Property | Attribute | Description | Type | Default | | ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `lfHelper` | -- | Sets the helper text for the text field. The helper text can provide additional information or instructions to the user. | `LfTextfieldHelper` | `null` | -| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | +| `lfHtmlAttributes` | -- | Allows customization of the input or textarea element through additional HTML attributes. This can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input. | `{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }` | `undefined` | | `lfIcon` | `lf-icon` | Sets the icon to be displayed within the text field. | `string` | `""` | | `lfLabel` | `lf-label` | Sets the label for the text field. | `string` | `""` | | `lfStretchX` | `lf-stretch-x` | Sets the text field to fill the available width of its container. | `boolean` | `false` | diff --git a/packages/showcase/src/components/lf-showcase/assets/doc.ts b/packages/showcase/src/components/lf-showcase/assets/doc.ts index 9d74ad4..e72fefa 100644 --- a/packages/showcase/src/components/lf-showcase/assets/doc.ts +++ b/packages/showcase/src/components/lf-showcase/assets/doc.ts @@ -60,7 +60,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Accordion component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Accordion component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -197,7 +197,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Article component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Article component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfArticleDataset", }, { @@ -515,7 +515,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The dataset for the button, containing the nodes to be displayed.\r\nThe first node will be used to set the icon and label if not provided.", + docs: "The dataset for the button, containing the nodes to be displayed.\nThe first node will be used to set the icon and label if not provided.", type: "LfDataDataset", }, { @@ -590,7 +590,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the button.\r\nRelevant only when lfToggable is set to true.", + docs: "Sets the initial state of the button.\nRelevant only when lfToggable is set to true.", type: "boolean", }, ], @@ -691,7 +691,7 @@ export const LF_DOC: LfShowcaseDoc = { docs: "Retrieves the HTMLLfImageElement from the canvas.", returns: { type: "Promise", - docs: "A promise that resolves with the HTMLLfImageElement instance\r\nrepresenting the image element in the canvas.", + docs: "A promise that resolves with the HTMLLfImageElement instance\nrepresenting the image element in the canvas.", }, signature: "() => Promise", }, @@ -715,7 +715,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "resizeCanvas", - docs: "Resizes the canvas elements to match the container's dimensions.\r\n\r\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\r\nto match the current container's height and width obtained via getBoundingClientRect().", + docs: "Resizes the canvas elements to match the container's dimensions.\n\nThis method adjusts both the main board canvas and preview canvas (if cursor preview is enabled)\nto match the current container's height and width obtained via getBoundingClientRect().", returns: { type: "Promise", docs: "A Promise that resolves when the resize operation is complete", @@ -724,7 +724,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasHeight", - docs: "Sets the canvas height for both the board and preview elements.\r\nIf a value is provided, it will set that specific height.\r\nIf no value is provided, it will set the height based on the container's bounding client rect.", + docs: "Sets the canvas height for both the board and preview elements.\nIf a value is provided, it will set that specific height.\nIf no value is provided, it will set the height based on the container's bounding client rect.", returns: { type: "Promise", docs: "Promise that resolves when the height has been set", @@ -733,7 +733,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "setCanvasWidth", - docs: "Sets the width of the canvas element(s).\r\nIf a value is provided, sets the width to that specific value.\r\nIf no value is provided, sets the width to match the container's width.\r\nWhen cursor preview is enabled, also updates the preview canvas width.", + docs: "Sets the width of the canvas element(s).\nIf a value is provided, sets the width to that specific value.\nIf no value is provided, sets the width to match the container's width.\nWhen cursor preview is enabled, also updates the preview canvas width.", returns: { type: "Promise", docs: "Promise that resolves when width is set", @@ -788,7 +788,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfStrokeTolerance", - docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\r\nThis prop sets the tolerance of the algorithm (null to disable).", + docs: "Simplifies the coordinates array by applying the Ramer-Douglas-Peucker algorithm.\nThis prop sets the tolerance of the algorithm (null to disable).", type: "number", }, { @@ -879,12 +879,12 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Card component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Card component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLayout", - docs: 'The layout style for the card component.\r\nCan be set to different predefined styles like "material" design.', + docs: 'The layout style for the card component.\nCan be set to different predefined styles like "material" design.', type: '"debug" | "keywords" | "material" | "upload"', }, { @@ -971,7 +971,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "nextSlide", - docs: "Moves the carousel to the next slide.\r\nTriggers the next slide transition using the carousel controller's next function.", + docs: "Moves the carousel to the next slide.\nTriggers the next slide transition using the carousel controller's next function.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete.", @@ -980,7 +980,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "prevSlide", - docs: "Moves the carousel to the previous slide by invoking the `previous` method\r\nfrom the carousel controller's index set.", + docs: "Moves the carousel to the previous slide by invoking the `previous` method\nfrom the carousel controller's index set.", returns: { type: "Promise", docs: "A promise that resolves when the slide transition is complete", @@ -1014,7 +1014,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Carousel component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Carousel component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1139,12 +1139,12 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { name: "lfLegend", - docs: "Sets the position of the legend.\r\nSupported values: bottom, left, right, top, hidden.\r\nKeep in mind that legend types are tied to chart types, some combinations might not work.", + docs: "Sets the position of the legend.\nSupported values: bottom, left, right, top, hidden.\nKeep in mind that legend types are tied to chart types, some combinations might not work.", type: '"bottom" | "hidden" | "left" | "right" | "top"', }, { @@ -1169,8 +1169,8 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTypes", - docs: "The type of the chart.\r\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", - type: '("area" | "line" | "bar" | "radar" | "calendar" | "scatter" | "pie" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', + docs: "The type of the chart.\nSupported formats: Bar, Gaussian, Line, Pie, Map and Scatter.", + type: '("bar" | "line" | "radar" | "calendar" | "scatter" | "pie" | "area" | "funnel" | "sankey" | "candlestick" | "heatmap" | "bubble" | "gaussian" | "hbar" | "sbar")[]', }, { name: "lfXAxis", @@ -1459,7 +1459,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chip component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chip component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1489,7 +1489,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the chip.\r\nRelevant only when the chip can be selected.", + docs: "Sets the initial state of the chip.\nRelevant only when the chip can be selected.", type: "string[]", }, ], @@ -1748,7 +1748,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Chart component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Chart component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -1826,7 +1826,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "close", - docs: "Closes the drawer component.\r\nUses requestAnimationFrame to ensure smooth animation and state update.\r\nDispatches a 'close' custom event when the drawer is closed.", + docs: "Closes the drawer component.\nUses requestAnimationFrame to ensure smooth animation and state update.\nDispatches a 'close' custom event when the drawer is closed.", returns: { type: "Promise", docs: "Promise that resolves when the drawer closing animation is scheduled", @@ -1880,7 +1880,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "toggle", - docs: "Toggles the drawer state between opened and closed.\r\nIf the drawer is currently opened, it will be closed.\r\nIf the drawer is currently closed, it will be opened.", + docs: "Toggles the drawer state between opened and closed.\nIf the drawer is currently opened, it will be closed.\nIf the drawer is currently closed, it will be opened.", returns: { type: "Promise", docs: "A promise that resolves when the toggle operation is complete", @@ -1910,7 +1910,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfResponsive", - docs: 'A number representing a screen-width breakpoint for responsiveness.\r\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\r\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\r\notherwise `"slide"`.', + docs: 'A number representing a screen-width breakpoint for responsiveness.\nIf set to 0 (or negative), no responsiveness is applied, and `lfDisplay` remains what you set.\nIf > 0, the drawer will switch to `"dock"` if `window.innerWidth >= lfResponsive`,\notherwise `"slide"`.', type: "number", }, { @@ -2078,22 +2078,22 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHtmlAttributes", - docs: "Allows customization of the image element.\r\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the image element.\nThis can include attributes like 'alt', 'aria-', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfShowSpinner", - docs: "Controls the display of a loading indicator.\r\nWhen enabled, a spinner is shown until the image finishes loading.\r\nThis property is not compatible with SVG images.", + docs: "Controls the display of a loading indicator.\nWhen enabled, a spinner is shown until the image finishes loading.\nThis property is not compatible with SVG images.", type: "boolean", }, { name: "lfSizeX", - docs: "Sets the width of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the width of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { name: "lfSizeY", - docs: "Sets the height of the icon.\r\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", + docs: "Sets the height of the icon.\nThis property accepts any valid CSS measurement value (e.g., px, %, vh, etc.) and defaults to 100%.", type: "string", }, { @@ -2108,7 +2108,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Defines the source URL of the image.\r\nThis property is used to set the image resource that the component should display.", + docs: "Defines the source URL of the image.\nThis property is used to set the image resource that the component should display.", type: "string", }, ], @@ -2143,7 +2143,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "addSnapshot", - docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\r\nIt has no effect when the current shape is not set.", + docs: "Appends a new snapshot to the current shape's history by duplicating it with an updated value.\nIt has no effect when the current shape is not set.", returns: { type: "Promise", docs: "", @@ -2152,7 +2152,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "clearHistory", - docs: "Clears the history related to the shape identified by the index.\r\nWhen index is not provided, it clear the full history.", + docs: "Clears the history related to the shape identified by the index.\nWhen index is not provided, it clear the full history.", returns: { type: "Promise", docs: "", @@ -2245,7 +2245,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Imageviewer component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Imageviewer component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2295,7 +2295,7 @@ export const LF_DOC: LfShowcaseDoc = { methods: [ { name: "focusNext", - docs: "Moves focus to the next item in the list.\r\nIf no item is currently focused, focuses the selected item.\r\nIf the last item is focused, wraps around to the first item.", + docs: "Moves focus to the next item in the list.\nIf no item is currently focused, focuses the selected item.\nIf the last item is focused, wraps around to the first item.", returns: { type: "Promise", docs: "A promise that resolves when the focus operation is complete", @@ -2304,7 +2304,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "focusPrevious", - docs: "Focuses the previous item in the list.\r\nIf no item is currently focused, it focuses the selected item.\r\nIf focused item is the first one, it wraps around to the last item.", + docs: "Focuses the previous item in the list.\nIf no item is currently focused, it focuses the selected item.\nIf focused item is the first one, it wraps around to the last item.", returns: { type: "Promise", docs: "Promise that resolves when the focus operation is complete", @@ -2349,7 +2349,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "selectNode", - docs: "Selects a node in the list at the specified index.\r\nIf no index is provided, selects the currently focused node.", + docs: "Selects a node in the list at the specified index.\nIf no index is provided, selects the currently focused node.", returns: { type: "Promise", docs: "A promise that resolves when the selection is complete.", @@ -2369,7 +2369,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -2414,7 +2414,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfValue", - docs: "Sets the initial state of the list.\r\nRelevant only when the list can be selected.", + docs: "Sets the initial state of the list.\nRelevant only when the list can be selected.", type: "number", }, ], @@ -2543,7 +2543,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfColumns", - docs: "Number of columns of the masonry, doesn't affect sequential views.\r\nCan be set with a number or an array of numbers that identify each breakpoint.", + docs: "Number of columns of the masonry, doesn't affect sequential views.\nCan be set with a number or an array of numbers that identify each breakpoint.", type: "number | number[]", }, { @@ -2668,7 +2668,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "reset", - docs: "Resets the messenger component to its initial state.\r\nClears covers, current character, and message history.\r\nReinitializes the component.", + docs: "Resets the messenger component to its initial state.\nClears covers, current character, and message history.\nReinitializes the component.", returns: { type: "Promise", docs: "A promise that resolves when the reset is complete", @@ -2702,7 +2702,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF List component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF List component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfMessengerDataset", }, { @@ -2823,7 +2823,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfPlaceholder", docs: "Html attributes of the picture before the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfStyle", @@ -2838,7 +2838,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfValue", docs: "Html attributes of the picture after the component enters the viewport.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, ], styles: [ @@ -2928,7 +2928,7 @@ export const LF_DOC: LfShowcaseDoc = { { name: "lfIcon", docs: "Displays an animated SVG placeholder until the component is loaded.", - type: '"article" | "code" | "progress" | "download" | "id" | "x" | "replace" | "copy" | "key" | "search" | "brush" | "list" | "upload" | "check" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', + type: '"x" | "id" | "replace" | "search" | "brush" | "list" | "progress" | "upload" | "check" | "code" | "copy" | "refresh" | "settings" | "messages" | "temperature" | "hexagon-plus" | "photo-x" | "chevron-right" | "copy-check" | "square-x" | "lock" | "download" | "chevron-down" | "edit" | "info-hexagon" | "hexagon-minus" | "chevron-left" | "lf-website" | "lf-signature" | "alert-triangle" | "adjustments-horizontal" | "arrow-autofit-content" | "arrow-back" | "article" | "bell-ringing" | "brand-facebook" | "brand-github" | "brand-instagram" | "brand-linkedin" | "brand-npm" | "brand-reddit" | "brand-x" | "bug" | "calendar-clock" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "chart-column" | "chart-histogram" | "chevron-compact-down" | "chevron-compact-left" | "chevron-compact-right" | "chevron-compact-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chevron-up" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-right" | "circle-arrow-up" | "circle-caret-down" | "circle-caret-left" | "circle-caret-right" | "circle-caret-up" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-x" | "code-circle-2" | "color-swatch" | "columns-2" | "contrast-2" | "door" | "drag-drop" | "droplet" | "file" | "folder" | "forms" | "hexagon-minus-2" | "hexagon-plus-2" | "hourglass-low" | "ikosaedr" | "image-in-picture" | "inner-shadow-bottom" | "key" | "layout-board-split" | "layout-list" | "layout-navbar" | "layout-navbar-inactive" | "layout-sidebar" | "list-tree" | "loader" | "loader-2" | "loader-3" | "menu-2" | "message-circle-user" | "microphone" | "moon" | "movie" | "music" | "network" | "notification" | "numbers" | "off-brush" | "off-hexagon" | "off-id" | "off-microphone" | "off-moon" | "off-notification" | "off-palette" | "off-replace" | "off-search" | "off-template" | "palette" | "pdf" | "percentage-60" | "photo" | "photo-search" | "robot" | "schema" | "shirt" | "slideshow" | "square-toggle" | "stack-pop" | "stack-push" | "sunset-2" | "template" | "toggle-right" | "viewport-tall" | "viewport-wide" | "wand" | "writing" | "zip"', }, { name: "lfProps", @@ -2947,7 +2947,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfTrigger", - docs: "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport.", + docs: "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport.", type: '"both" | "props" | "viewport"', }, { @@ -3026,7 +3026,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfCenteredLabel", - docs: "Displays the label in the middle of the progress bar.\r\nIt's the default for the radial variant and can't be changed.", + docs: "Displays the label in the middle of the progress bar.\nIt's the default for the radial variant and can't be changed.", type: "boolean", }, { @@ -3181,7 +3181,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfLeadingLabel", - docs: "When true, displays the label before the slider component.\r\nDefaults to `false`.", + docs: "When true, displays the label before the slider component.\nDefaults to `false`.", type: "boolean", }, { @@ -3360,7 +3360,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDimensions", - docs: "Defines the width and height of the spinner.\r\nIn the bar variant, it specifies only the height.", + docs: "Defines the width and height of the spinner.\nIn the bar variant, it specifies only the height.", type: "string", }, { @@ -3567,7 +3567,7 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfDataset", - docs: "The data set for the LF Tabbar component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tabbar component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -3722,13 +3722,13 @@ export const LF_DOC: LfShowcaseDoc = { props: [ { name: "lfHelper", - docs: "Sets the helper text for the text field.\r\nThe helper text can provide additional information or instructions to the user.", + docs: "Sets the helper text for the text field.\nThe helper text can provide additional information or instructions to the user.", type: "LfTextfieldHelper", }, { name: "lfHtmlAttributes", - docs: "Allows customization of the input or textarea element through additional HTML attributes.\r\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", - type: '{ class?: any; title?: any; name?: any; href?: any; alt?: any; disabled?: any; type?: any; value?: any; src?: any; autocomplete?: any; srcset?: any; max?: any; min?: any; multiple?: any; maxLength?: any; minLength?: any; placeholder?: any; readonly?: any; autofocus?: any; id?: any; role?: any; dataset?: any; lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; checked?: any; htmlProps?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', + docs: "Allows customization of the input or textarea element through additional HTML attributes.\nThis can include attributes like 'readonly', 'placeholder', etc., to further customize the behavior or appearance of the input.", + type: '{ lfDataset?: any; lfRipple?: any; lfStyle?: any; lfUiSize?: any; lfUiState?: any; name?: any; id?: any; type?: any; placeholder?: any; multiple?: any; value?: any; min?: any; max?: any; dataset?: any; title?: any; disabled?: any; alt?: any; step?: any; lfFormat?: any; lfLanguage?: any; lfPreserveSpaces?: any; lfShowCopy?: any; lfShowHeader?: any; lfStickyHeader?: any; lfValue?: any; lfLabel?: any; lfLeadingLabel?: any; lfHelper?: any; lfHtmlAttributes?: any; lfIcon?: any; lfStretchY?: any; lfStyling?: any; lfTrailingIcon?: any; autocomplete?: any; autofocus?: any; checked?: any; class?: any; href?: any; htmlProps?: any; maxLength?: any; minLength?: any; readonly?: any; role?: any; src?: any; srcset?: any; lfEmpty?: any; lfImageProps?: any; lfPosition?: any; lfIconOff?: any; lfShowSpinner?: any; lfStretchX?: any; lfToggable?: any; lfType?: any; lfBrush?: any; lfColor?: any; lfCursor?: any; lfOpacity?: any; lfPreview?: any; lfSize?: any; lfStrokeTolerance?: any; lfLayout?: any; lfSizeX?: any; lfSizeY?: any; lfAutoPlay?: any; lfInterval?: any; lfLightbox?: any; lfNavigation?: any; lfShape?: any; lfAxis?: any; lfColors?: any; lfLegend?: any; lfSeries?: any; lfTypes?: any; lfXAxis?: any; lfYAxis?: any; lfContextWindow?: any; lfEndpointUrl?: any; lfMaxTokens?: any; lfPollingInterval?: any; lfSeed?: any; lfSystem?: any; lfTemperature?: any; lfTypewriterProps?: any; lfView?: any; lfDisplay?: any; lfResponsive?: any; lfLoadCallback?: any; lfEnableDeletions?: any; lfSelectable?: any; lfActions?: any; lfColumns?: any; lfAutosave?: any; lfOverlay?: any; lfPlaceholder?: any; lfThreshold?: any; lfProps?: any; lfTrigger?: any; lfAnimated?: any; lfCenteredLabel?: any; lfIsRadial?: any; lfMax?: any; lfMin?: any; lfStep?: any; lfActive?: any; lfBarVariant?: any; lfDimensions?: any; lfFader?: any; lfFaderTimeout?: any; lfFullScreen?: any; lfTimeout?: any; lfCloseCallback?: any; lfCloseIcon?: any; lfMessage?: any; lfTimer?: any; lfAccordionLayout?: any; lfFilter?: any; lfInitialExpansionDepth?: any; lfDeleteSpeed?: any; lfLoop?: any; lfPause?: any; lfSpeed?: any; lfTag?: any; lfUpdatable?: any; "data-"?: any; "aria-"?: any; }', }, { name: "lfIcon", @@ -4168,7 +4168,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfDataset", - docs: "The data set for the LF Tree component.\r\nThis property is mutable, meaning it can be changed after the component is initialized.", + docs: "The data set for the LF Tree component.\nThis property is mutable, meaning it can be changed after the component is initialized.", type: "LfDataDataset", }, { @@ -4183,7 +4183,7 @@ export const LF_DOC: LfShowcaseDoc = { }, { name: "lfInitialExpansionDepth", - docs: "Sets the initial expanded nodes based on the specified depth.\r\nIf the property is not provided, all nodes in the tree will be expanded.", + docs: "Sets the initial expanded nodes based on the specified depth.\nIf the property is not provided, all nodes in the tree will be expanded.", type: "number", }, { From 32ac78b4bbd6f21469f89c73caac26791bd83462 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Fri, 14 Feb 2025 22:24:10 +0100 Subject: [PATCH 27/27] fix(card): cicd --- packages/showcase/cypress/e2e/components/card.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/showcase/cypress/e2e/components/card.cy.ts b/packages/showcase/cypress/e2e/components/card.cy.ts index 2b7a970..a799e2b 100644 --- a/packages/showcase/cypress/e2e/components/card.cy.ts +++ b/packages/showcase/cypress/e2e/components/card.cy.ts @@ -64,7 +64,7 @@ describe(CY_CATEGORIES.events, () => { cy.checkEvent(card, eventType); cy.get(`${cardTag}#material-material-0`) .findCyElement(rippleSurface) - .first() + .parent() // the actual listener is on the parent in this case .click(); cy.getCyElement(check).should("exist"); });