From 4b0dfb2b2dee4ab65d7c9606ebb1bb30423e5f46 Mon Sep 17 00:00:00 2001 From: Sukaato Date: Fri, 6 Sep 2024 23:34:05 +0200 Subject: [PATCH] fix(textarea): fix undefined resize observer resize observer can be null when loading fixes: #29 --- package-lock.json | 331 +++++++++--------- packages/core/package.json | 2 +- packages/core/src/components-config.d.ts | 140 +++++++- packages/core/src/components.d.ts | 100 +++--- .../src/components/input-file/input-file.tsx | 13 +- .../core/src/components/input-file/readme.md | 20 +- packages/core/src/components/input/input.tsx | 31 +- packages/core/src/components/input/readme.md | 66 ++-- .../core/src/components/textarea/readme.md | 52 +-- .../core/src/components/textarea/textarea.tsx | 36 +- .../src/components/textarea/textarea.type.ts | 2 +- packages/core/src/interface.d.ts | 6 +- release.sh | 57 +-- 13 files changed, 486 insertions(+), 370 deletions(-) diff --git a/package-lock.json b/package-lock.json index 327044c..85bb5f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -775,9 +775,9 @@ } }, "node_modules/@cheese-grinder/stencil-component-config": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@cheese-grinder/stencil-component-config/-/stencil-component-config-0.3.0.tgz", - "integrity": "sha512-Wt+MqaGAdwTUxpXDhFaZ3/fLwRT4uEQVhPKsb7dNd5FgbBdQboTpkcM36UA1Rz21iTYoCqrZQ5nV1zBmX7vsDw==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@cheese-grinder/stencil-component-config/-/stencil-component-config-0.4.1.tgz", + "integrity": "sha512-kiHYe0luy6fjSKinQYZ3Fi2cKMjN6nAe5sKZaskKxAgXoDdgopb5P4vS33mm9w/NKgTa4Vh5pbaqVIHWHknN7A==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -2939,128 +2939,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@vue/compiler-core": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz", - "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/parser": "^7.23.5", - "@vue/shared": "3.3.13", - "estree-walker": "^2.0.2", - "source-map-js": "^1.0.2" - } - }, - "node_modules/@vue/compiler-dom": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz", - "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/compiler-core": "3.3.13", - "@vue/shared": "3.3.13" - } - }, - "node_modules/@vue/compiler-sfc": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz", - "integrity": "sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/parser": "^7.23.5", - "@vue/compiler-core": "3.3.13", - "@vue/compiler-dom": "3.3.13", - "@vue/compiler-ssr": "3.3.13", - "@vue/reactivity-transform": "3.3.13", - "@vue/shared": "3.3.13", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.5", - "postcss": "^8.4.32", - "source-map-js": "^1.0.2" - } - }, - "node_modules/@vue/compiler-ssr": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz", - "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/compiler-dom": "3.3.13", - "@vue/shared": "3.3.13" - } - }, - "node_modules/@vue/reactivity": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.13.tgz", - "integrity": "sha512-fjzCxceMahHhi4AxUBzQqqVhuA21RJ0COaWTbIBl1PruGW1CeY97louZzLi4smpYx+CHfFPPU/CS8NybbGvPKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/shared": "3.3.13" - } - }, - "node_modules/@vue/reactivity-transform": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.13.tgz", - "integrity": "sha512-oWnydGH0bBauhXvh5KXUy61xr9gKaMbtsMHk40IK9M4gMuKPJ342tKFarY0eQ6jef8906m35q37wwA8DMZOm5Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/parser": "^7.23.5", - "@vue/compiler-core": "3.3.13", - "@vue/shared": "3.3.13", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.5" - } - }, - "node_modules/@vue/runtime-core": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.13.tgz", - "integrity": "sha512-1TzA5TvGuh2zUwMJgdfvrBABWZ7y8kBwBhm7BXk8rvdx2SsgcGfz2ruv2GzuGZNvL1aKnK8CQMV/jFOrxNQUMA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/reactivity": "3.3.13", - "@vue/shared": "3.3.13" - } - }, - "node_modules/@vue/runtime-dom": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.13.tgz", - "integrity": "sha512-JJkpE8R/hJKXqVTgUoODwS5wqKtOsmJPEqmp90PDVGygtJ4C0PtOkcEYXwhiVEmef6xeXcIlrT3Yo5aQ4qkHhQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/runtime-core": "3.3.13", - "@vue/shared": "3.3.13", - "csstype": "^3.1.3" - } - }, - "node_modules/@vue/server-renderer": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.13.tgz", - "integrity": "sha512-vSnN+nuf6iSqTL3Qgx/9A+BT+0Zf/VJOgF5uMZrKjYPs38GMYyAU1coDyBNHauehXDaP+zl73VhwWv0vBRBHcg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/compiler-ssr": "3.3.13", - "@vue/shared": "3.3.13" - }, - "peerDependencies": { - "vue": "3.3.13" - } - }, - "node_modules/@vue/shared": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", - "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==", - "dev": true, - "license": "MIT" - }, "node_modules/ajv": { "version": "8.17.1", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", @@ -3958,13 +3836,6 @@ "node": ">= 8" } }, - "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, - "license": "MIT" - }, "node_modules/dargs": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-8.1.0.tgz", @@ -6964,16 +6835,6 @@ "yallist": "^3.0.2" } }, - "node_modules/magic-string": { - "version": "0.30.11", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", - "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.5.0" - } - }, "node_modules/make-dir": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", @@ -7979,6 +7840,14 @@ "source-map": "^0.6.0" } }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "deprecated": "Please use @jridgewell/sourcemap-codec instead", + "dev": true, + "license": "MIT" + }, "node_modules/split": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz", @@ -8439,28 +8308,6 @@ } } }, - "node_modules/vue": { - "version": "3.3.13", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.13.tgz", - "integrity": "sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/compiler-dom": "3.3.13", - "@vue/compiler-sfc": "3.3.13", - "@vue/runtime-dom": "3.3.13", - "@vue/server-renderer": "3.3.13", - "@vue/shared": "3.3.13" - }, - "peerDependencies": { - "typescript": "*" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, "node_modules/walker": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz", @@ -8638,7 +8485,7 @@ }, "devDependencies": { "@biomejs/biome": "^1.8.3", - "@cheese-grinder/stencil-component-config": "^0.3.0", + "@cheese-grinder/stencil-component-config": "^0.4.1", "@cheese-grinder/stencil-custom-readme": "^0.1.7", "@cheese-grinder/stencil-sass-alias": "~0.2.4", "@playwright/test": "^1.46.1", @@ -8693,10 +8540,160 @@ "rollup": "^4.20.0", "typescript": "^5.4.5", "vite": "^5.4.0", - "vue": "~3.3.9" + "vue": "~3.2.47" + } + }, + "packages/vue/node_modules/@vue/compiler-core": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz", + "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.16.4", + "@vue/shared": "3.2.47", + "estree-walker": "^2.0.2", + "source-map": "^0.6.1" + } + }, + "packages/vue/node_modules/@vue/compiler-dom": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz", + "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-core": "3.2.47", + "@vue/shared": "3.2.47" + } + }, + "packages/vue/node_modules/@vue/compiler-sfc": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz", + "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.16.4", + "@vue/compiler-core": "3.2.47", + "@vue/compiler-dom": "3.2.47", + "@vue/compiler-ssr": "3.2.47", + "@vue/reactivity-transform": "3.2.47", + "@vue/shared": "3.2.47", + "estree-walker": "^2.0.2", + "magic-string": "^0.25.7", + "postcss": "^8.1.10", + "source-map": "^0.6.1" + } + }, + "packages/vue/node_modules/@vue/compiler-ssr": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz", + "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-dom": "3.2.47", + "@vue/shared": "3.2.47" + } + }, + "packages/vue/node_modules/@vue/reactivity": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz", + "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/shared": "3.2.47" + } + }, + "packages/vue/node_modules/@vue/reactivity-transform": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz", + "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.16.4", + "@vue/compiler-core": "3.2.47", + "@vue/shared": "3.2.47", + "estree-walker": "^2.0.2", + "magic-string": "^0.25.7" + } + }, + "packages/vue/node_modules/@vue/runtime-core": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz", + "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.2.47", + "@vue/shared": "3.2.47" + } + }, + "packages/vue/node_modules/@vue/runtime-dom": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz", + "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/runtime-core": "3.2.47", + "@vue/shared": "3.2.47", + "csstype": "^2.6.8" + } + }, + "packages/vue/node_modules/@vue/server-renderer": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz", + "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-ssr": "3.2.47", + "@vue/shared": "3.2.47" }, "peerDependencies": { - "vue": ">=3.3.9" + "vue": "3.2.47" + } + }, + "packages/vue/node_modules/@vue/shared": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", + "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==", + "dev": true, + "license": "MIT" + }, + "packages/vue/node_modules/csstype": { + "version": "2.6.21", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "dev": true, + "license": "MIT" + }, + "packages/vue/node_modules/magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "sourcemap-codec": "^1.4.8" + } + }, + "packages/vue/node_modules/vue": { + "version": "3.2.47", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz", + "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-dom": "3.2.47", + "@vue/compiler-sfc": "3.2.47", + "@vue/runtime-dom": "3.2.47", + "@vue/server-renderer": "3.2.47", + "@vue/shared": "3.2.47" } } } diff --git a/packages/core/package.json b/packages/core/package.json index 92412d7..eb99e29 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -70,7 +70,7 @@ }, "devDependencies": { "@biomejs/biome": "^1.8.3", - "@cheese-grinder/stencil-component-config": "^0.3.0", + "@cheese-grinder/stencil-component-config": "^0.4.1", "@cheese-grinder/stencil-custom-readme": "^0.1.7", "@cheese-grinder/stencil-sass-alias": "~0.2.4", "@playwright/test": "^1.46.1", diff --git a/packages/core/src/components-config.d.ts b/packages/core/src/components-config.d.ts index ab42729..f2db6f9 100644 --- a/packages/core/src/components-config.d.ts +++ b/packages/core/src/components-config.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all configurable components that exist in this project. */ import type { BadgeAs, BadgeColor } from "./components/badge/badge.type"; -import type { AutoCapitalize, Color, EnterKeyHint, Size } from "./interface.d"; +import type { AutoCapitalize, Color, EnterKeyHint, KeyboardType, Size } from "./interface.d"; import type { ButtonColor, ButtonExpand, ButtonShape } from "./components/button/button.type"; import type { CheckboxPlacement } from "./components/checkbox/checkbox.type"; import type { DividerColor, DividerOrientation, DividerPlacement } from "./components/divider/divider.type"; @@ -32,20 +32,24 @@ export namespace Configuration { 'pop-accordion-group'?: { /** * If `true`, the user cannot interact with the element. + * @default false */ readonly?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** * If `true`, the user can open multiple accordion. + * @default false */ multiple?: boolean; }; 'pop-avatar'?: { /** * To show some letters as avatar placeholder + * @default false */ placeholder?: boolean; }; @@ -59,20 +63,24 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * Transparent Badge with colored border + * @default false */ outlined?: boolean; /** * Used HTML element for + * @default "div" */ as?: BadgeAs; }; 'pop-button'?: { /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** @@ -84,10 +92,12 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * Transparent Button with colored border + * @default false */ outlined?: boolean; /** @@ -104,28 +114,34 @@ export namespace Configuration { 'pop-card'?: { /** * Applies smaller padding + * @default false */ compact?: boolean; }; 'pop-checkbox'?: { /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot modify the value. + * @default false */ readonly?: boolean; /** * If `true`, the toggle is selected. + * @default false */ checked?: boolean; /** * If a developer want to use `indeterminate`, `checked` property should be set to `false` + * @default false */ indeterminate?: boolean; /** * If true, the user cannot interact with the native element. + * @default false */ disabled?: boolean; /** @@ -137,18 +153,21 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * Where to place the label relative to the checkbox. * - `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. * - `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. + * @default "start" */ placement?: CheckboxPlacement; }; 'pop-divider'?: { /** * Define content disposition orientation + * @default "horizontal" */ orientation?: DividerOrientation; /** @@ -158,6 +177,7 @@ export namespace Configuration { * - `"center"`: The content will appear to the center of the divider. * - `"end"`: The content will appear to the right of the divider in LTR and to the left in RTL. * - `"right"`: The content will appear to the right of the divider in LTR and RTL. + * @default "center" */ placement?: DividerPlacement; /** @@ -176,16 +196,19 @@ export namespace Configuration { * - `"context-menu"`: the sidebar will be presented when the trigger is right * clicked on desktop and long pressed on mobile. This will also prevent your * device's normal context menu from appearing. + * @default "click" */ triggerAction?: TriggerAction; /** * Where to place the sidebar relative to the screen. * - `"start"`: The sidebar will appear to the left of the screen in LTR and to the right in RTL. * - `"end"`: The sidebar will appear to the right of the screen in LTR and to the left in RTL. + * @default "start" */ side?: DrawerSide; /** * Forces the drawer to be open + * @default false */ open?: boolean; }; @@ -196,16 +219,19 @@ export namespace Configuration { * - `"right"`: Open on right * - `"top"`: Open on top * - `"bottom"`: Open on bottom + * @default "bottom" */ side?: DropdownSide; /** * Describes how the dropdown has to be alined * - `"start"`: Align to the left in LTR and to the right in RTL. * - `"end"`: Align to the right in LTR and to the left in RTL. + * @default "start" */ align?: DropdownAlign; /** * Force the dropdown to be shown + * @default false */ open?: boolean; /** @@ -213,27 +239,32 @@ export namespace Configuration { * - `"click"`: the dropdown will be presented when the trigger is left clicked. * - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger. * - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. + * @default "click" */ triggerAction?: TriggerAction; /** * Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss. * Only apply on `triggerAction=hover` + * @default 100 */ debounce?: number; /** * If `true`, a backdrop will be displayed behind the modal. * This property controls whether or not the backdrop * darkens the screen when the modal is presented. + * @default false */ showBackdrop?: boolean; }; 'pop-indicator'?: { /** * Align horizontally the indicator. + * @default "left" */ side?: IndicatorSide; /** * Align vertically the indicator. + * @default "top" */ position?: IndicatorPosition; }; @@ -261,48 +292,46 @@ export namespace Configuration { maxLength?: number; /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot modify the value. + * @default false */ readonly?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** * If `true`, the element will be focused on page load. + * @default false */ autoFocus?: boolean; /** * A hint to the browser for which keyboard to display. * That specifies what action label (or icon) to present for the enter key on virtual keyboards. - * - `enter`: Typically Inserting a new line. - * - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - * - `go`: Typically meaning to take the user to the target of the text they typed. - * - `next`: Typically taking the user to the next field that will accept text. - * - `previous`: Typically taking the user to the previous field that will accept text. - * - `search`: Typically taking the user to the results of searching for the text they have typed. - * - `send`: Typically delivering the text to its target. + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ enterkeyhint?: EnterKeyHint; /** * If `true`, the element will have its spelling and grammar checked. * By default the User Agent make their own default behavior. + * @default false */ spellcheck?: boolean; /** * This features work only on mobile and tablet devices. * By default the User Agent and input make their own determination. - * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - * - `characters`: All letters should default to uppercase + * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ autoCapitalize?: AutoCapitalize; /** - * if `true`, adds border to textarea when `color` property is not set. + * if `true`, adds border to input when `color` property is not set. + * @default false */ bordered?: boolean; /** @@ -314,11 +343,13 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * If `true`, a character counter will display the ratio of characters used and the total character limit. * Developers must also set the `maxlength` property for the counter to be calculated correctly. + * @default false */ counter?: boolean; /** @@ -328,6 +359,7 @@ export namespace Configuration { counterFormatter?: (inputLength: number, maxLength: number) => string; /** * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. + * @default 0 */ debounce?: number; }; @@ -335,26 +367,32 @@ export namespace Configuration { /** * If `true`, the user can enter more than one value. * This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored. + * @default false */ multiple?: boolean; /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot modify the value. + * @default false */ readonly?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** * If `true`, the element will be focused on page load. + * @default false */ autoFocus?: boolean; /** * if `true`, adds border to textarea when `color` property is not set. + * @default false */ bordered?: boolean; /** @@ -366,18 +404,21 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; }; 'pop-item'?: { /** * If `true`, the user cannot interact with the item. + * @default false */ disabled?: boolean; }; 'pop-join'?: { /** * Define content disposition orientation + * @default "horizontal" */ orientation?: JoinOrientation; }; @@ -385,6 +426,7 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; }; @@ -392,27 +434,32 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * Define content disposition orientation + * @default "vertical" */ orientation?: ListOrientation; }; 'pop-loading'?: { /** * Apply different animation + * @default "spinner" */ type?: LoadingType; /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; }; 'pop-mask'?: { /** * Mask that should be applied + * @default "squircle" */ type?: MaskType; }; @@ -421,10 +468,12 @@ export namespace Configuration { * If `true`, a backdrop will be displayed behind the modal. * This property controls whether or not the backdrop * darkens the screen when the modal is presented. + * @default false */ showBackdrop?: boolean; /** * If `true`, the modal will be dismissed when the backdrop is clicked. + * @default false */ backdropDismiss?: boolean; /** @@ -433,6 +482,7 @@ export namespace Configuration { * just use the modalController or the `trigger` property. * Note: `open` will automatically be set back to `false` when * the modal dismisses. + * @default false */ open?: boolean; }; @@ -443,10 +493,12 @@ export namespace Configuration { * just use the popoverController or the `trigger` property. * Note: `open` will not automatically be set back to `false` when * the popover dismisses. You will need to do that in your code. + * @default false */ open?: boolean; /** * If `true`, the popover will animate. + * @default false */ animated?: any; /** @@ -455,10 +507,12 @@ export namespace Configuration { * darkens the screen when the popover is presented. * It does not control whether or not the backdrop * is active or present in the DOM. + * @default false */ showBackdrop?: boolean; /** * If `true`, the popover will be dismissed when the backdrop is clicked. + * @default false */ backdropDismiss?: boolean; /** @@ -470,6 +524,7 @@ export namespace Configuration { * If `"context-menu"`, the popover will be presented when the trigger is right * clicked on desktop and long pressed on mobile. This will also prevent your * device's normal context menu from appearing. + * @default "click" */ triggerAction?: TriggerAction; }; @@ -485,10 +540,12 @@ export namespace Configuration { 'pop-radio'?: { /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** @@ -500,20 +557,24 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; }; 'pop-radio-group'?: { /** * If `true`, apply the required property to all `pop-radio`. + * @default false */ required?: boolean; /** * If `true`, apply the disabled property to all `pop-radio`. + * @default false */ disabled?: boolean; /** * If `true`, the radios can be deselected. + * @default false */ allowEmpty?: boolean; /** @@ -534,28 +595,34 @@ export namespace Configuration { * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. * If the `pop-radio` as no size, it will apply to it + * @default "md" */ size?: Size; }; 'pop-range'?: { /** * The minimum value, which must not be greater than its maximum (max attribute) value. + * @default 0 */ min?: number; /** * The maximum value, which must not be less than its minimum (min attribute) value. + * @default 100 */ max?: number; /** * Works with the min and max attributes to limit the increments at which a value can be set. + * @default 1 */ step?: number; /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** @@ -567,16 +634,19 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. + * @default 0 */ debounce?: number; }; 'pop-select'?: { /** * If `true`, the user can enter more than one value. + * @default false */ multiple?: boolean; /** @@ -591,14 +661,17 @@ export namespace Configuration { max?: number; /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; /** * if `true`, adds border to textarea when `color` property is not set. + * @default false */ bordered?: boolean; /** @@ -610,6 +683,7 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** @@ -623,11 +697,13 @@ export namespace Configuration { 'pop-swap'?: { /** * Choose what animation is used on click. + * @default "rotate" */ type?: SwapType; /** * Activates the swap. * Show whats inside the slot `on` + * @default false */ active?: boolean; }; @@ -651,39 +727,54 @@ export namespace Configuration { rows?: number; /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot modify the value. + * @default false */ readonly?: boolean; /** * If `true`, the user cannot interact with the element. + * @default false */ disabled?: boolean; + /** + * A hint to the browser for which virtual keyboard to display. + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} + */ + keyboard?: KeyboardType; + /** + * A hint to the browser for which keyboard to display. + * That specifies what action label (or icon) to present for the enter key on virtual keyboards. + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} + */ + enterkeyhint?: EnterKeyHint; /** * If `true`, the element will have its spelling and grammar checked. * By default the User Agent make their own default behavior. + * @default false */ spellcheck?: boolean; /** * This features work only on mobile and tablet devices. * By default the User Agent and input make their own determination. - * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - * - `characters`: All letters should default to uppercase + * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ autoCapitalize?: AutoCapitalize; /** * Indicates how the control wraps text. - * - `soft`: Text is not to be wrapped when submitted (though can still be wrapped in the rendering). - * - `hard`: Text is to have newlines added by the user agent so that the text is wrapped when it is submitted. * If wrap attribute is in the `hard` state, the `cols` property must be specified. + * @default "soft" + * @see cols * + * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap} */ wrap?: Wrap; /** * if `true`, adds border to textarea when `color` property is not set. + * @default false */ bordered?: boolean; /** @@ -695,11 +786,13 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; /** * If `true`, a character counter will display the ratio of characters used and the total character limit. * Developers must also set the `maxlength` property for the counter to be calculated correctly. + * @default false */ counter?: boolean; /** @@ -709,28 +802,34 @@ export namespace Configuration { counterFormatter?: (inputLength: number, maxLength: number) => string; /** * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. + * @default 0 */ debounce?: number; }; 'pop-toggle'?: { /** * If `true`, the user must fill in a value before submitting a form. + * @default false */ required?: boolean; /** * If `true`, the user cannot modify the value. + * @default false */ readonly?: boolean; /** * If `true`, the toggle is selected. + * @default false */ checked?: boolean; /** * If a developer want to use `indeterminate`, `checked` property should be set to `false` + * @default false */ indeterminate?: boolean; /** * If true, the user cannot interact with the native element. + * @default false */ disabled?: boolean; /** @@ -742,6 +841,7 @@ export namespace Configuration { /** * Change size of the component * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. + * @default "md" */ size?: Size; }; @@ -755,10 +855,12 @@ export namespace Configuration { /** * Define the position of tooltip * By default the tootip appear on top + * @default "top" */ position?: TooltipPosition; /** * Force open tooltip + * @default false */ open?: boolean; }; diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index abc6c0e..be7a501 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -419,13 +419,14 @@ export namespace Components { "side"?: IndicatorSide; } /** - * Textarea allows users to enter text in multiple lines. + * Text Input is a simple input field. */ interface PopInput { /** - * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - `characters`: All letters should default to uppercase + * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. * @config * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ "autoCapitalize"?: AutoCapitalize; /** @@ -439,7 +440,7 @@ export namespace Components { */ "autoFocus"?: boolean; /** - * if `true`, adds border to textarea when `color` property is not set. + * if `true`, adds border to input when `color` property is not set. * @config * @default false */ @@ -473,20 +474,22 @@ export namespace Components { */ "disabled"?: boolean; /** - * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. - `enter`: Typically Inserting a new line. - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `go`: Typically meaning to take the user to the target of the text they typed. - `next`: Typically taking the user to the next field that will accept text. - `previous`: Typically taking the user to the previous field that will accept text. - `search`: Typically taking the user to the results of searching for the text they have typed. - `send`: Typically delivering the text to its target. - * @config + * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ "enterkeyhint"?: EnterKeyHint; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input and displayed when an error is detected. */ "errorText": string; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input and displayed when no error is detected. */ "helperText": string; /** - * A hint to the browser for which virtual keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * A hint to the browser for which virtual keyboard to display. + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ "keyboard"?: KeyboardType; /** @@ -538,7 +541,7 @@ export namespace Components { */ "required"?: boolean; /** - * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global `textarea.focus()`. + * Sets focus on the native `input` in `pop-input`. Use this method instead of the global `input.focus()`. */ "setFocus": () => Promise; /** @@ -568,7 +571,7 @@ export namespace Components { "value"?: string | number | null; } /** - * Textarea allows users to enter text in multiple lines. + * File Input is a an input field for uploading files. */ interface PopInputFile { /** @@ -595,11 +598,11 @@ export namespace Components { */ "disabled"?: boolean; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input-file and displayed when an error is detected. */ "errorText": string; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input-file and displayed when no error is detected. */ "helperText": string; /** @@ -625,7 +628,7 @@ export namespace Components { */ "required"?: boolean; /** - * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global `textarea.focus()`. + * Sets focus on the native `input` in `pop-input-file`. Use this method instead of the global `input.focus()`. */ "setFocus": () => Promise; /** @@ -1144,9 +1147,10 @@ export namespace Components { */ interface PopTextarea { /** - * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - `characters`: All letters should default to uppercase + * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. * @config * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ "autoCapitalize"?: AutoCapitalize; /** @@ -1193,7 +1197,9 @@ export namespace Components { */ "disabled"?: boolean; /** - * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. - `enter`: Typically Inserting a new line. - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `go`: Typically meaning to take the user to the target of the text they typed. - `next`: Typically taking the user to the next field that will accept text. - `previous`: Typically taking the user to the previous field that will accept text. - `search`: Typically taking the user to the results of searching for the text they have typed. - `send`: Typically delivering the text to its target. + * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ "enterkeyhint"?: EnterKeyHint; /** @@ -1205,7 +1211,9 @@ export namespace Components { */ "helperText": string; /** - * A hint to the browser for which virtual keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * A hint to the browser for which virtual keyboard to display. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ "keyboard"?: KeyboardType; /** @@ -1260,13 +1268,16 @@ export namespace Components { */ "spellcheck": boolean; /** - * The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a ``, it's only used when the toggle participates in a native `
`. + * The value of the textarea. + * @default "" */ "value"?: string | null; /** - * Indicates how the control wraps text. - `soft`: Text is not to be wrapped when submitted (though can still be wrapped in the rendering). - `hard`: Text is to have newlines added by the user agent so that the text is wrapped when it is submitted. If wrap attribute is in the `hard` state, the `cols` property must be specified. + * Indicates how the control wraps text. If wrap attribute is in the `hard` state, the `cols` property must be specified. * @config * @default "soft" + * @see cols * + * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap} */ "wrap"?: Wrap; } @@ -1636,7 +1647,7 @@ declare global { "popBlur": void; } /** - * Textarea allows users to enter text in multiple lines. + * Text Input is a simple input field. */ interface HTMLPopInputElement extends Components.PopInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPopInputElement, ev: PopInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -1658,7 +1669,7 @@ declare global { "popBlur": void; } /** - * Textarea allows users to enter text in multiple lines. + * File Input is a an input field for uploading files. */ interface HTMLPopInputFileElement extends Components.PopInputFile, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPopInputFileElement, ev: PopInputFileCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -2382,13 +2393,14 @@ declare namespace LocalJSX { "side"?: IndicatorSide; } /** - * Textarea allows users to enter text in multiple lines. + * Text Input is a simple input field. */ interface PopInput { /** - * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - `characters`: All letters should default to uppercase + * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. * @config * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ "autoCapitalize"?: AutoCapitalize; /** @@ -2402,7 +2414,7 @@ declare namespace LocalJSX { */ "autoFocus"?: boolean; /** - * if `true`, adds border to textarea when `color` property is not set. + * if `true`, adds border to input when `color` property is not set. * @config * @default false */ @@ -2436,20 +2448,22 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. - `enter`: Typically Inserting a new line. - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `go`: Typically meaning to take the user to the target of the text they typed. - `next`: Typically taking the user to the next field that will accept text. - `previous`: Typically taking the user to the previous field that will accept text. - `search`: Typically taking the user to the results of searching for the text they have typed. - `send`: Typically delivering the text to its target. - * @config + * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ "enterkeyhint"?: EnterKeyHint; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input and displayed when an error is detected. */ "errorText"?: string; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input and displayed when no error is detected. */ "helperText"?: string; /** - * A hint to the browser for which virtual keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * A hint to the browser for which virtual keyboard to display. + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ "keyboard"?: KeyboardType; /** @@ -2543,7 +2557,7 @@ declare namespace LocalJSX { "value"?: string | number | null; } /** - * Textarea allows users to enter text in multiple lines. + * File Input is a an input field for uploading files. */ interface PopInputFile { /** @@ -2570,11 +2584,11 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input-file and displayed when an error is detected. */ "errorText"?: string; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input-file and displayed when no error is detected. */ "helperText"?: string; /** @@ -2592,7 +2606,7 @@ declare namespace LocalJSX { */ "onPopBlur"?: (event: PopInputFileCustomEvent) => void; /** - * The `popChange` event is fired when the user modifies the textarea's value. Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified. + * The `popChange` event is fired when the user modifies the input-file's value. */ "onPopChange"?: (event: PopInputFileCustomEvent) => void; /** @@ -3172,9 +3186,10 @@ declare namespace LocalJSX { */ interface PopTextarea { /** - * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - `characters`: All letters should default to uppercase + * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination. * @config * @default "off" + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ "autoCapitalize"?: AutoCapitalize; /** @@ -3221,7 +3236,9 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. - `enter`: Typically Inserting a new line. - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `go`: Typically meaning to take the user to the target of the text they typed. - `next`: Typically taking the user to the next field that will accept text. - `previous`: Typically taking the user to the previous field that will accept text. - `search`: Typically taking the user to the results of searching for the text they have typed. - `send`: Typically delivering the text to its target. + * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ "enterkeyhint"?: EnterKeyHint; /** @@ -3233,7 +3250,9 @@ declare namespace LocalJSX { */ "helperText"?: string; /** - * A hint to the browser for which virtual keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * A hint to the browser for which virtual keyboard to display. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ "keyboard"?: KeyboardType; /** @@ -3300,13 +3319,16 @@ declare namespace LocalJSX { */ "spellcheck"?: boolean; /** - * The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a ``, it's only used when the toggle participates in a native ``. + * The value of the textarea. + * @default "" */ "value"?: string | null; /** - * Indicates how the control wraps text. - `soft`: Text is not to be wrapped when submitted (though can still be wrapped in the rendering). - `hard`: Text is to have newlines added by the user agent so that the text is wrapped when it is submitted. If wrap attribute is in the `hard` state, the `cols` property must be specified. + * Indicates how the control wraps text. If wrap attribute is in the `hard` state, the `cols` property must be specified. * @config * @default "soft" + * @see cols * + * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap} */ "wrap"?: Wrap; } @@ -3503,11 +3525,11 @@ declare module "@stencil/core" { */ "pop-indicator": LocalJSX.PopIndicator & JSXBase.HTMLAttributes; /** - * Textarea allows users to enter text in multiple lines. + * Text Input is a simple input field. */ "pop-input": LocalJSX.PopInput & JSXBase.HTMLAttributes; /** - * Textarea allows users to enter text in multiple lines. + * File Input is a an input field for uploading files. */ "pop-input-file": LocalJSX.PopInputFile & JSXBase.HTMLAttributes; "pop-item": LocalJSX.PopItem & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/input-file/input-file.tsx b/packages/core/src/components/input-file/input-file.tsx index 9dc12c2..363b4e7 100644 --- a/packages/core/src/components/input-file/input-file.tsx +++ b/packages/core/src/components/input-file/input-file.tsx @@ -20,7 +20,7 @@ import type { InputFileChangeEventDetail, InputFileColor } from './input-file.ty let inputIds = 0; /** - * Textarea allows users to enter text in multiple lines. + * File Input is a an input field for uploading files. * * @slot - Slot for the content of the label * @@ -133,18 +133,17 @@ export class InputFile implements ComponentInterface { @Prop({ reflect: true, mutable: true }) size?: Size; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input-file and displayed when no error is detected. */ @Prop() helperText: string; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input-file and displayed when an error is detected. */ @Prop() errorText: string; /** - * The `popChange` event is fired when the user modifies the textarea's value. - * Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified. + * The `popChange` event is fired when the user modifies the input-file's value. */ @Event() popChange: EventEmitter; @@ -196,8 +195,8 @@ export class InputFile implements ComponentInterface { } /** - * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global - * `textarea.focus()`. + * Sets focus on the native `input` in `pop-input-file`. Use this method instead of the global + * `input.focus()`. */ @Method() async setFocus(): Promise { diff --git a/packages/core/src/components/input-file/readme.md b/packages/core/src/components/input-file/readme.md index 381a6f5..cfdcce4 100644 --- a/packages/core/src/components/input-file/readme.md +++ b/packages/core/src/components/input-file/readme.md @@ -6,7 +6,7 @@ ## Overview -Textarea allows users to enter text in multiple lines. +File Input is a an input field for uploading files. ## Properties @@ -16,8 +16,8 @@ Textarea allows users to enter text in multiple lines. | `bordered` | `bordered` | if `true`, adds border to textarea when `color` property is not set. | `boolean` | `false` | | `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | | `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | -| `errorText` | `error-text` | Text that is placed under the textarea and displayed when an error is detected. | `string` | `undefined` | -| `helperText` | `helper-text` | Text that is placed under the textarea and displayed when no error is detected. | `string` | `undefined` | +| `errorText` | `error-text` | Text that is placed under the input-file and displayed when an error is detected. | `string` | `undefined` | +| `helperText` | `helper-text` | Text that is placed under the input-file and displayed when no error is detected. | `string` | `undefined` | | `multiple` | `multiple` | If `true`, the user can enter more than one value.
This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored. | `boolean` | `false` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | | `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | @@ -28,19 +28,19 @@ Textarea allows users to enter text in multiple lines. ## Events -| Event | Description | Type | -| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | -| `popBlur` | Emitted when the input loses focus. | `CustomEvent` | -| `popChange` | The `popChange` event is fired when the user modifies the textarea's value.
Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified. | `CustomEvent` | -| `popFocus` | Emitted when the input has focus. | `CustomEvent` | +| Event | Description | Type | +| ----------- | ----------------------------------------------------------------------------- | ----------------------------------------- | +| `popBlur` | Emitted when the input loses focus. | `CustomEvent` | +| `popChange` | The `popChange` event is fired when the user modifies the input-file's value. | `CustomEvent` | +| `popFocus` | Emitted when the input has focus. | `CustomEvent` | ## Methods ### `setFocus() => Promise` -Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global -`textarea.focus()`. +Sets focus on the native `input` in `pop-input-file`. Use this method instead of the global +`input.focus()`. #### Returns diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index 52923b0..eff0a9d 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -20,7 +20,7 @@ import type { Autocomplete, InputChangeEventDetail, InputColor, InputInputEventD let inputIds = 0; /** - * Textarea allows users to enter text in multiple lines. + * Text Input is a simple input field. * * @slot - Slot for the content of the label * @slot start - The content will appear to the left of the native HTML input in LTR and right in RTL @@ -181,7 +181,8 @@ export class Input implements ComponentInterface { /** * A hint to the browser for which virtual keyboard to display. - * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ @Prop({ mutable: true }) keyboard?: KeyboardType; @@ -189,15 +190,8 @@ export class Input implements ComponentInterface { * A hint to the browser for which keyboard to display. * That specifies what action label (or icon) to present for the enter key on virtual keyboards. * - * - `enter`: Typically Inserting a new line. - * - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - * - `go`: Typically meaning to take the user to the target of the text they typed. - * - `next`: Typically taking the user to the next field that will accept text. - * - `previous`: Typically taking the user to the previous field that will accept text. - * - `search`: Typically taking the user to the results of searching for the text they have typed. - * - `send`: Typically delivering the text to its target. - * * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ @Prop({ mutable: true }) enterkeyhint?: EnterKeyHint; @@ -219,18 +213,15 @@ export class Input implements ComponentInterface { * This features work only on mobile and tablet devices. * By default the User Agent and input make their own determination. * - * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - * - `characters`: All letters should default to uppercase - * * @config * @default "off" + * + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ @Prop({ mutable: true }) autoCapitalize?: AutoCapitalize; /** - * if `true`, adds border to textarea when `color` property is not set. + * if `true`, adds border to input when `color` property is not set. * * @config * @default false @@ -256,12 +247,12 @@ export class Input implements ComponentInterface { @Prop({ reflect: true, mutable: true }) size?: Size; /** - * Text that is placed under the textarea and displayed when no error is detected. + * Text that is placed under the input and displayed when no error is detected. */ @Prop() helperText: string; /** - * Text that is placed under the textarea and displayed when an error is detected. + * Text that is placed under the input and displayed when an error is detected. */ @Prop() errorText: string; @@ -356,8 +347,8 @@ export class Input implements ComponentInterface { } /** - * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global - * `textarea.focus()`. + * Sets focus on the native `input` in `pop-input`. Use this method instead of the global + * `input.focus()`. */ @Method() async setFocus(): Promise { diff --git a/packages/core/src/components/input/readme.md b/packages/core/src/components/input/readme.md index 7e540f1..64c7fcf 100644 --- a/packages/core/src/components/input/readme.md +++ b/packages/core/src/components/input/readme.md @@ -6,40 +6,40 @@ ## Overview -Textarea allows users to enter text in multiple lines. +Text Input is a simple input field. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `autoCapitalize` | `auto-capitalize` | This features work only on mobile and tablet devices.
By default the User Agent and input make their own determination.

