Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

KTUI Toast doesn't work


Hello, I'm having problems with the components
of KTUI, it all started with the KTToast, wanting to import it

import {KTToast} from "@keenthemes/ktui/src";
// Tambien encuentra estas rutas para importar pero ninguna funciona
// import { KTToast } from "@keenthemes/ktui/src/components/toast";
// import { KTToast } from "@keenthemes/ktui/src/components/toast/toast";
KTToast.show({
message: "This is a basic toast!",
});


This gives me multiple errors within the node_modules files
Errors:


✘ [ERROR] TS4111: Property 'popper' comes from an index signature, so it must be accessed with ['popper']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/dropdown.ts:268:20:
268 │ state.styles.popper.width = `${state.rects.referenc...
╵ ~~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:1514:47:
1514 │ const selectedValue = focusedOption.dataset.value;
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:1578:44:
1578 │ const optionValue = clickedOption.dataset.value;
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:2547:42:
2547 │ const val = focusedOptionEl.dataset.value;
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:2723:24:
2723 │ (opt) => opt.dataset.value as string,
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:2727:34:
2727 │ selectedValues.has(opt.dataset.value as string),
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/select.ts:2769:34:
2769 │ selectedValues.has(opt.dataset.value as string),
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/tags.ts:58:37:
58 │ if ((opt as HTMLElement).dataset.value === optionValue) {
╵ ~~~~~


✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:291:28:
291 │ let content = optionData?.text?.trim(); // Default content to...
╵ ~~~~


✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:298:24:
298 │ content = optionData.text || optionData.content; // Prefer ...
╵ ~~~~


✘ [ERROR] TS4111: Property 'content' comes from an index signature, so it must be accessed with ['content']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:298:43:
298 │ ...tionData.text || optionData.content; // Prefer explicit text, ...
╵ ~~~~~~~


✘ [ERROR] TS4111: Property 'disabled' comes from an index signature, so it must be accessed with ['disabled']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:305:17:
305 │ if (optionData.disabled) {
╵ ~~~~~~~~


✘ [ERROR] TS4111: Property 'selected' comes from an index signature, so it must be accessed with ['selected']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:314:24:
314 │ selected: optionData.selected
╵ ~~~~~~~~


✘ [ERROR] TS4111: Property 'disabled' comes from an index signature, so it must be accessed with ['disabled']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:317:24:
317 │ disabled: optionData.disabled ? 'aria-disabled="true"' : '',
╵ ~~~~~~~~


✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/templates.ts:329:48:
329 │ ...lement.setAttribute('data-text', optionData?.text?.trim() || '');
╵ ~~~~


✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/utils.ts:57:18:
57 │ option.dataset.text ||
╵ ~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/utils.ts:208:20:
208 │ option.dataset.value?.toLowerCase().startsWith(lowerStr))
╵ ~~~~~


✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/select/utils.ts:338:61:
338 │ ... = options.findIndex((option) => option.dataset.value === value);
╵ ~~~~~


✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/toast/toast.ts:167:20:
167 │ positionGroups.top.push(toast);
╵ ~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/toast/toast.ts:169:20:
169 │ positionGroups.bottom.push(toast);
╵ ~~~~~~


✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/toast/toast.ts:175:18:
175 │ positionGroups.top.forEach((toast) => {
╵ ~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/toast/toast.ts:193:31:
193 │ for (let i = positionGroups.bottom.length - 1; i >= 0; i--) {
╵ ~~~~~~


✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]

node_modules/@keenthemes/ktui/src/components/toast/toast.ts:194:33:
194 │ const toast = positionGroups.bottom[i];

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)