7 |
8 |
9 |
24 |
25 |
39 |
--------------------------------------------------------------------------------
/packages/generation/components/ListItem/README.md:
--------------------------------------------------------------------------------
1 | # ListItem
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | This component can render a list item (li) with [Media](../Media/README.md) if media is provided
7 |
8 | ## Props
9 |
10 | All available props see in [ListItem.props.ts](./ListItem.props.ts)
11 |
12 | ## i18n
13 |
14 | The component natively supports [i18n](../../../i18n/README.md) for text values.
15 |
16 | You can provide a text as a locale token, and it will be dynamically translated
17 |
--------------------------------------------------------------------------------
/packages/generation/components/ListItem/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ListItem.props';
2 | export { default as ListItem } from './ListItem.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/Emodji.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ src }}
4 |
5 |
6 |
7 |
42 |
43 |
63 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/Icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
15 |
60 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/Image.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
26 |
27 |
42 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/Media.preset.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
19 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/README.md:
--------------------------------------------------------------------------------
1 | # Media
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | This component supports 5 different types of media:
7 |
8 | 1. [Video](./VideoPreset.vue)
9 | 2. [Image](./Image.vue)
10 | 3. [Icon](./Icon.vue)
11 | 4. [Emodji](./Emodji.vue)
12 | 5. [Sticker](./Sticker.vue)
13 |
14 | Sticker will be loaded asynchronously
15 |
16 | ## Props
17 |
18 | All available props see in [Media.props.ts](./Media.props.ts)
19 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Media.preset.props';
2 | export { default as MediaPreset } from './Media.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/components/Media/useLoadedImage.ts:
--------------------------------------------------------------------------------
1 | import { MaybeComputedRef, resolveRef } from '@tok/ui/types';
2 | import { computed, ref, watch } from 'vue';
3 |
4 | import { _MediaLoader } from './Media.preset.props';
5 |
6 | export function useLoadedImage(
7 | src: MaybeComputedRef<_MediaLoader | string | undefined> = ''
8 | ) {
9 | const srcRef = resolveRef(src);
10 |
11 | const onlySrcLoader = computed(() => {
12 | const value = srcRef.value;
13 |
14 | return value && typeof value === 'object' && 'then' in value ? value : null;
15 | });
16 |
17 | const loadedImage = ref();
18 |
19 | const loadImage = (value: _MediaLoader) => {
20 | value.then((m) => {
21 | loadedImage.value = m.default;
22 | });
23 | };
24 |
25 | watch(
26 | onlySrcLoader,
27 | (value) => {
28 | if (value) {
29 | loadImage(value);
30 | }
31 | },
32 | { immediate: true }
33 | );
34 |
35 | return loadedImage;
36 | }
37 |
--------------------------------------------------------------------------------
/packages/generation/components/PaywallPopup/PaywallPopup.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationPaywallPopup } from '@tok/generation/defineConfig';
2 |
3 | export type PaywallPopupProps = _GenerationPaywallPopup & {
4 | opened: boolean;
5 | };
6 |
7 | export type PaywallPopupEmits = {
8 | (e: 'update:opened', value: boolean): void;
9 | (e: 'onSelect', value: string | undefined): void;
10 | };
11 |
12 | const defaultButtons = [
13 | {
14 | id: 'telegram_payments',
15 | media: {
16 | type: 'emodji' as const,
17 | src: '💳',
18 | },
19 | type: 'default' as const,
20 | text: 'Bank card',
21 | },
22 | {
23 | id: 'wallet_pay',
24 | media: {
25 | type: 'emodji' as const,
26 | src: '👛',
27 | },
28 | type: 'default' as const,
29 | text: 'Wallet pay',
30 | },
31 | ];
32 |
33 | export const PaywallPopupDefaultProps = {
34 | type: 'telegram',
35 | title: 'Choose the payment method',
36 | message: '',
37 | buttons: () => defaultButtons,
38 | } as const;
39 |
--------------------------------------------------------------------------------
/packages/generation/components/PaywallPopup/README.md:
--------------------------------------------------------------------------------
1 | # PaywallPopup
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | A wrapper around [TelegramPopup](../../../telegram-ui/components/TelegramPopup/README.md) with the ability to display a button-icon inside the web `Popup` component as specified in the [Media.preset](../Media/README.md).
7 |
8 | ## Props
9 |
10 | All available props see in [PaywallPopup.props.ts](./PaywallPopup.props.ts)
11 |
12 | ## i18n
13 |
14 | The component natively supports [i18n](../../../i18n/README.md) for text values inside buttons.
15 |
16 | You can provide a text as a locale token, and it will be dynamically translated
17 |
--------------------------------------------------------------------------------
/packages/generation/components/PaywallPopup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './PaywallPopup.props';
2 | export { default as PaywallPopup } from './PaywallPopup.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitivePaywall/PrimitivePaywall.props.ts:
--------------------------------------------------------------------------------
1 | import type { PrimitiveSlideProps } from '@tok/generation/components/PrimitiveSlide';
2 | import type {
3 | _GenerationPrimitivePaywallConfig,
4 | _GenerationPrimitivePaywallProduct,
5 | } from '@tok/generation/defineConfig';
6 |
7 | export type PrimitivePaywallProps = Pick &
8 | _GenerationPrimitivePaywallConfig & {
9 | selectedProduct: _GenerationPrimitivePaywallProduct | null;
10 | };
11 |
12 | export const PrimitivePaywallDefaultProps = {
13 | links: () => [],
14 | mainButtonText: 'Continue',
15 | } as const;
16 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitivePaywall/README.md:
--------------------------------------------------------------------------------
1 | # PaywallPopup
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component extends the [Slide.preset](../../presets/slide/README.md) component.
7 | 2. It overrides the default behavior of the MainButton inside the [Slide.preset](../../presets/slide/README.md) component.
8 | 3. It manages the MainButton with its own logic, including:
9 | - Translating the mainButtonText.
10 | - Replacing {price} inside the mainButtonText.
11 | - Displaying a popup with the payment method.
12 | - Tracking the selected product.
13 | - If a product isn't selected, the MainButton won't be displayed
14 | 4. It renders [Link](../../../ui/components/Link/README.md).
15 | 5. It sends data to the bot when the payment method is selected.
16 |
17 | ## Props
18 |
19 | All available props see in [PrimitivePaywall.props.ts](./PrimitivePaywall.props.ts)
20 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitivePaywall/index.ts:
--------------------------------------------------------------------------------
1 | export * from './PrimitivePaywall.props';
2 | export { default as PrimitivePaywall } from './PrimitivePaywall.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitiveSlide/PrimitiveSlide.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationSlideConfig } from '@tok/generation/defineConfig';
2 |
3 | export type PrimitiveSlideProps = Pick<
4 | _GenerationSlideConfig,
5 | 'media' | 'textAlign' | 'shape' | 'background' | 'button' | 'extends'
6 | > & {
7 | active?: boolean;
8 | };
9 |
10 | export type PrimitiveSlideEmits = {
11 | (e: 'onClick'): void;
12 | };
13 |
14 | export const PrimitiveSlideDefaultProps = {
15 | button: 'Next',
16 | textAlign: 'left',
17 | shape: 'square',
18 | } as const;
19 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitiveSlide/README.md:
--------------------------------------------------------------------------------
1 | # PrimitiveSlide
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component can render [Media.preset](../Media/README.md).
7 | 2. It manages the `textAlign` property inside the content section.
8 | 3. Can change the positioning of media and content depending on the `shape` prop
9 | 4. It handles [MainButton](../../../telegram-ui/components/MainButton/README.md) behavior, including text translation.
10 | 5. It triggers focus on a fake `div` element to initiate blur on inputs.
11 |
12 | ## Props
13 |
14 | All available props see in [PrimitiveSlide.props.ts](./PrimitiveSlide.props.ts)
15 |
--------------------------------------------------------------------------------
/packages/generation/components/PrimitiveSlide/index.ts:
--------------------------------------------------------------------------------
1 | export * from './PrimitiveSlide.props';
2 | export { default as PrimitiveSlide } from './PrimitiveSlide.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/components/README.md:
--------------------------------------------------------------------------------
1 | # Components
2 |
3 | 1. [DrawPreset](./DrawPreset/README.md)
4 | 2. [ListItem](./ListItem/README.md)
5 | 3. [Media](./Media/README.md)
6 | 4. [PaywallPopup](./PaywallPopup/README.md)
7 | 5. [PrimitivePaywall](./PrimitiveSlide/README.md)
8 | 6. [PrimitiveSlide](./PrimitiveSlide/README.md)
9 |
--------------------------------------------------------------------------------
/packages/generation/index.ts:
--------------------------------------------------------------------------------
1 | export { bootstrap } from './bootstrap';
2 | export { defineConfig } from './defineConfig';
3 | export { default as Root } from './Root.vue';
4 |
--------------------------------------------------------------------------------
/packages/generation/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tok/generation",
3 | "version": "0.0.0",
4 | "main": "./index.ts",
5 | "types": "./index.ts",
6 | "dependencies": {
7 | "@tok/i18n": "*",
8 | "@tok/telegram-ui": "*",
9 | "@tok/ui": "*",
10 | "vue": "^3.3.4",
11 | "vue-router": "^4.2.5"
12 | },
13 | "devDependencies": {
14 | "@tok/eslint-config": "*",
15 | "@tok/tsconfig": "*",
16 | "@types/node": "^20.8.0",
17 | "@types/pako": "^1.0.1",
18 | "@vitejs/plugin-vue": "^4.2.3",
19 | "pako": "1.0.11",
20 | "vite": "^4.4.9",
21 | "vite-svg-loader": "^4.0.0"
22 | }
23 | }
--------------------------------------------------------------------------------
/packages/generation/plugins/README.md:
--------------------------------------------------------------------------------
1 | # Plugins
2 |
3 | 1. [definePresets](./definePresets/DefinePresets.plugin.ts)
4 |
5 | The main plugin for defining presets within an application generated using the `bootstrap` function
6 |
7 | 2. [formState](./formState/FormState.plugin.ts)
8 |
9 | Plugin for defining form state within an application generated using the `bootstrap` function
10 |
11 | 3. [theme](./theme/Theme.plugin.ts)
12 |
13 | Plugin for defining theme value within an application generated using the `bootstrap` function
14 |
--------------------------------------------------------------------------------
/packages/generation/plugins/definePresets/DefinePresets.plugin.ts:
--------------------------------------------------------------------------------
1 | import {
2 | DEFINED_PRESETS_TOKEN,
3 | predefinedPresets,
4 | } from '@tok/generation/tokens';
5 | import { Plugin } from 'vue';
6 |
7 | export const DefinePresetsPlugin: Plugin<{}> = {
8 | install(app, options) {
9 | app.provide(DEFINED_PRESETS_TOKEN, {
10 | ...predefinedPresets,
11 | ...options,
12 | });
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/packages/generation/plugins/definePresets/index.ts:
--------------------------------------------------------------------------------
1 | export * from './DefinePresets.plugin';
2 |
--------------------------------------------------------------------------------
/packages/generation/plugins/formState/FormState.plugin.ts:
--------------------------------------------------------------------------------
1 | import { FORM_STATE_TOKEN } from '@tok/generation/tokens';
2 | import { App, Plugin, ref } from 'vue';
3 |
4 | export const FormStatePlugin: Plugin = {
5 | install(app: App) {
6 | const state = ref>({});
7 |
8 | const update = (value: Record) => {
9 | state.value = {
10 | ...state.value,
11 | ...value,
12 | };
13 | };
14 |
15 | app.provide(FORM_STATE_TOKEN, { state, update });
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/packages/generation/plugins/formState/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FormState.plugin';
2 |
--------------------------------------------------------------------------------
/packages/generation/plugins/theme/Theme.plugin.ts:
--------------------------------------------------------------------------------
1 | import { THEME_TOKEN, ThemeConfigParam } from '@tok/generation/tokens';
2 | import { App, Plugin } from 'vue';
3 |
4 | export const ThemePlugin: Plugin = {
5 | install(app: App, themeValue: ThemeConfigParam) {
6 | app.provide(THEME_TOKEN, themeValue);
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/packages/generation/plugins/theme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Theme.plugin';
2 |
--------------------------------------------------------------------------------
/packages/generation/presets/Route.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
--------------------------------------------------------------------------------
/packages/generation/presets/base/README.md:
--------------------------------------------------------------------------------
1 | # Base.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is based on the [Carousel](../../../ui/components/Carousel/README.md) component.
7 | 2. It tracks the active index of the carousel and sets it into the query.
8 | 3. It safely restores the active index from the query.
9 | 4. It defines a safe accessor for the [CAROUSEL_ACCESSOR_TOKEN](../../use/README.md).
10 | 5. It renders presets using the [DrawPreset](../../components/DrawPreset/README.md) component.
11 |
12 | ## Props
13 |
14 | All available props see in [base.preset.props.ts](./base.preset.props.ts)
15 |
--------------------------------------------------------------------------------
/packages/generation/presets/base/base.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationCarouselConfig } from '@tok/generation/defineConfig';
2 |
3 | export type BasePresetProps = _GenerationCarouselConfig;
4 |
5 | export const BasePresetDefaultProps = {
6 | slides: () => [],
7 | } as const;
8 |
--------------------------------------------------------------------------------
/packages/generation/presets/base/index.ts:
--------------------------------------------------------------------------------
1 | export * from './base.preset.props';
2 | export { default as BasePreset } from './base.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/form/README.md:
--------------------------------------------------------------------------------
1 | # Form.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is built upon the [Slide.preset](../slide/README.md) component.
7 | 2. It can render controls based on its configuration:
8 | - InputText (type="text")
9 | - InputText (type="number")
10 | - CheckboxBlock (type="checkbox")
11 | 3. It supports various types of inputs that can be configured within [defineConfig](../../defineConfig.ts), such as type="date."
12 | 4. It handles all controls and sets their values to the formState via [FORM_STATE_TOKEN](../../tokens/README.md).
13 | 5. It supports restoring values from the formState even when a control has been destroyed.
14 |
15 | ## Props
16 |
17 | All available props see in [form.preset.props.ts](./form.preset.props.ts)
18 |
--------------------------------------------------------------------------------
/packages/generation/presets/form/form.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationFormConfig } from '@tok/generation/defineConfig';
2 |
3 | export type FormPresetProps = Omit<_GenerationFormConfig, 'extends'>;
4 |
5 | const defaultForm = [
6 | {
7 | id: 'id1',
8 | placeholder: 'placeholder for type: text',
9 | type: 'text' as const,
10 | },
11 | ];
12 |
13 | export const FormPresetDefaultProps = {
14 | form: () => defaultForm,
15 | } as const;
16 |
--------------------------------------------------------------------------------
/packages/generation/presets/form/index.ts:
--------------------------------------------------------------------------------
1 | export * from './form.preset.props';
2 | export { default as FormPreset } from './form.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall/README.md:
--------------------------------------------------------------------------------
1 | # Paywall.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is built upon the [PrimitivePaywall.preset](../../components/PrimitivePaywall/README.md) component.
7 | 2. It can display products in a column, where only one can be selected.
8 | 3. It translates the title, description, and discount of the products.
9 |
10 | ## Props
11 |
12 | All available props see in [paywall.preset.props.ts](./paywall.preset.props.ts)
13 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall/index.ts:
--------------------------------------------------------------------------------
1 | export * from './paywall.preset.props';
2 | export { default as PaywallPreset } from './paywall.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall/paywall.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationPaywallConfig } from '@tok/generation/defineConfig';
2 |
3 | export type PaywallPresetProps = Omit<_GenerationPaywallConfig, 'extends'>;
4 |
5 | export const PaywallPresetDefaultProps = {
6 | products: () => [],
7 | } as const;
8 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_row/README.md:
--------------------------------------------------------------------------------
1 | # PaywallRow.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is built upon the [PrimitivePaywall.preset](../../components/PrimitivePaywall/README.md) component.
7 | 2. It can display products in a **row**, where only one can be selected.
8 | 3. It translates the "title", "description", and "bestText" of the products.
9 | 4. It can detect the length of products to ensure user-friendly product selection behavior.
10 |
11 | ## Props
12 |
13 | All available props see in [paywall_row.preset.props.ts](./paywall_row.preset.props.ts)
14 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_row/index.ts:
--------------------------------------------------------------------------------
1 | export * from './paywall_row.preset.props';
2 | export { default as PaywallRowPreset } from './paywall_row.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_row/paywall_row.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationPaywallRowConfig } from '@tok/generation/defineConfig';
2 |
3 | export type PaywallRowPresetProps = Omit<
4 | _GenerationPaywallRowConfig,
5 | 'extends'
6 | >;
7 |
8 | export const PaywallRowPresetDefaultProps = {
9 | products: () => [],
10 | } as const;
11 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_single/README.md:
--------------------------------------------------------------------------------
1 | # PaywallSingle.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is built upon the [PrimitivePaywall.preset](../../components/PrimitivePaywall/README.md) component.
7 | 2. It can display only one product, which is always selected.
8 | 3. It translates the title and description of the product.
9 |
10 | ## Props
11 |
12 | All available props see in [paywall_single.preset.props.ts](./paywall_single.preset.props.ts)
13 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_single/index.ts:
--------------------------------------------------------------------------------
1 | export * from './paywall_single.preset.props';
2 | export { default as PaywallSinglePreset } from './paywall_single.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/paywall_single/paywall_single.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { _GenerationPaywallSingleConfig } from '@tok/generation/defineConfig';
2 |
3 | export type PaywallSinglePresetProps = Omit<
4 | _GenerationPaywallSingleConfig,
5 | 'extends'
6 | >;
7 |
8 | const defaultProduct = {
9 | id: 'id1',
10 | title: 'Product Title',
11 | price: 99.99,
12 | description: 'Product description',
13 | };
14 |
15 | export const PaywallSinglePresetDefaultProps = {
16 | product: () => defaultProduct,
17 | } as const;
18 |
--------------------------------------------------------------------------------
/packages/generation/presets/slide/README.md:
--------------------------------------------------------------------------------
1 | # Slide.preset
2 |
3 | > [!NOTE]
4 | > This component is only intended for use with [bootstrap.ts](../../bootstrap.ts).
5 |
6 | 1. This component is based on the [PrimitiveSlide.preset](../../components/PrimitiveSlide/README.md) component.
7 | 2. It can display pagination if it's inside a carousel.
8 | 3. It translates the title and description of the slide.
9 | 4. It can render lists:
10 | - If the `list` prop is of type string[], it will add default media to every list item.
11 | 5. It handles MainButton.onClick to navigate to the next slide.
12 |
13 | ## Props
14 |
15 | All available props see in [slide.preset.props.ts](./slide.preset.props.ts)
16 |
--------------------------------------------------------------------------------
/packages/generation/presets/slide/index.ts:
--------------------------------------------------------------------------------
1 | export * from './slide.preset.props';
2 | export { default as SlidePreset } from './slide.preset.vue';
3 |
--------------------------------------------------------------------------------
/packages/generation/presets/slide/slide.preset.props.ts:
--------------------------------------------------------------------------------
1 | import type { PrimitiveSlideProps } from '@tok/generation/components/PrimitiveSlide';
2 | import type { _GenerationSlideConfig } from '@tok/generation/defineConfig';
3 |
4 | export type SlidePresetProps = PrimitiveSlideProps &
5 | Pick<_GenerationSlideConfig, 'title' | 'description' | 'pagination' | 'list'>;
6 |
7 | export const defaultSlideListMedia = {
8 | type: 'icon' as const,
9 | src: 'checkmark-fill',
10 | } as const;
11 |
12 | export const SlidePresetDefaultProps = {
13 | title: 'Title',
14 | description: '',
15 | list: () => [],
16 | } as const;
17 |
--------------------------------------------------------------------------------
/packages/generation/tokens/README.md:
--------------------------------------------------------------------------------
1 | # Tokens
2 |
3 | 1. [definedPresets.token](./definedPresets.token.ts)
4 |
5 | Token that you can use to access all defined presets. Within definedPresets.token, you can find all the predefined presets that are used across all example projects
6 |
7 | 2. [formState.token](./formState.token.ts)
8 |
9 | Token that you can use to access the state of the form. This state will be populated with values inside the [form.preset](../presets/README.md).
10 |
11 | 3. [Theme.token](./theme.token.ts)
12 |
13 | Token that provides access to the theme variable defined within the `defineConfig` function
14 |
15 | 4. [wasInteraction.token](./wasInteraction.token.ts)
16 |
17 | Token that provides access to a boolean variable representing the first interaction on the page
18 |
--------------------------------------------------------------------------------
/packages/generation/tokens/definedPresets.token.ts:
--------------------------------------------------------------------------------
1 | import { DefinedPresetsKeys } from '@tok/generation/defineConfig';
2 | import { BasePreset } from '@tok/generation/presets/base';
3 | import { SlidePreset } from '@tok/generation/presets/slide';
4 | import { defineAsyncComponent, InjectionKey } from 'vue';
5 |
6 | export type DefinePresets = Record<
7 | DefinedPresetsKeys,
8 | ReturnType
9 | >;
10 |
11 | export const predefinedPresets: DefinePresets = {
12 | base: BasePreset,
13 | slide: SlidePreset,
14 | paywall: defineAsyncComponent(() =>
15 | import('@tok/generation/presets/paywall').then((m) => m.PaywallPreset)
16 | ),
17 | form: defineAsyncComponent(() =>
18 | import('@tok/generation/presets/form').then((m) => m.FormPreset)
19 | ),
20 | paywall_single: defineAsyncComponent(() =>
21 | import('@tok/generation/presets/paywall_single').then(
22 | (m) => m.PaywallSinglePreset
23 | )
24 | ),
25 | paywall_row: defineAsyncComponent(() =>
26 | import('@tok/generation/presets/paywall_row').then(
27 | (m) => m.PaywallRowPreset
28 | )
29 | ),
30 | };
31 |
32 | export const DEFINED_PRESETS_TOKEN = Symbol() as InjectionKey<
33 | Record
34 | >;
35 |
--------------------------------------------------------------------------------
/packages/generation/tokens/formState.token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionKey, Ref } from 'vue';
2 |
3 | type State = {
4 | state: Ref>;
5 | update(value: Record): void;
6 | };
7 |
8 | export const FORM_STATE_TOKEN = Symbol() as InjectionKey;
9 |
--------------------------------------------------------------------------------
/packages/generation/tokens/index.ts:
--------------------------------------------------------------------------------
1 | export * from './definedPresets.token';
2 | export * from './formState.token';
3 | export * from './theme.token';
4 | export * from './wasInteraction.token';
5 |
--------------------------------------------------------------------------------
/packages/generation/tokens/theme.token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionKey } from 'vue';
2 |
3 | export type ThemeConfigParam = 'light' | 'dark' | 'auto';
4 |
5 | export const THEME_TOKEN = Symbol() as InjectionKey;
6 |
--------------------------------------------------------------------------------
/packages/generation/tokens/wasInteraction.token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionKey, Ref } from 'vue';
2 |
3 | export const WAS_INTERACTION_TOKEN = Symbol() as InjectionKey>;
4 |
--------------------------------------------------------------------------------
/packages/generation/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tok/tsconfig/tsconfig.base.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["src/*"]
7 | },
8 | "types": ["pako", "@types/node", "vite/client"]
9 | },
10 | "include": ["."],
11 | "exclude": ["dist", "build", "node_modules"]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/generation/types/tgs.d.ts:
--------------------------------------------------------------------------------
1 | declare type TelegramStickerJson = {
2 | tgs: number;
3 | v: string;
4 | fr: number;
5 | };
6 |
7 | declare module '*.tgs' {
8 | export default TelegramStickerJson;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/generation/use/README.md:
--------------------------------------------------------------------------------
1 | # Use
2 |
3 | 1. [useCarouse](./carousel/index.ts)
4 |
5 | Provides you with access to [Carousel](../../ui/components/Carousel/README.md) inside [Base.preset.ts](../presets/README.md) for managing or reading `activeIndex`, `length` (for pagination), and safly setting `activeIndex` via `MainButton` or `BackButton`.
6 |
7 | ## Usage
8 |
9 | > [!IMPORTANT]
10 | > Ensure that you call this function within one of the 'children' of the Base.preset component or the component that defines the accessor for the `CAROUSEL_ACCESSOR_TOKEN`. Otherwise, the function will return `null`
11 |
12 | ```vue
13 |
25 | ```
26 |
--------------------------------------------------------------------------------
/packages/generation/use/carousel/index.ts:
--------------------------------------------------------------------------------
1 | import { inject, InjectionKey, Ref } from 'vue';
2 |
3 | type Accessor = {
4 | next: () => void;
5 | back: () => void;
6 | set: (index: number) => void;
7 | index: Ref;
8 | length: Ref;
9 | };
10 |
11 | export const CAROUSEL_ACCESSOR_TOKEN = Symbol() as InjectionKey;
12 |
13 | export function useCarousel(): Accessor | null {
14 | const accessor = inject(CAROUSEL_ACCESSOR_TOKEN, null);
15 |
16 | if (accessor === null) {
17 | console.warn(
18 | 'You are using carousel methods outside of the carousel component'
19 | );
20 | }
21 |
22 | return accessor;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/i18n/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: ['@tok/eslint-config'],
4 | parserOptions: { tsconfigRootDir: __dirname },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/i18n/index.ts:
--------------------------------------------------------------------------------
1 | export * from './plugins';
2 | export * from './use';
3 |
--------------------------------------------------------------------------------
/packages/i18n/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tok/i18n",
3 | "version": "0.0.0",
4 | "main": "./index.ts",
5 | "types": "./index.ts",
6 | "dependencies": {
7 | "vue": "^3.3.4"
8 | },
9 | "devDependencies": {
10 | "@tok/eslint-config": "*",
11 | "@tok/tsconfig": "*"
12 | }
13 | }
--------------------------------------------------------------------------------
/packages/i18n/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import { InjectionKey, Plugin, Ref, ref } from 'vue';
2 |
3 | type Loader> = Promise<{ default: T }>;
4 |
5 | type Options = {
6 | default: string;
7 | asyncLocales: Record;
8 | messages?: Record;
9 | };
10 |
11 | export const TOK_I18N_TOKEN = Symbol() as InjectionKey<{
12 | fallbackLocale: string;
13 | locale: Ref;
14 | loaders: Record;
15 | messages: Ref>;
16 | }>;
17 |
18 | export const TokI18nPlugin: Plugin = {
19 | install(app, options) {
20 | const locale = ref(options.default);
21 | const _messages = ref(options.messages || {});
22 |
23 | app.provide(TOK_I18N_TOKEN, {
24 | fallbackLocale: options.default,
25 | locale,
26 | loaders: options.asyncLocales,
27 | messages: _messages,
28 | });
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/packages/i18n/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tok/tsconfig/tsconfig.base.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["src/*"]
7 | },
8 | "types": ["pako", "@types/node", "vite/client"]
9 | },
10 | "include": ["."],
11 | "exclude": ["dist", "build", "node_modules"]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/i18n/use/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useI18n';
2 |
--------------------------------------------------------------------------------
/packages/telegram-ui/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: ['@tok/eslint-config'],
4 | parserOptions: { tsconfigRootDir: __dirname },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/telegram-ui/README.md:
--------------------------------------------------------------------------------
1 | # @tok/telegram-ui
2 |
3 | This package offers a convenient wrapper around the [@twa-dev/sdk](https://github.com/twa-dev/SDK), providing Vue-like components and use-case solutions for Popups, MainButton, BackButton, and Theme integration.
4 |
5 | ## Components
6 |
7 | 1. [BackButton](./components/BackButton/README.md)
8 | 2. [MainButton](./components/MainButton/README.md)
9 | 3. [Sticker](./components/Sticker/README.md)
10 | 4. [TelegramPopup](./components/TelegramPopup/README.md)
11 |
12 | # Use
13 |
14 | ## [useTelegramSdk](./use/sdk/index.ts)
15 |
16 | Returns whole instance of [@twa-dev/sdk](https://github.com/twa-dev/SDK)
17 |
18 | ### Usage
19 |
20 | ```vue
21 |
29 | ```
30 |
31 | ## [useTheme](./use/theme/index.ts)
32 |
33 | useTheme will track colorScheme from Telegram sdk in reactive way
34 |
35 | ### Usage
36 |
37 | ```vue
38 |
52 | ```
53 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/BackButton/BackButton.props.ts:
--------------------------------------------------------------------------------
1 | import type { FlatButtonProps } from '@tok/ui/components/FlatButton';
2 |
3 | export type BackButtonProps = {
4 | type?: 'telegram' | 'web';
5 |
6 | show?: boolean;
7 |
8 | appearance?: FlatButtonProps['appearance'];
9 | };
10 |
11 | export type BackButtonEmits = {
12 | (e: 'onClick'): void;
13 | };
14 |
15 | export const BackButtonDefaultProps = {
16 | type: 'telegram',
17 | appearance: 'ghost',
18 | } as const;
19 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/BackButton/README.md:
--------------------------------------------------------------------------------
1 | # BackButton
2 |
3 | Wrapper around Telegram.BackButton with fallback to [FlatButton](../../../ui/components/FlatButton/README.md)
4 |
5 | We can determine whether the `TelegramSdk.BackButton` is displayed using
6 | the `TelegramSdk.BackButton.isVisible` property after calling the `TelegramSdk.BackButton.show()` method.
7 | If the `BackButton` is not available, we will display the `FlatButton` as a fallback.
8 | This can be useful during local development in a browser.
9 |
10 | You can easily switch between the telegram and web view modes if you prefer not to use `Telegram.BackButton`.
11 |
12 | By default, the type is set to 'telegram'
13 |
14 | ## Props
15 |
16 | All available props see in [BackButton.props.ts](./BackButton.props.ts)
17 |
18 | ## Usage
19 |
20 | ```vue
21 |
22 |
23 |
24 |
25 |
35 | ```
36 |
37 | switch to FlatButton:
38 |
39 | ```vue
40 |
41 |
42 |
43 |
44 |
54 | ```
55 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/BackButton/index.ts:
--------------------------------------------------------------------------------
1 | export * from './BackButton.props';
2 | export { default as BackButton } from './BackButton.vue';
3 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/MainButton/MainButton.props.ts:
--------------------------------------------------------------------------------
1 | import type { HapticFeedback } from '@twa-dev/types';
2 |
3 | type HapticStyle = Parameters[0];
4 |
5 | export type MainButtonProps = {
6 | text: string;
7 |
8 | disabled?: boolean;
9 |
10 | progress?: boolean;
11 |
12 | color?: string;
13 |
14 | textColor?: string;
15 |
16 | keepAlive?: boolean;
17 |
18 | haptic?: HapticStyle;
19 | };
20 |
21 | export type MainButtonEmits = {
22 | (e: 'onClick'): void;
23 | };
24 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/MainButton/index.ts:
--------------------------------------------------------------------------------
1 | export * from './MainButton.props';
2 | export { default as MainButton } from './MainButton.vue';
3 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/Sticker/Sticker.props.ts:
--------------------------------------------------------------------------------
1 | export type StickerProps = {
2 | json: TelegramStickerJson;
3 |
4 | autoplay?: boolean;
5 |
6 | loop?: boolean;
7 |
8 | speed?: number;
9 |
10 | playOnClick?: boolean;
11 | };
12 |
13 | export const StickerDefaultProps = {
14 | autoplay: true,
15 | loop: true,
16 | speed: 1,
17 | playOnClick: true,
18 | } as const;
19 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/Sticker/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Sticker.props';
2 | export { default as Sticker } from './Sticker.vue';
3 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/TelegramPopup/TelegramPopup.props.ts:
--------------------------------------------------------------------------------
1 | import { PopupButton } from '@twa-dev/types';
2 |
3 | export type TelegramPopupProps = {
4 | type?: 'web' | 'telegram';
5 | modelValue: boolean;
6 | title: string;
7 | message?: string;
8 | buttons: T[];
9 | };
10 |
11 | export type TelegramPopupEmits = {
12 | (e: 'update:modelValue', value: boolean): void;
13 | (e: 'onSelect', value: string | undefined): void;
14 | };
15 |
16 | export type TelegramPopupSlots = {
17 | 'button-icon'?: (props: { item: T }) => void;
18 | };
19 |
20 | const buttons: PopupButton[] = [];
21 |
22 | export const TelegramPopupDefaultProps = {
23 | title: '',
24 | message: '',
25 | type: 'telegram',
26 | buttons: () => buttons,
27 | } as const;
28 |
--------------------------------------------------------------------------------
/packages/telegram-ui/components/TelegramPopup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './TelegramPopup.props';
2 | export { default as TelegramPopup } from './TelegramPopup.vue';
3 |
--------------------------------------------------------------------------------
/packages/telegram-ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tok/telegram-ui",
3 | "version": "0.0.0",
4 | "dependencies": {
5 | "@tok/ui": "*",
6 | "@twa-dev/sdk": "^6.9.0",
7 | "lottie-web": "^5.12.2",
8 | "vue": "^3.3.4",
9 | "vue-router": "^4.2.5"
10 | },
11 | "devDependencies": {
12 | "@tok/eslint-config": "*",
13 | "@tok/tsconfig": "*"
14 | }
15 | }
--------------------------------------------------------------------------------
/packages/telegram-ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tok/tsconfig/tsconfig.base.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["src/*"]
7 | }
8 | },
9 | "include": ["."],
10 | "exclude": ["dist", "build", "node_modules"]
11 | }
12 |
--------------------------------------------------------------------------------
/packages/telegram-ui/types/tgs.d.ts:
--------------------------------------------------------------------------------
1 | declare type TelegramStickerJson = {
2 | tgs: number;
3 | v: string;
4 | fr: number;
5 | };
6 |
7 | // TODO: Find a way to set this type once
8 | // instead of copying and pasting it from project to project.
9 | declare module '*.tgs' {
10 | export default TelegramStickerJson;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/telegram-ui/use/sdk/index.ts:
--------------------------------------------------------------------------------
1 | import Telegram from '@twa-dev/sdk';
2 |
3 | export function useTelegramSdk() {
4 | return Telegram;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/telegram-ui/use/theme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useTheme';
2 |
--------------------------------------------------------------------------------
/packages/telegram-ui/use/theme/useTheme.ts:
--------------------------------------------------------------------------------
1 | import { useTelegramSdk } from '@tok/telegram-ui/use/sdk';
2 | import { onBeforeUnmount, onMounted, ref } from 'vue';
3 |
4 | export function useTheme(value: 'light' | 'dark' | 'auto' = 'auto') {
5 | const sdk = useTelegramSdk();
6 |
7 | const init = value === 'auto' ? sdk.colorScheme : value;
8 |
9 | const theme = ref(init);
10 |
11 | const onThemeChange = () => {
12 | theme.value = sdk.colorScheme;
13 | };
14 |
15 | onMounted(() => {
16 | if (value === 'auto') {
17 | sdk.onEvent('themeChanged', onThemeChange);
18 | }
19 | });
20 |
21 | onBeforeUnmount(() => {
22 | sdk.offEvent('themeChanged', onThemeChange);
23 | });
24 |
25 | return theme;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/tsconfig/README.md:
--------------------------------------------------------------------------------
1 | # @tok/tsconfig
2 |
3 | Basic tsconfig.json for your applications
4 |
5 | ## Usage
6 |
7 | 1. Run the following command:
8 |
9 | ```bash
10 | npm i @tok/tsconfig --save-dev --workspace=
11 | ```
12 |
13 | 2. Create a `tsconfig.json` file within your app.
14 |
15 | 3. Add the following default configuration to the `tsconfig.json` file:
16 |
17 | ```json
18 | {
19 | "extends": "@tok/tsconfig/tsconfig.base.json",
20 | "include": ["."],
21 | "exclude": ["dist", "build", "node_modules"]
22 | }
23 | ```
24 |
--------------------------------------------------------------------------------
/packages/tsconfig/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tok/tsconfig",
3 | "version": "0.0.0",
4 | "private": true,
5 | "license": "MIT",
6 | "publishConfig": {
7 | "access": "public"
8 | }
9 | }
--------------------------------------------------------------------------------
/packages/tsconfig/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "compilerOptions": {
4 | "composite": false,
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "inlineSources": false,
10 | "isolatedModules": true,
11 | "moduleResolution": "node",
12 | "noUnusedLocals": false,
13 | "noUnusedParameters": false,
14 | "preserveWatchOutput": true,
15 | "skipLibCheck": true,
16 | "resolveJsonModule": true,
17 | "strict": true,
18 | "target": "esnext",
19 | "module": "esnext",
20 | "jsx": "preserve",
21 | "importHelpers": true,
22 | "allowSyntheticDefaultImports": true,
23 | "sourceMap": false,
24 | "removeComments": true,
25 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
26 | "types": ["vite/client"]
27 | },
28 | "exclude": ["node_modules"]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/ui/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: ['@tok/eslint-config'],
4 | parserOptions: { tsconfigRootDir: __dirname },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/ui/components/Alert/Alert.props.ts:
--------------------------------------------------------------------------------
1 | import { Component, VNode } from 'vue';
2 |
3 | export type AlertProps = {
4 | type?: 'success' | 'error' | 'telegram' | string;
5 |
6 | // The "content" property can be a string or another component, and it will receive the "context" prop.
7 | content?: string | Component;
8 |
9 | // The "closable" property determines whether the alert can be closed or not.
10 | closable?: boolean;
11 |
12 | // You can pass data to the "content" as a component through the "data" property.
13 | data?: T;
14 | };
15 |
16 | // helper type to get correct context inside your component in alert
17 | /*
18 | Usage:
19 | CustomAlert.vue:
20 |
21 |
22 | {{ context.data.sayHello ? 'Hello' : 'Bye' }}
23 |
24 |
25 |
26 |
27 | type Data = {
28 | sayHello?: boolean;
29 | };
30 |
31 | defineProps>();
32 | */
33 | export type AlertContextProps = {
34 | context: {
35 | close: () => void;
36 | data: T;
37 | };
38 | };
39 |
40 | export type AlertSlots = {
41 | default?: (props: {}) => ReadonlyArray;
42 | };
43 |
44 | export type AlertEmits = {
45 | (e: 'close'): void;
46 | };
47 |
48 | export const AlertDefaultProps = {
49 | type: 'success',
50 | } as const;
51 |
--------------------------------------------------------------------------------
/packages/ui/components/Alert/README.md:
--------------------------------------------------------------------------------
1 | # Alert Component
2 |
3 | The component is used in the [useAlerts()](../../use/alerts/README.md) function
4 |
5 | > [!IMPORTANT]
6 | > To make useAlerts() work, it is essential to wrap your entire application in the [Root](../Root/README.md) component
7 |
8 | ## Props
9 |
10 | All available props see in [Alert.props.ts](./Alert.props.ts)
11 |
12 | ## Usage
13 |
14 | ```vue
15 |
16 |
17 |
18 |
19 |
20 |
23 | ```
24 |
25 | ## Customization
26 |
27 | ```vue
28 |
29 |
30 |
31 |
32 |
35 | ```
36 |
37 | ```scss
38 | /* global.styles.scss */
39 | .tok-alert {
40 | &[data-type='custom'] {
41 | background: red;
42 | color: white;
43 |
44 | .tok-alert {
45 | // color for icon
46 | &-icon {
47 | color: white;
48 | }
49 |
50 | // color for close icon
51 | &-close {
52 | color: black;
53 | }
54 | }
55 | }
56 | }
57 | ```
58 |
59 | or inside other component with style in scoped mode
60 |
61 | ```vue
62 |
63 |
64 |
65 |
66 |
67 |
68 |
71 |
72 |
81 | ```
82 |
--------------------------------------------------------------------------------
/packages/ui/components/Alert/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Alert.props';
2 | export { default as Alert } from './Alert.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/Carousel/Carousel.props.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 |
3 | export type CarouselProps = {
4 | // Current index
5 | modelValue: number;
6 |
7 | // Number of slides shown at the same time
8 | itemsCount: number;
9 |
10 | // Elements inside carousel
11 | items: ReadonlyArray;
12 |
13 | /*
14 | Whether or not slider can be dragged by clicking and holding
15 |
16 | This parameter only works on desktop devices and is ignored on mobile devices.
17 | The determination of whether the device is mobile is made through the `isMobile` function
18 | */
19 | draggable?: boolean;
20 |
21 | /*
22 | Number of pixels that must be traversed before the carousel recognizes a dragging action
23 | It's helpful when there's a scrollable element inside the carousel
24 | */
25 | threshold?: number;
26 |
27 | // Custom padding between elements
28 | paddingPx?: number;
29 | };
30 |
31 | export type CarouselEmits = {
32 | // update current index
33 | (e: 'update:modelValue', value: number): void;
34 | };
35 |
36 | export type CarouselSlots = {
37 | default: (props: { item: T; index: number }) => ReadonlyArray;
38 | };
39 |
40 | export type CarouselExpose = {
41 | next: () => void;
42 | back: () => void;
43 | };
44 |
45 | export const CarouselDefaultProps = {
46 | draggable: false,
47 | threshold: 0,
48 | paddingPx: 8,
49 | } as const;
50 |
--------------------------------------------------------------------------------
/packages/ui/components/Carousel/README.md:
--------------------------------------------------------------------------------
1 | # Carousel
2 |
3 | Allows you to rotate through arbitrary items.
4 |
5 | Multiple items can be shown simultaneously
6 |
7 | ## Props
8 |
9 | All available props see in [Carousel.props.ts](./Carousel.props.ts)
10 |
11 | ## Usage
12 |
13 | ```vue
14 |
15 |
22 | {{ item }}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
60 | ```
61 |
--------------------------------------------------------------------------------
/packages/ui/components/Carousel/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Carousel.props';
2 | export { default as Carousel } from './Carousel.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/CheckboxBlock/CheckboxBlock.props.ts:
--------------------------------------------------------------------------------
1 | export type CheckboxBlockProps = {
2 | modelValue: boolean | null;
3 |
4 | placeholder?: string;
5 |
6 | size?: 's' | 'm' | 'l' | string;
7 |
8 | shape?: 'rounded' | string;
9 |
10 | disabled?: boolean;
11 |
12 | invalid?: boolean;
13 | };
14 |
15 | export type CheckboxBlockEmits = {
16 | (e: 'update:modelValue', v: boolean): void;
17 | };
18 |
19 | export const CheckboxBlockDefaultProps = {
20 | placeholder: '',
21 | size: 'm',
22 | } as const;
23 |
--------------------------------------------------------------------------------
/packages/ui/components/CheckboxBlock/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CheckboxBlock.props';
2 | export { default as CheckboxBlock } from './CheckboxBlock.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/FlatButton/FlatButton.props.ts:
--------------------------------------------------------------------------------
1 | import type { SvgIconProps } from '@tok/ui/components/SvgIcon';
2 | import type { RouteLocationRaw } from 'vue-router';
3 |
4 | export type FlatButtonProps = {
5 | size?: 'xs' | 's' | 'm' | 'l' | string;
6 | icon?: string;
7 | rotate?: boolean;
8 | iconRight?: string;
9 | rightRotate?: boolean;
10 | shape?: 'square' | 'rounded' | null;
11 | appearance?: 'primary' | 'secondary' | 'ghost' | string;
12 | loading?: boolean;
13 | disabled?: boolean;
14 | iconButton?: boolean;
15 | href?: string;
16 | to?: RouteLocationRaw;
17 |
18 | iconSize?: SvgIconProps['size'];
19 | };
20 |
21 | export const FlatButtonDefaultProps = {
22 | size: 'm',
23 | appearance: 'primary',
24 | shape: null,
25 | } as const;
26 |
--------------------------------------------------------------------------------
/packages/ui/components/FlatButton/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FlatButton.props';
2 | export { default as FlatButton } from './FlatButton.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/InputText/InputText.props.ts:
--------------------------------------------------------------------------------
1 | export type InputTextProps = {
2 | modelValue: T;
3 | size?: 's' | 'm' | 'l';
4 | placeholder?: string;
5 | type?: string;
6 | autocomplete?: string;
7 | name?: string;
8 | disabled?: boolean;
9 | invalid?: boolean;
10 | inputmode?:
11 | | 'text'
12 | | 'search'
13 | | 'none'
14 | | 'tel'
15 | | 'url'
16 | | 'email'
17 | | 'numeric'
18 | | 'decimal'
19 | | undefined;
20 | hasCleaner?: boolean;
21 | };
22 |
23 | export type InputTextEmits = {
24 | (e: 'update:modelValue', value: string | null): void;
25 | };
26 |
27 | export const InputTextDefaultProps = {
28 | type: 'text',
29 | size: 'm',
30 | inputmode: 'text',
31 | hasCleaner: true,
32 | placeholder: '',
33 | } as const;
34 |
--------------------------------------------------------------------------------
/packages/ui/components/InputText/index.ts:
--------------------------------------------------------------------------------
1 | export * from './InputText.props';
2 | export { default as InputText } from './InputText.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/Link/Link.props.ts:
--------------------------------------------------------------------------------
1 | export type LinkProps = {
2 | text: string;
3 |
4 | href: string;
5 |
6 | target?: string;
7 | };
8 |
9 | export const LinkDefaultProps = {
10 | text: '',
11 | target: '_blank',
12 | } as const;
13 |
--------------------------------------------------------------------------------
/packages/ui/components/Link/Link.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
25 |
26 |
31 |
--------------------------------------------------------------------------------
/packages/ui/components/Link/README.md:
--------------------------------------------------------------------------------
1 | # Link
2 |
3 | ## Props
4 |
5 | All available props see in [Link.props.ts](./Link.props.ts)
6 |
7 | ## Figma
8 |
9 | [Component in figma project](https://www.figma.com/file/ssQqPZ2vqZhD4QF2xyCTd2/Telegram-Onboarding--ToolKit?type=design&node-id=154-5782&mode=design&t=6yuiDJRdwfFJ7dVT-0)
10 |
11 | ## i18n
12 |
13 | The component natively supports [i18n](../../../i18n/README.md) for text and href values.
14 |
15 | You can provide a text and href as a locale token, and it will be dynamically translated
16 |
17 | ## Usage
18 |
19 | ```vue
20 |
21 |
22 |
23 |
24 |
27 | ```
28 |
--------------------------------------------------------------------------------
/packages/ui/components/Link/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Link.props';
2 | export { default as Link } from './Link.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/Money/Money.props.ts:
--------------------------------------------------------------------------------
1 | export type MoneyProps = { value: number | string };
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Money/Money.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ formatted }}
3 |
4 |
5 |
19 |
--------------------------------------------------------------------------------
/packages/ui/components/Money/README.md:
--------------------------------------------------------------------------------
1 | # Money
2 |
3 | Money transforms and shows money sum. There are some ways to show currency symbol and various decimal settings
4 |
5 | ## Props
6 |
7 | All available props see in [Money.props.ts](./Money.props.ts)
8 |
9 | ## i18n
10 |
11 | The component natively supports [i18n](../../../i18n/README.md) for currency config and value prop.
12 |
13 | You can provide a currency config and value with a locale tokens, and it will be dynamically translated
14 |
15 | ## Usage
16 |
17 | ```vue
18 |
19 |
20 |
21 |
22 |
36 | ```
37 |
38 | ### i18n
39 |
40 | ```vue
41 |
42 |
43 |
44 |
45 |
63 | ```
64 |
--------------------------------------------------------------------------------
/packages/ui/components/Money/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Money } from './Money.vue';
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Pagination/Pagination.props.ts:
--------------------------------------------------------------------------------
1 | export type PaginationProps = {
2 | // Active page index
3 | modelValue: number;
4 |
5 | // Total pages count
6 | length: number;
7 | };
8 |
9 | export type PaginationEmits = {
10 | (e: 'update:modelValue', value: number): void;
11 | };
12 |
--------------------------------------------------------------------------------
/packages/ui/components/Pagination/README.md:
--------------------------------------------------------------------------------
1 | # Pagination
2 |
3 | Pagination component enables the user to select a specific page from a range of pages
4 |
5 | ## Props
6 |
7 | All available props see in [Pagination.props.ts](./Pagination.props.ts)
8 |
9 | ## Figma
10 |
11 | [Component in figma project](https://www.figma.com/file/ssQqPZ2vqZhD4QF2xyCTd2/Telegram-Onboarding--ToolKit?type=design&node-id=154-5776&mode=design&t=6yuiDJRdwfFJ7dVT-0)
12 |
13 | ## Usage
14 |
15 | ```vue
16 |
17 |
18 |
19 |
20 |
26 | ```
27 |
--------------------------------------------------------------------------------
/packages/ui/components/Pagination/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Pagination.props';
2 | export { default as Pagination } from './Pagination.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/Popup/Popup.props.ts:
--------------------------------------------------------------------------------
1 | export type PopupProps = {
2 | modelValue: boolean;
3 |
4 | title: string;
5 |
6 | message?: string;
7 | };
8 |
9 | export type PopupEmits = {
10 | (event: 'update:modelValue', value: boolean): void;
11 | };
12 |
13 | export const PopupDefaultProps = {
14 | modelValue: false,
15 | title: '',
16 | message: '',
17 | } as const;
18 |
--------------------------------------------------------------------------------
/packages/ui/components/Popup/README.md:
--------------------------------------------------------------------------------
1 | # Popup
2 |
3 | Optional built-in implementation of modals
4 |
5 | > [!IMPORTANT]
6 | > To make popups work, it is essential to wrap your entire application in the [Root](../Root/README.md) component
7 |
8 | ## Props
9 |
10 | All available props see in [Popup.props.ts](./Popup.props.ts)
11 |
12 | ## i18n
13 |
14 | The component natively supports [i18n](../../../i18n/README.md) for **title** and **message** prop.
15 |
16 | You can provide a title and message with a locale tokens, and it will be dynamically translated
17 |
18 | ## Usage
19 |
20 | ```vue
21 |
22 | How are you?
23 |
24 | Open popup
25 |
26 |
27 |
38 | ```
39 |
--------------------------------------------------------------------------------
/packages/ui/components/Popup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Popup.props';
2 | export { default as Popup } from './Popup.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/Portal/Portal.props.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'vue';
2 |
3 | export type PortalProps = {
4 | appendTo?: '#tok-popups-host' | '#tok-alerts-host' | string;
5 | };
6 |
7 | export type PortalSlots = {
8 | default: (props: {}) => ReadonlyArray;
9 | };
10 |
11 | export const PortalDefaultProps = {
12 | appendTo: 'body',
13 | } as const;
14 |
--------------------------------------------------------------------------------
/packages/ui/components/Portal/Portal.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/packages/ui/components/Portal/README.md:
--------------------------------------------------------------------------------
1 | # Portal
2 |
3 | Primitive wrapper around Vue Teleport component
4 |
5 | ## Props
6 |
7 | All available props see in [Portal.props.ts](./Portal.props.ts)
8 |
--------------------------------------------------------------------------------
/packages/ui/components/Portal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Portal.props';
2 | export { default as Portal } from './Portal.vue';
3 |
--------------------------------------------------------------------------------
/packages/ui/components/PrimitiveCheckbox/PrimitiveCheckbox.props.ts:
--------------------------------------------------------------------------------
1 | export type PrimitiveCheckboxProps = { value: boolean | null };
2 |
--------------------------------------------------------------------------------
/packages/ui/components/PrimitiveCheckbox/PrimitiveCheckbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
25 |