- `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
- `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase
- `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
- `characters`: All letters should default to uppercase | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `"off"` | -| `autoComplete` | `auto-complete` | Indicates whether the value of the control can be automatically completed by the browser. | `"name" \| "off" \| "on" \| "tel" \| "email" \| "url" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level1" \| "address-level2" \| "address-level3" \| "address-level4" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "photo"` | `'off'` | -| `autoFocus` | `auto-focus` | If `true`, the element will be focused on page load. | `boolean` | `false` | -| `bordered` | `bordered` | if `true`, adds border to textarea when `color` property is not set. | `boolean` | `false` | -| `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | -| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit.
Developers must also set the `maxlength` property for the counter to be calculated correctly. | `boolean` | `false` | -| `counterFormatter` | -- | A callback used to format the counter text.
By default the counter text is set to "itemLength / maxLength". | `(inputLength: number, maxLength: number) => string` | `undefined` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. | `number` | `0` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | -| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which keyboard to display.
That specifies what action label (or icon) to present for the enter key on virtual keyboards.

- `enter`: Typically Inserting a new line.
- `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed.
- `go`: Typically meaning to take the user to the target of the text they typed.
- `next`: Typically taking the user to the next field that will accept text.
- `previous`: Typically taking the user to the previous field that will accept text.
- `search`: Typically taking the user to the results of searching for the text they have typed.
- `send`: Typically delivering the text to its target. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | `undefined` | -| `errorText` | `error-text` | Text that is placed under the textarea and displayed when an error is detected. | `string` | `undefined` | -| `helperText` | `helper-text` | Text that is placed under the textarea and displayed when no error is detected. | `string` | `undefined` | -| `keyboard` | `keyboard` | A hint to the browser for which virtual keyboard to display.
Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` | -| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `number \| string` | `undefined` | -| `maxLength` | `max-length` | This attribute specifies the maximum number of characters that the user can enter. | `number` | `undefined` | -| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `number` | `undefined` | -| `minLength` | `min-length` | This attribute specifies the minimum number of characters that the user can enter. | `number` | `undefined` | -| `multiple` | `multiple` | If `true`, the user can enter more than one value.
This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored. | `boolean` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `pattern` | `pattern` | A regular expression that the value is checked against.
The pattern must match the entire value, not just some subset.
Use the title attribute to describe the pattern to help the user.
This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored.
When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | `string` | `undefined` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value.

