From b4179441d8bbd74c2f459d2b8a78b518f309d6a2 Mon Sep 17 00:00:00 2001 From: mimshins Date: Sat, 8 Mar 2025 12:50:41 +0330 Subject: [PATCH 1/3] fix(web-components/file-input): add min-width to the input --- .../src/file-input/file-input.style.ts | 6 ++-- .../src/file-input/file-input.ts | 29 +++++-------------- .../web-components/src/file-input/utils.ts | 20 +++++++++++++ 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/web-components/src/file-input/file-input.style.ts b/packages/web-components/src/file-input/file-input.style.ts index ff718b21..32cb5886 100644 --- a/packages/web-components/src/file-input/file-input.style.ts +++ b/packages/web-components/src/file-input/file-input.style.ts @@ -31,6 +31,8 @@ export default css` flex-direction: column; gap: var(--tapsi-spacing-4); + + width: 100%; } .root.disabled { @@ -68,7 +70,7 @@ export default css` justify-content: center; height: 8.25rem; - width: 100%; + min-width: 8.25rem; } .label { @@ -102,7 +104,7 @@ export default css` } .file-input { - height: 8.25rem; + height: 100%; width: 100%; position: relative; diff --git a/packages/web-components/src/file-input/file-input.ts b/packages/web-components/src/file-input/file-input.ts index 83ba5a95..b99f1e8e 100644 --- a/packages/web-components/src/file-input/file-input.ts +++ b/packages/web-components/src/file-input/file-input.ts @@ -28,7 +28,12 @@ import { import { ErrorMessages, scope, Slots } from "./constants.ts"; import { RetryEvent } from "./events.ts"; import { clear, error, image } from "./icons.ts"; -import { getProgressUiParams, isFileImage, isStringNumber } from "./utils.ts"; +import { + getProgressUiParams, + isFileImage, + isStringNumber, + loadingConverter, +} from "./utils.ts"; import FileInputValidator from "./Validator.ts"; const BaseClass = withOnReportValidity( @@ -53,25 +58,7 @@ export class FileInput extends BaseClass { * - If `true`, a spinner will appear indicating the component is loading. * - If a number between 0 and 100, it shows the percentage of the loading state. */ - @property({ - converter: { - fromAttribute(value: string | null): boolean | number { - if (value === null) return false; - if (value === "") return true; - - const numericValue = Number(value); - - if (Number.isNaN(numericValue)) return true; - - return numericValue; - }, - toAttribute(value: boolean | number): string | null { - if (typeof value === "boolean") return value ? "true" : null; - - return `${value}`; - }, - }, - }) + @property({ converter: loadingConverter }) public loading: boolean | number = false; /** @@ -646,8 +633,6 @@ export class FileInput extends BaseClass { } protected override render() { - console.log(this.loading); - const rootClasses = classMap({ root: true, disabled: this.disabled, diff --git a/packages/web-components/src/file-input/utils.ts b/packages/web-components/src/file-input/utils.ts index 7f406b7e..2951f2e5 100644 --- a/packages/web-components/src/file-input/utils.ts +++ b/packages/web-components/src/file-input/utils.ts @@ -1,3 +1,5 @@ +import type { PropertyDeclaration } from "lit"; + export const isStringNumber = (inputString: string): boolean => /^\d+(\.\d+)?$/.test(inputString); @@ -33,3 +35,21 @@ export const isFileImage = (fileName: string) => { fileName.toLowerCase().endsWith(imageExtension), ); }; + +export const loadingConverter: PropertyDeclaration["converter"] = { + fromAttribute(value: string | null): boolean | number { + if (value === null) return false; + if (value === "") return true; + + const numericValue = Number(value); + + if (Number.isNaN(numericValue)) return true; + + return numericValue; + }, + toAttribute(value: boolean | number): string | null { + if (typeof value === "boolean") return value ? "true" : null; + + return `${value}`; + }, +}; From 740af2321e45fa6d8a79f518fc758d921331ca7b Mon Sep 17 00:00:00 2001 From: mimshins Date: Sat, 8 Mar 2025 13:12:44 +0330 Subject: [PATCH 2/3] update test command --- .github/workflows/development.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index ea47ffd7..945d7585 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -59,4 +59,4 @@ jobs: run: pnpx playwright install --with-deps --only-shell - name: "🔍 run tests" - run: pnpm test + run: pnpx playwright test From 4c61fdfd9c0ab5e8722aaf11fdced3b8d599baed Mon Sep 17 00:00:00 2001 From: mimshins Date: Sat, 8 Mar 2025 13:28:06 +0330 Subject: [PATCH 3/3] update test scripts --- .github/workflows/development.yml | 4 ++-- package.json | 3 ++- packages/web-components/package.json | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 945d7585..8947f490 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -56,7 +56,7 @@ jobs: run: pnpm install - name: "🎭 install playwright" - run: pnpx playwright install --with-deps --only-shell + run: pnpm playwright install --with-deps --only-shell - name: "🔍 run tests" - run: pnpx playwright test + run: pnpm test diff --git a/package.json b/package.json index 8eb68dd7..84fb1f9c 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "playground:dev": "pnpm --filter @tapsioss/playground run start:dev", "playground:test": "pnpm --filter @tapsioss/playground run start:test", "dev": "run-p packages:dev playground:dev", - "test": "pnpm run packages:build && pnpm run packages:test", + "build": "pnpm run packages:build", + "test": "pnpm run packages:test", "lint:ts": "tsc --project tsconfig.json", "lint:ecma": "eslint --fix", "lint": "run-p lint:*", diff --git a/packages/web-components/package.json b/packages/web-components/package.json index a749bf5c..53bed3aa 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -18,6 +18,7 @@ "build": "run-p gen:metadata bulld:compile", "bulld:compile": "tsc --project ./tsconfig.build.json", "predev": "pnpm run clear", + "pretest": "pnpm --filter @tapsioss/theme run build && pnpm run build", "test": "playwright test", "dev": "tsc --watch --project ./tsconfig.dev.json", "release": "pnpm publish . --tag latest --access public",