duck-dev-lib 0.0.28 → 0.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{duck-dev-lib-en-mOVobVPA.mjs → duck-dev-lib-en-D3xSOZcG.mjs} +83 -2
- package/fesm2022/{duck-dev-lib-ru-Vu8xDdcB.mjs.map → duck-dev-lib-en-D3xSOZcG.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-Vu8xDdcB.mjs → duck-dev-lib-ru-yPN1VRKz.mjs} +48 -2
- package/fesm2022/{duck-dev-lib-en-mOVobVPA.mjs.map → duck-dev-lib-ru-yPN1VRKz.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +91 -26
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +23 -5
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
var tabs = {
|
|
2
|
+
"quick-start": "Quick start",
|
|
2
3
|
accordion: "Accordion",
|
|
3
4
|
buttons: "Buttons",
|
|
4
5
|
loaders: "Loaders",
|
|
@@ -9,8 +10,86 @@ var tabs = {
|
|
|
9
10
|
notifications: "Notifications",
|
|
10
11
|
badge: "Badges",
|
|
11
12
|
slider: "Slider",
|
|
13
|
+
tooltip: "Tooltip",
|
|
12
14
|
directives: "Directives"
|
|
13
15
|
};
|
|
16
|
+
var quickStart = {
|
|
17
|
+
title: "Duck Dev UI Library — Colors & Themes",
|
|
18
|
+
intro: "This guide explains how to install the library styles and work with colors and themes. Duck Dev provides a small set of CSS variables (the dd-base palette) and theme switching via an attribute.",
|
|
19
|
+
principles: "Important: always use dd-base variables (var(--dd-base-...)) inside your styles. Raw color values are allowed only in rare edge cases.",
|
|
20
|
+
sections: {
|
|
21
|
+
install: "Install & connect styles",
|
|
22
|
+
palette: "Palette overview",
|
|
23
|
+
themeSwitch: "Theme switching (light/dark)",
|
|
24
|
+
custom: "Override or create a custom theme",
|
|
25
|
+
use: "Use colors in components"
|
|
26
|
+
},
|
|
27
|
+
install: {
|
|
28
|
+
text: "Add the variables stylesheet to your global styles so components pick up the palette.",
|
|
29
|
+
snippet: "/* angular.json */\n\"styles\": [\n \"projects/duck-dev-lib/src/styles/variables.scss\",\n \"src/styles.scss\"\n]"
|
|
30
|
+
},
|
|
31
|
+
palette: {
|
|
32
|
+
text: "The base palette is exposed as CSS variables. Use --dd-base-* in your custom CSS. Examples: --dd-base-0/100/200/300/400/500/600 and accents like --dd-base-secondary, --dd-base-accent-orange, --dd-base-accent-blue.",
|
|
33
|
+
list: [
|
|
34
|
+
"--dd-base-0..600 — neutrals (background/text/border)",
|
|
35
|
+
"--dd-base-secondary — violet accent",
|
|
36
|
+
"--dd-base-accent-orange — orange accent",
|
|
37
|
+
"--dd-base-accent-blue — blue accent"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
themeSwitch: {
|
|
41
|
+
text: "Theme is controlled by the ddTheme attribute on any wrapper (commonly on html or body). Supported built-in: light (default) and dark.",
|
|
42
|
+
snippet: "<!-- index.html -->\n<html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html>",
|
|
43
|
+
indexLabel: "index.html",
|
|
44
|
+
indexHtmlTitle: "Add ddTheme on the html tag",
|
|
45
|
+
toggleLabel: "Component toggle",
|
|
46
|
+
toggleTitle: "Toggle theme via component code",
|
|
47
|
+
toggleSnippet: "// In a component\nsetTheme(theme: 'dark' | 'light') {\n document.documentElement.setAttribute('ddTheme', theme);\n}"
|
|
48
|
+
},
|
|
49
|
+
custom: {
|
|
50
|
+
text: "You can override any dd-base variable under a custom theme. Components will automatically use your values.",
|
|
51
|
+
snippet: "/* styles.scss */\n[ddTheme='brand'] {\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n}"
|
|
52
|
+
},
|
|
53
|
+
use: {
|
|
54
|
+
text: "Library components accept AccentEnumColor to pick semantic colors from the palette. Below are examples with buttons and info cards.",
|
|
55
|
+
buttonsTitle: "Accent buttons",
|
|
56
|
+
cardsTitle: "Info cards"
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
var tooltipDoc = {
|
|
60
|
+
title: "Duck Dev UI Library - Tooltip",
|
|
61
|
+
basic: {
|
|
62
|
+
title: "Tooltip component",
|
|
63
|
+
description: "A small hint that appears near an element on hover or focus. Uses the same color palette as other components (see Badge colors). Supports 12 placements and delayed close to prevent flicker when moving the cursor between the element and the tooltip.",
|
|
64
|
+
usage: "Usage:",
|
|
65
|
+
inputs: "Input Parameters:",
|
|
66
|
+
examples: "Examples:"
|
|
67
|
+
},
|
|
68
|
+
inputsDesc: {
|
|
69
|
+
text: "<b>text</b>: string — the text inside the tooltip. Use translation keys with the Transloco pipe to localize.",
|
|
70
|
+
color: "<b>color</b>: AccentEnumColor — palette color (e.g. 'Violet', 'Orange', 'White', 'Gray', 'Dark').",
|
|
71
|
+
placement: "<b>placement</b>: 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' — position relative to the trigger.",
|
|
72
|
+
delay: "<b>delayCloseMs</b>: number — delay in milliseconds before the tooltip closes after mouse leaves or focus is lost."
|
|
73
|
+
},
|
|
74
|
+
examples: {
|
|
75
|
+
basic: "Basic",
|
|
76
|
+
violetTop: "Violet (top)",
|
|
77
|
+
orangeRight: "Orange (right)",
|
|
78
|
+
leftStart: "Left-start (gray)",
|
|
79
|
+
bottomEnd: "Bottom-end (white)",
|
|
80
|
+
hover: "Hover me"
|
|
81
|
+
},
|
|
82
|
+
examplesText: {
|
|
83
|
+
basic: "This is a tooltip",
|
|
84
|
+
top: "Tooltip on top",
|
|
85
|
+
right: "Tooltip on the right",
|
|
86
|
+
leftStart: "Tooltip left-start",
|
|
87
|
+
bottomEnd: "Tooltip bottom-end"
|
|
88
|
+
},
|
|
89
|
+
snippets: {
|
|
90
|
+
hello: "Hello tooltip"
|
|
91
|
+
}
|
|
92
|
+
};
|
|
14
93
|
var notifications = {
|
|
15
94
|
title: "Duck Dev UI Library - Notifications",
|
|
16
95
|
quickDemo: "Show notification",
|
|
@@ -430,6 +509,8 @@ var cardDoc = {
|
|
|
430
509
|
};
|
|
431
510
|
var en = {
|
|
432
511
|
tabs: tabs,
|
|
512
|
+
quickStart: quickStart,
|
|
513
|
+
tooltipDoc: tooltipDoc,
|
|
433
514
|
notifications: notifications,
|
|
434
515
|
slider: slider,
|
|
435
516
|
buttons: buttons,
|
|
@@ -443,5 +524,5 @@ var en = {
|
|
|
443
524
|
cardDoc: cardDoc
|
|
444
525
|
};
|
|
445
526
|
|
|
446
|
-
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
|
|
447
|
-
//# sourceMappingURL=duck-dev-lib-en-
|
|
527
|
+
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, notifications, quickStart, slider, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
528
|
+
//# sourceMappingURL=duck-dev-lib-en-D3xSOZcG.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-D3xSOZcG.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
var tabs = {
|
|
2
|
+
"quick-start": "Быстрый старт",
|
|
2
3
|
accordion: "Аккордеон",
|
|
3
4
|
buttons: "Кнопки",
|
|
4
5
|
loaders: "Загрузчики",
|
|
@@ -9,8 +10,52 @@ var tabs = {
|
|
|
9
10
|
notifications: "Уведомления",
|
|
10
11
|
badge: "Бейджи",
|
|
11
12
|
slider: "Слайдер",
|
|
13
|
+
tooltip: "Подсказка",
|
|
12
14
|
directives: "Директивы"
|
|
13
15
|
};
|
|
16
|
+
var quickStart = {
|
|
17
|
+
title: "Duck Dev UI Library — Цвета и темы",
|
|
18
|
+
intro: "Это руководство объясняет, как подключить стили библиотеки и работать с цветами и темами. Duck Dev предоставляет набор CSS‑переменных (палитра dd-base) и переключение тем через атрибут.",
|
|
19
|
+
principles: "Важно: внутри своих стилей используйте только переменные dd-base (var(--dd-base-...)). Жёсткие цвета используйте лишь в редких случаях.",
|
|
20
|
+
sections: {
|
|
21
|
+
install: "Установка и подключение стилей",
|
|
22
|
+
palette: "Обзор палитры",
|
|
23
|
+
themeSwitch: "Переключение темы (светлая/тёмная)",
|
|
24
|
+
custom: "Переопределение или создание своей темы",
|
|
25
|
+
use: "Использование цветов в компонентах"
|
|
26
|
+
},
|
|
27
|
+
install: {
|
|
28
|
+
text: "Добавьте файл с переменными в глобальные стили, чтобы компоненты получили палитру.",
|
|
29
|
+
snippet: "/* angular.json */\n\"styles\": [\n \"projects/duck-dev-lib/src/styles/variables.scss\",\n \"src/styles.scss\"\n]"
|
|
30
|
+
},
|
|
31
|
+
palette: {
|
|
32
|
+
text: "Базовая палитра доступна как CSS‑переменные. В своих стилях используйте --dd-base-*. Примеры: --dd-base-0/100/200/300/400/500/600 и акценты: --dd-base-secondary, --dd-base-accent-orange, --dd-base-accent-blue.",
|
|
33
|
+
list: [
|
|
34
|
+
"--dd-base-0..600 — нейтральные (фон/текст/границы)",
|
|
35
|
+
"--dd-base-secondary — фиолетовый акцент",
|
|
36
|
+
"--dd-base-accent-orange — оранжевый акцент",
|
|
37
|
+
"--dd-base-accent-blue — синий акцент"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
themeSwitch: {
|
|
41
|
+
text: "Тема управляется атрибутом ddTheme на любом контейнере (обычно html или body). Встроенные темы: светлая (по умолчанию) и тёмная.",
|
|
42
|
+
snippet: "<!-- index.html -->\n<html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html>",
|
|
43
|
+
indexLabel: "index.html",
|
|
44
|
+
indexHtmlTitle: "Добавьте ddTheme на тег html",
|
|
45
|
+
toggleLabel: "Переключение в компоненте",
|
|
46
|
+
toggleTitle: "Переключение темы из кода компонента",
|
|
47
|
+
toggleSnippet: "// В компоненте\nsetTheme(theme: 'dark' | 'light') {\n document.documentElement.setAttribute('ddTheme', theme);\n}"
|
|
48
|
+
},
|
|
49
|
+
custom: {
|
|
50
|
+
text: "Вы можете переопределить любые переменные dd-base внутри своей темы. Компоненты автоматически начнут использовать ваши значения.",
|
|
51
|
+
snippet: "/* styles.scss */\n[ddTheme='brand'] {\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n}"
|
|
52
|
+
},
|
|
53
|
+
use: {
|
|
54
|
+
text: "Компоненты библиотеки принимают AccentEnumColor для выбора семантических цветов из палитры. Ниже примеры с кнопками и информационными карточками.",
|
|
55
|
+
buttonsTitle: "Акцентные кнопки",
|
|
56
|
+
cardsTitle: "Информационные карточки"
|
|
57
|
+
}
|
|
58
|
+
};
|
|
14
59
|
var notifications = {
|
|
15
60
|
title: "Duck Dev UI Library - Уведомления",
|
|
16
61
|
quickDemo: "Показать уведомление",
|
|
@@ -430,6 +475,7 @@ var cardDoc = {
|
|
|
430
475
|
};
|
|
431
476
|
var ru = {
|
|
432
477
|
tabs: tabs,
|
|
478
|
+
quickStart: quickStart,
|
|
433
479
|
notifications: notifications,
|
|
434
480
|
slider: slider,
|
|
435
481
|
buttons: buttons,
|
|
@@ -443,5 +489,5 @@ var ru = {
|
|
|
443
489
|
cardDoc: cardDoc
|
|
444
490
|
};
|
|
445
491
|
|
|
446
|
-
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
|
|
447
|
-
//# sourceMappingURL=duck-dev-lib-ru-
|
|
492
|
+
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, notifications, quickStart, slider, svgComponent, tabs, tabsComponent };
|
|
493
|
+
//# sourceMappingURL=duck-dev-lib-ru-yPN1VRKz.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-yPN1VRKz.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|