This property applies only when the `type` property is set to `"email"`,
`"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored. | `string` | `undefined` | -| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | -| `size` | `size` | Change size of the component
Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` | -| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked.
By default the User Agent make their own default behavior. | `boolean` | `false` | -| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set.
Possible values are: `"any"` or a positive floating point number. | `string` | `undefined` | -| `type` | `type` | The type of control to display. The default type is text. | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | `'text'` | -| `value` | `value` | The value of the toggle does not mean if it's checked or not, use the `checked`
property for that.

The value of a toggle is analogous to the value of a ``,
it's only used when the toggle participates in a native ``. | `number \| string` | `''` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `autoCapitalize` | `auto-capitalize` | This features work only on mobile and tablet devices.
By default the User Agent and input make their own determination. | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `"off"` | +| `autoComplete` | `auto-complete` | Indicates whether the value of the control can be automatically completed by the browser. | `"name" \| "off" \| "on" \| "tel" \| "email" \| "url" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level1" \| "address-level2" \| "address-level3" \| "address-level4" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "photo"` | `'off'` | +| `autoFocus` | `auto-focus` | If `true`, the element will be focused on page load. | `boolean` | `false` | +| `bordered` | `bordered` | if `true`, adds border to input when `color` property is not set. | `boolean` | `false` | +| `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | +| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit.
Developers must also set the `maxlength` property for the counter to be calculated correctly. | `boolean` | `false` | +| `counterFormatter` | -- | A callback used to format the counter text.
By default the counter text is set to "itemLength / maxLength". | `(inputLength: number, maxLength: number) => string` | `undefined` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. | `number` | `0` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | +| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which keyboard to display.
That specifies what action label (or icon) to present for the enter key on virtual keyboards. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | `undefined` | +| `errorText` | `error-text` | Text that is placed under the input and displayed when an error is detected. | `string` | `undefined` | +| `helperText` | `helper-text` | Text that is placed under the input and displayed when no error is detected. | `string` | `undefined` | +| `keyboard` | `keyboard` | A hint to the browser for which virtual keyboard to display. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` | +| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `number \| string` | `undefined` | +| `maxLength` | `max-length` | This attribute specifies the maximum number of characters that the user can enter. | `number` | `undefined` | +| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `number` | `undefined` | +| `minLength` | `min-length` | This attribute specifies the minimum number of characters that the user can enter. | `number` | `undefined` | +| `multiple` | `multiple` | If `true`, the user can enter more than one value.
This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored. | `boolean` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `pattern` | `pattern` | A regular expression that the value is checked against.
The pattern must match the entire value, not just some subset.
Use the title attribute to describe the pattern to help the user.
This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored.
When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | `string` | `undefined` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value.

This property applies only when the `type` property is set to `"email"`,
`"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored. | `string` | `undefined` | +| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | +| `size` | `size` | Change size of the component
Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` | +| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked.
By default the User Agent make their own default behavior. | `boolean` | `false` | +| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set.
Possible values are: `"any"` or a positive floating point number. | `string` | `undefined` | +| `type` | `type` | The type of control to display. The default type is text. | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | `'text'` | +| `value` | `value` | The value of the toggle does not mean if it's checked or not, use the `checked`
property for that.

The value of a toggle is analogous to the value of a ``,
it's only used when the toggle participates in a native ``. | `number \| string` | `''` | ## Events @@ -56,8 +56,8 @@ Textarea allows users to enter text in multiple lines. ### `setFocus() => Promise` -Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global -`textarea.focus()`. +Sets focus on the native `input` in `pop-input`. Use this method instead of the global +`input.focus()`. #### Returns diff --git a/packages/core/src/components/textarea/readme.md b/packages/core/src/components/textarea/readme.md index 2bbe108..28b5a5c 100644 --- a/packages/core/src/components/textarea/readme.md +++ b/packages/core/src/components/textarea/readme.md @@ -10,32 +10,32 @@ Textarea allows users to enter text in multiple lines. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------- | -| `autoCapitalize` | `auto-capitalize` | This features work only on mobile and tablet devices.
By default the User Agent and input make their own determination.

- `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
- `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase
- `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
- `characters`: All letters should default to uppercase | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `"off"` | -| `autoFocus` | `auto-focus` | If `true`, the element will be focused on page load. | `boolean` | `false` | -| `bordered` | `bordered` | if `true`, adds border to textarea when `color` property is not set. | `boolean` | `false` | -| `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | -| `cols` | `cols` | The visible width of the text control, in average character widths.
If it is specified, it must be a positive integer. | `number` | `undefined` | -| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit.
Developers must also set the `maxlength` property for the counter to be calculated correctly. | `boolean` | `false` | -| `counterFormatter` | -- | A callback used to format the counter text.
By default the counter text is set to "itemLength / maxLength". | `(inputLength: number, maxLength: number) => string` | `undefined` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. | `number` | `0` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | -| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which keyboard to display.
That specifies what action label (or icon) to present for the enter key on virtual keyboards.

- `enter`: Typically Inserting a new line.
- `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed.
- `go`: Typically meaning to take the user to the target of the text they typed.
- `next`: Typically taking the user to the next field that will accept text.
- `previous`: Typically taking the user to the previous field that will accept text.
- `search`: Typically taking the user to the results of searching for the text they have typed.
- `send`: Typically delivering the text to its target. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | `undefined` | -| `errorText` | `error-text` | Text that is placed under the textarea and displayed when an error is detected. | `string` | `undefined` | -| `helperText` | `helper-text` | Text that is placed under the textarea and displayed when no error is detected. | `string` | `undefined` | -| `keyboard` | `keyboard` | A hint to the browser for which virtual keyboard to display.
Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` | -| `maxLength` | `max-length` | This attribute specifies the maximum number of characters that the user can enter. | `number` | `undefined` | -| `minLength` | `min-length` | This attribute specifies the minimum number of characters that the user can enter. | `number` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | `undefined` | -| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | -| `rows` | `rows` | The number of visible text lines for the control. | `number` | `undefined` | -| `size` | `size` | Change size of the component
Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` | -| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked.
By default the User Agent make their own default behavior. | `boolean` | `false` | -| `value` | `value` | The value of the toggle does not mean if it's checked or not, use the `checked`
property for that.

The value of a toggle is analogous to the value of a ``,
it's only used when the toggle participates in a native ``. | `string` | `''` | -| `wrap` | `wrap` | Indicates how the control wraps text.

- `soft`: Text is not to be wrapped when submitted (though can still be wrapped in the rendering).
- `hard`: Text is to have newlines added by the user agent so that the text is wrapped when it is submitted.

If wrap attribute is in the `hard` state, the `cols` property must be specified. | `"hard" \| "soft"` | `"soft"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------- | +| `autoCapitalize` | `auto-capitalize` | This features work only on mobile and tablet devices.
By default the User Agent and input make their own determination. | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `"off"` | +| `autoFocus` | `auto-focus` | If `true`, the element will be focused on page load. | `boolean` | `false` | +| `bordered` | `bordered` | if `true`, adds border to textarea when `color` property is not set. | `boolean` | `false` | +| `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | +| `cols` | `cols` | The visible width of the text control, in average character widths.
If it is specified, it must be a positive integer. | `number` | `undefined` | +| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit.
Developers must also set the `maxlength` property for the counter to be calculated correctly. | `boolean` | `false` | +| `counterFormatter` | -- | A callback used to format the counter text.
By default the counter text is set to "itemLength / maxLength". | `(inputLength: number, maxLength: number) => string` | `undefined` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke. | `number` | `0` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | +| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which keyboard to display.
That specifies what action label (or icon) to present for the enter key on virtual keyboards. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | `undefined` | +| `errorText` | `error-text` | Text that is placed under the textarea and displayed when an error is detected. | `string` | `undefined` | +| `helperText` | `helper-text` | Text that is placed under the textarea and displayed when no error is detected. | `string` | `undefined` | +| `keyboard` | `keyboard` | A hint to the browser for which virtual keyboard to display. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` | +| `maxLength` | `max-length` | This attribute specifies the maximum number of characters that the user can enter. | `number` | `undefined` | +| `minLength` | `min-length` | This attribute specifies the minimum number of characters that the user can enter. | `number` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | `undefined` | +| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | +| `rows` | `rows` | The number of visible text lines for the control. | `number` | `undefined` | +| `size` | `size` | Change size of the component
Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` | +| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked.
By default the User Agent make their own default behavior. | `boolean` | `false` | +| `value` | `value` | The value of the textarea. | `string` | `''` | +| `wrap` | `wrap` | Indicates how the control wraps text.

If wrap attribute is in the `hard` state, the `cols` property must be specified. | `"hard" \| "soft"` | `"soft"` | ## Events diff --git a/packages/core/src/components/textarea/textarea.tsx b/packages/core/src/components/textarea/textarea.tsx index 3f878d0..a7c4de3 100644 --- a/packages/core/src/components/textarea/textarea.tsx +++ b/packages/core/src/components/textarea/textarea.tsx @@ -37,7 +37,7 @@ let textareaIds = 0; export class Textarea implements ComponentInterface { private inputId = `pop-textarea-${textareaIds++}`; private inheritedAttributes: Attributes; - private resizeObserver: MutationObserver; + private resizeObserver?: MutationObserver; private nativeInput!: HTMLTextAreaElement; private debounceTimer: NodeJS.Timeout; @@ -59,11 +59,9 @@ export class Textarea implements ComponentInterface { @Prop() placeholder?: string; /** - * The value of the toggle does not mean if it's checked or not, use the `checked` - * property for that. + * The value of the textarea. * - * The value of a toggle is analogous to the value of a ``, - * it's only used when the toggle participates in a native ``. + * @default "" */ @Prop({ mutable: true }) value?: string | null = ''; @Watch('value') @@ -134,7 +132,9 @@ export class Textarea implements ComponentInterface { /** * A hint to the browser for which virtual keyboard to display. - * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + * + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode} */ @Prop() keyboard?: KeyboardType; @@ -142,13 +142,8 @@ export class Textarea implements ComponentInterface { * A hint to the browser for which keyboard to display. * That specifies what action label (or icon) to present for the enter key on virtual keyboards. * - * - `enter`: Typically Inserting a new line. - * - `done`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - * - `go`: Typically meaning to take the user to the target of the text they typed. - * - `next`: Typically taking the user to the next field that will accept text. - * - `previous`: Typically taking the user to the previous field that will accept text. - * - `search`: Typically taking the user to the results of searching for the text they have typed. - * - `send`: Typically delivering the text to its target. + * @config + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute} */ @Prop() enterkeyhint?: EnterKeyHint; @@ -165,26 +160,23 @@ export class Textarea implements ComponentInterface { * This features work only on mobile and tablet devices. * By default the User Agent and input make their own determination. * - * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase) - * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase - * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase - * - `characters`: All letters should default to uppercase - * * @config * @default "off" + * + * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization} */ @Prop({ mutable: true }) autoCapitalize?: AutoCapitalize; /** * Indicates how the control wraps text. * - * - `soft`: Text is not to be wrapped when submitted (though can still be wrapped in the rendering). - * - `hard`: Text is to have newlines added by the user agent so that the text is wrapped when it is submitted. - * * If wrap attribute is in the `hard` state, the `cols` property must be specified. * * @config * @default "soft" + * + * @see cols + * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap} */ @Prop({ mutable: true }) wrap?: Wrap; @@ -316,7 +308,7 @@ export class Textarea implements ComponentInterface { disconnectedCallback(): void { clearTimeout(this.debounceTimer); - this.resizeObserver.disconnect(); + this.resizeObserver?.disconnect(); } /** diff --git a/packages/core/src/components/textarea/textarea.type.ts b/packages/core/src/components/textarea/textarea.type.ts index f439c9a..ed6d1e0 100644 --- a/packages/core/src/components/textarea/textarea.type.ts +++ b/packages/core/src/components/textarea/textarea.type.ts @@ -2,7 +2,7 @@ import type { Color } from 'src/components'; export type TextareaColor = Color | 'ghost'; -// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap +/** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap */ export type Wrap = 'hard' | 'soft'; export interface TextareaChangeEventDetail { diff --git a/packages/core/src/interface.d.ts b/packages/core/src/interface.d.ts index f57b3fa..22934c2 100644 --- a/packages/core/src/interface.d.ts +++ b/packages/core/src/interface.d.ts @@ -6,13 +6,13 @@ export type Color = BrandColor | StateColor; export type Size = 'xs' | 'sm' | 'md' | 'lg'; -// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize +/** https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize */ export type AutoCapitalize = 'none' | 'off' | 'on' | 'characters' | 'sentences' | 'words' | 'characters'; -// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode +/** https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode */ export type KeyboardType = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; -// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterKeyHint +/** https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterKeyHint */ export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; export interface FormAssociatedInterface { diff --git a/release.sh b/release.sh index af335dc..20f1b15 100644 --- a/release.sh +++ b/release.sh @@ -1,5 +1,10 @@ +#!/bin/bash + +clear + rm -fr ./node_modules/ rm -fr ./packages/**/node_modules/ +rm -fr ./*.tgz npm install @@ -7,26 +12,34 @@ npm -ws version minor --include-workspace-root --no-git-tag-version # Get the new version version=$(npm version --json | jq -r '.root') - +echo "" echo "new version: $version" - -# npx -w @poppy-ui/core @biomejs/biome lint -# npx -w @poppy-ui/core @biomejs/biome format - -# npx -w @poppy-ui/vue @biomejs/biome lint -# npx -w @poppy-ui/vue @biomejs/biome format - -npm -w @poppy-ui/core run build -# npm -w @poppy-ui/core pack - -echo "npm install -E @poppy-ui/core@$version -w=@poppy-ui/vue" -cd packages/vue -npm install -E @poppy-ui/core@$version -w=@poppy-ui/vue --verbose --prefer-online -# cd packages/vue -# npm install -w @poppy-ui/vue -# sleep 10s -# npm install -w @poppy-ui/vue -E @poppy-ui/core@$version -# npm -w @poppy-ui/vue install -E -D @poppy-ui/docs@$version -# npm -w @poppy-ui/vue install -E -D @poppy-ui/docs@$version - -# npm -w @poppy-ui/vue run build \ No newline at end of file +echo "" + +echo "+--------------------------------+" +echo "| Quality - Core |" +echo "+--------------------------------+" +npx -w=@poppy-ui/core @biomejs/biome format +npx -w=@poppy-ui/core @biomejs/biome lint + +echo "+--------------------------------+" +echo "| Quality - Vue |" +echo "+--------------------------------+" +npx -w=@poppy-ui/vue @biomejs/biome format +npx -w=@poppy-ui/vue @biomejs/biome lint + +echo "+--------------------------------+" +echo "| Build - Core |" +echo "+--------------------------------+" +npm -w=@poppy-ui/core run build +npm -w=@poppy-ui/core link +npm -w=@poppy-ui/docs link + + +echo "+--------------------------------+" +echo "| Build - Vue |" +echo "+--------------------------------+" +npm -w=@poppy-ui/vue install -S -E @poppy-ui/core@$version +npm -w=@poppy-ui/vue install -S -E -D @poppy-ui/docs@$version + +npm -w=@poppy-ui/vue version \ No newline at end of file