diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 657a1b80ee9ff6812a340b117a507dd94429fb66..2634a89b15420e1afdb034488ce756e2064e35c2 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="./storybook.ico">
+ <link rel="icon" href="./storybook.svg">
<title>Storybook</title>
</head>
<body>
diff --git a/README.md b/README.md
index 1976a8ed277d950da9acdc8eb9c84dac9ece3bf4..0866e44be1e22b1cafecab695411dbabea27feb7 100644
--- a/README.md
+++ b/README.md
@@ -7,34 +7,49 @@
## СпиÑок компонентов:
- TreeList;
- MenuDial;
+- Popup;
- Slider;
- Drawer;
- Modal;
- SelectButton;
- Button;
- ToggleSwitch;
-- Divider;
-
-### ÐаÑтройка окружениÑ
+- Divider.
+---
+## ÐžÐ±Ñ‰Ð°Ñ Ð¸Ð½Ñ„Ð¾Ñ€Ð¼Ð°Ñ†Ð¸Ñ
+### Components count: 10
+### Bundle size: 254.6KB
+---
+## Важные моменты при разработке
+### Общее начало шаблона Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½Ñ‚Ð¾Ð²:
+```
+const props = withDefaults(defineProps<IProps>(), {
+
+});
+const emit = defineEmits(['']);
+const visible = defineModel('');
+watch(, () => {});
+const computed = computed(() => );
+```
+- I*Componentname*Props вмеÑто ```IProps```;
+- watchers поÑле defineModel;
+- далее - computeds;
+- затем - функции (handlers).
+### ПоÑле ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¸ÐºÐ¾Ð½ÐºÐ¸:
+1. Добавить иконку в iconsSet (src/common/constants/icons);
+2. Добавить иконку в ÑоответÑтвующий маÑÑив в App.vue.
+---
+## ÐаÑтройка окружениÑ
+### УÑтановка завиÑимоÑтей:
```sh
yarn
```
-
-### ПроÑмотр ÑущеÑтвующих иконок в виде ÑпиÑка и теÑтирование компонентов
-
+### ПроÑмотр ÑущеÑтвующих иконок в виде ÑпиÑка и теÑтирование компонентов:
```sh
yarn dev
```
-
-### Проверка типов, компилÑÑ†Ð¸Ñ Ð¸ Ð¼Ð¸Ð½Ð¸Ð¼Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð´Ð»Ñ production
-
+### Проверка типов, компилÑÑ†Ð¸Ñ Ð¸ Ð¼Ð¸Ð½Ð¸Ð¼Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð´Ð»Ñ production:
```sh
yarn build
-```
-
-## Важные моменты при разработке
-
-ПоÑле ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¸ÐºÐ¾Ð½ÐºÐ¸:
-1. Добавить иконку в iconsSet (src/common/constants/icons);
-2. Добавить иконку в ÑоответÑтвующий маÑÑив в App.vue.
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/index.html b/index.html
index 0ab5bb43e96dbdfb7b413c47a657a2f1c7ba23be..dcb9d19a8580197a41dd5101adaf4029f306cff7 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html lang="">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="/storybook.ico">
+ <link rel="icon" href="/storybook.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Storybook</title>
</head>
diff --git a/public/storybook.ico b/public/storybook.ico
deleted file mode 100644
index 690ee543d1b7a8d727252f9d278e2538ad02a61f..0000000000000000000000000000000000000000
Binary files a/public/storybook.ico and /dev/null differ
diff --git a/public/storybook.svg b/public/storybook.svg
new file mode 100644
index 0000000000000000000000000000000000000000..63075c1a4ee643871a251e462eafc757b020ece1
--- /dev/null
+++ b/public/storybook.svg
@@ -0,0 +1 @@
+<svg height="319" preserveAspectRatio="xMidYMid" viewBox="0 0 256 319" width="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m9.87245893 293.324145-9.86099779-262.7509283c-.3256701-8.6776325 6.32802782-16.0318249 14.99485846-16.5735018l223.4880694-13.96800436c8.821799-.55136241 16.420248 6.15315109 16.971611 14.97495016.020773.3323713.031167.6653101.031167.99833v286.3136053c0 8.839012-7.165435 16.004447-16.004448 16.004447-.239453 0-.478875-.005374-.718087-.016117l-213.6270715-9.594673c-8.3199296-.373675-14.9627611-7.06565-15.27510157-15.388108z"/><mask id="b" fill="#fff"><use fill="#fff" xlink:href="#a"/></mask></defs><use fill="#ff4785" xlink:href="#a"/><path d="m188.665358 39.126973 1.526545-36.71548766 30.691632-2.41148534 1.32222 37.8634126c.046016 1.317734-.984915 2.423272-2.302649 2.4692883-.564237.0197036-1.117199-.1611913-1.560697-.5105633l-11.83568-9.323726-14.013155 10.6298328c-1.050497.7968662-2.548081.5912577-3.344947-.4592396-.335442-.4422072-.506327-.9874722-.483269-1.5420318zm-39.251655 80.853336c0 6.226666 41.941975 3.242387 47.572316-1.131416 0-42.4021104-22.751978-64.6837519-64.414689-64.6837519-41.6627118 0-65.0056495 22.6283131-65.0056495 56.5707999 0 59.116499 79.7796605 60.247915 79.7796605 92.493278 0 9.05133-4.432203 14.425558-14.18305 14.425558-12.70565 0-17.728814-6.488863-17.137853-28.551479 0-4.786197-48.4587575-6.278336-49.9361587 0-3.7620647 53.465572 29.5480226 68.887096 67.6649717 68.887096 36.935028 0 65.89209-19.687271 65.89209-55.326883 0-63.359309-80.961582-61.662185-80.961582-93.058985 0-12.7284338 9.455368-14.425558 15.069492-14.425558 5.909604 0 16.546892 1.0415999 15.660452 24.801341z" fill="#fff" mask="url(#b)"/></svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5838a25512df06c7ee27db0df1a554e7fdd2ef17..ad430e4672618f21260f5d39f38b7d20b0481f42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -108,9 +108,10 @@ import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
import Button from '@stories/components/Button/Button.vue';
import Slider from '@stories/components/Slider/Slider.vue';
-import type { ISBOption } from '@interfaces/componentsProp';
+import type { ISBOption, ISliderOptions } from '@interfaces/componentsProp';
import Modal from '@stories/components/Modal/Modal.vue';
import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
+import Popup from '@stories/components/Popup/Popup.vue';
const gentleIcons = [
Age18Icon,
@@ -218,7 +219,7 @@ const gentleIcons = [
UserIcon,
];
const visibleDrawer = ref(true);
-const sliderOptions = [
+const sliderOptions: ISliderOptions[] = [
{
label: 0,
value: 0,
@@ -282,10 +283,32 @@ const visible = ref(false);
const onClose = () => console.log('close!');
const value = ref();
const active = ref(false);
+const popupActive = ref(false);
+const popupActive2 = ref(false);
const sliderValue = ref(1);
</script>
<template>
+ <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
+ <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
+ <Button
+ @click="
+ () => {
+ popupActive = false;
+ visible = true;
+ }
+ "
+ label="Открыть модальное окно"
+ />
+ </Popup>
+ <Popup v-model:active="popupActive2" theme="sky"
+ >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat
+ soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,
+ reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et
+ minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup
+ >
+
<Modal v-model:visible="visible" theme="red" @onClose="onClose"
><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
diff --git a/src/assets/main.css b/src/assets/main.css
index 7b91d0d87864745b54750912cdbdcbabe74610e1..21b455af4b67650a3cd5ba195973116951804069 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -82,6 +82,15 @@
--teal-700: #0f766e;
--teal-800: #115e59;
--teal-900: #134e4a;
+ --cyan-100: #cffafe;
+ --cyan-200: #a5f3fc;
+ --cyan-300: #67e8f9;
+ --cyan-400: #22d3ee;
+ --cyan-500: #06b6d4;
+ --cyan-600: #0891b2;
+ --cyan-700: #0e7490;
+ --cyan-800: #155e75;
+ --cyan-900: #164e63;
--sky-100: #e0f2fe;
--sky-200: #bae6fd;
--sky-300: #7dd3fc;
diff --git a/src/common/helpers/colors.ts b/src/common/helpers/colors.ts
index 5ec5279ec225be5b688403176bbad63de75f1cbf..74a597b1c55e6d42832c1b0daf29978a9bd1b3e6 100644
--- a/src/common/helpers/colors.ts
+++ b/src/common/helpers/colors.ts
@@ -1,13 +1,106 @@
-export const convert300ThemeToColor = (theme: string | undefined) => {
+import type { TDarkness, TThemeColor } from '@interfaces/common';
+
+export const convertWhiteOrBlackToColor = (theme: 'white' | 'black', darkness: TDarkness) => {
+ if (theme === 'white') {
+ if (darkness === 500 || darkness === 400 || darkness === 600) return '#cbd5e1';
+ if (darkness === 300 || darkness === 700) return '#94a3b8';
+ if (darkness === 200 || darkness === 800) return '#f1f5f9';
+ if (darkness === 100 || darkness === 900) return '#e2e8f0';
+ }
+ if (darkness === 500 || darkness === 400 || darkness === 600) return '#475569';
+ if (darkness === 300 || darkness === 700) return '#64748b';
+ if (darkness === 200 || darkness === 800) return '#94a3b8';
+ if (darkness === 100 || darkness === 900) return '#cbd5e1';
+};
+
+export const convert100ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#9ca3af';
+ case 'blue':
+ return '#dbeafe';
+ case 'sky':
+ return '#e0f2fe';
+ case 'cyan':
+ return '#cffafe';
+ case 'teal':
+ return '#ccfbf1';
+ case 'lime':
+ return '#ecfccb';
+ case 'green':
+ return '#dcfce7';
+ case 'yellow':
+ return '#fef9c3';
+ case 'amber':
+ return '#fef3c7';
+ case 'orange':
+ return '#ffedd5';
+ case 'pink':
+ return '#fce7f3';
+ case 'fuchsia':
+ return '#fae8ff';
+ case 'purple':
+ return '#f3e8ff';
+ case 'indigo':
+ return '#e0e7ff';
+ case 'rose':
+ return '#ffe4e6';
+ case 'red':
+ return '#fee2e2';
+ case 'black':
+ return '#4b5563';
+ }
+};
+
+export const convert200ThemeToColor = (theme: TThemeColor) => {
switch (theme) {
case 'white':
- return '#cbd5e1';
- case 'slate':
- return '#cbd5e1';
+ return '#d1d5db';
+ case 'blue':
+ return '#bfdbfe';
+ case 'sky':
+ return '#bae6fd';
+ case 'cyan':
+ return '#a5f3fc';
+ case 'teal':
+ return '#99f6e4';
+ case 'lime':
+ return '#d9f99d';
+ case 'green':
+ return '#bbf7d0';
+ case 'yellow':
+ return '#fef08a';
+ case 'amber':
+ return '#fde68a';
+ case 'orange':
+ return '#fed7aa';
+ case 'pink':
+ return '#fbcfe8';
+ case 'fuchsia':
+ return '#f5d0fe';
+ case 'purple':
+ return '#e9d5ff';
+ case 'indigo':
+ return '#c7d2fe';
+ case 'rose':
+ return '#fecdd3';
+ case 'red':
+ return '#fecaca';
+ case 'black':
+ return '#374151';
+ }
+};
+
+export const convert300ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#e5e7eb';
case 'blue':
return '#93c5fd';
case 'sky':
return '#7dd3fc';
+ case 'cyan':
+ return '#67e8f9';
case 'teal':
return '#5eead4';
case 'lime':
@@ -33,20 +126,59 @@ export const convert300ThemeToColor = (theme: string | undefined) => {
case 'red':
return '#fca5a5';
case 'black':
- return '#334155';
+ return '#1f2937';
+ }
+};
+
+export const convert400ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#f3f4f6';
+ case 'blue':
+ return '#60a5fa';
+ case 'sky':
+ return '#38bdf8';
+ case 'cyan':
+ return '#22d3ee';
+ case 'teal':
+ return '#2dd4bf';
+ case 'lime':
+ return '#a3e635';
+ case 'green':
+ return '#4ade80';
+ case 'yellow':
+ return '#facc15';
+ case 'amber':
+ return '#fbbf24';
+ case 'orange':
+ return '#fb923c';
+ case 'pink':
+ return '#f472b6';
+ case 'fuchsia':
+ return '#e879f9';
+ case 'purple':
+ return '#c084fc';
+ case 'indigo':
+ return '#818cf8';
+ case 'rose':
+ return '#fb7185';
+ case 'red':
+ return '#f87171';
+ case 'black':
+ return '#111827';
}
};
-export const convert500ThemeToColor = (theme: string | undefined) => {
+export const convert500ThemeToColor = (theme: TThemeColor) => {
switch (theme) {
case 'white':
return '#ffffff';
- case 'slate':
- return '#64748b';
case 'blue':
return '#3b82f6';
case 'sky':
return '#0ea5e9';
+ case 'cyan':
+ return '#06b6d4';
case 'teal':
return '#14b8a6';
case 'lime':
@@ -74,19 +206,96 @@ export const convert500ThemeToColor = (theme: string | undefined) => {
case 'black':
return '#000000';
}
- return '#000000';
};
-export const convert800ThemeToColor = (theme: string | undefined) => {
+export const convert600ThemeToColor = (theme: TThemeColor) => {
switch (theme) {
case 'white':
- return '#ffffff';
- case 'slate':
- return '#1e293b';
+ return '#f3f4f6';
+ case 'blue':
+ return '#2563eb';
+ case 'sky':
+ return '#0284c7';
+ case 'cyan':
+ return '#0891b2';
+ case 'teal':
+ return '#0d9488';
+ case 'lime':
+ return '#65a30d';
+ case 'green':
+ return '#16a34a';
+ case 'yellow':
+ return '#ca8a04';
+ case 'amber':
+ return '#d97706';
+ case 'orange':
+ return '#ea580c';
+ case 'pink':
+ return '#db2777';
+ case 'fuchsia':
+ return '#c026d3';
+ case 'purple':
+ return '#9333ea';
+ case 'indigo':
+ return '#4f46e5';
+ case 'rose':
+ return '#e11d48';
+ case 'red':
+ return '#dc2626';
+ case 'black':
+ return '#111827';
+ }
+};
+
+export const convert700ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#e5e7eb';
+ case 'blue':
+ return '#1d4ed8';
+ case 'sky':
+ return '#0369a1';
+ case 'cyan':
+ return '#0e7490';
+ case 'teal':
+ return '#0f766e';
+ case 'lime':
+ return '#4d7c0f';
+ case 'green':
+ return '#15803d';
+ case 'yellow':
+ return '#a16207';
+ case 'amber':
+ return '#b45309';
+ case 'orange':
+ return '#c2410c';
+ case 'pink':
+ return '#be185d';
+ case 'fuchsia':
+ return '#a21caf';
+ case 'purple':
+ return '#7e22ce';
+ case 'indigo':
+ return '#4338ca';
+ case 'rose':
+ return '#be123c';
+ case 'red':
+ return '#b91c1c';
+ case 'black':
+ return '#1f2937';
+ }
+};
+
+export const convert800ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#d1d5db';
case 'blue':
return '#1e40af';
case 'sky':
return '#075985';
+ case 'cyan':
+ return '#155e75';
case 'teal':
return '#115e59';
case 'lime':
@@ -112,6 +321,45 @@ export const convert800ThemeToColor = (theme: string | undefined) => {
case 'red':
return '#991b1b';
case 'black':
- return '#000000';
+ return '#374151';
+ }
+};
+
+export const convert900ThemeToColor = (theme: TThemeColor) => {
+ switch (theme) {
+ case 'white':
+ return '#9ca3af';
+ case 'blue':
+ return '#1e3a8a';
+ case 'sky':
+ return '#0c4a6e';
+ case 'cyan':
+ return '#164e63';
+ case 'teal':
+ return '#134e4a';
+ case 'lime':
+ return '#365314';
+ case 'green':
+ return '#14532d';
+ case 'yellow':
+ return '#713f12';
+ case 'amber':
+ return '#78350f';
+ case 'orange':
+ return '#7c2d12';
+ case 'pink':
+ return '#831843';
+ case 'fuchsia':
+ return '#701a75';
+ case 'purple':
+ return '#581c87';
+ case 'indigo':
+ return '#312e81';
+ case 'rose':
+ return '#881337';
+ case 'red':
+ return '#7f1d1d';
+ case 'black':
+ return '#4b5563';
}
};
diff --git a/src/common/helpers/common.ts b/src/common/helpers/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e4ec1fb1e325d7be8c315c1699dd4a7bae8a6c7a
--- /dev/null
+++ b/src/common/helpers/common.ts
@@ -0,0 +1,28 @@
+import type { TDarkness, TThemeColor } from '@interfaces/common';
+import {
+ convert100ThemeToColor,
+ convert200ThemeToColor,
+ convert300ThemeToColor,
+ convert400ThemeToColor,
+ convert500ThemeToColor,
+ convert600ThemeToColor,
+ convert700ThemeToColor,
+ convert800ThemeToColor,
+ convert900ThemeToColor,
+} from '@helpers/colors';
+
+export const convertThemeToColor = (
+ theme: TThemeColor,
+ darkness: TDarkness | number = 500,
+): string => {
+ if (darkness === 500) return convert500ThemeToColor(theme);
+ if (darkness === 100) return convert100ThemeToColor(theme);
+ if (darkness === 200) return convert200ThemeToColor(theme);
+ if (darkness === 300) return convert300ThemeToColor(theme);
+ if (darkness === 400) return convert400ThemeToColor(theme);
+ if (darkness === 600) return convert600ThemeToColor(theme);
+ if (darkness === 700) return convert700ThemeToColor(theme);
+ if (darkness === 800) return convert800ThemeToColor(theme);
+ if (darkness === 900) return convert900ThemeToColor(theme);
+ return convert500ThemeToColor(theme);
+};
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 7ff7e70be1d1b1a5f75dae47b36135593e55b09c..6a854a8546c0e1db7c9e8395aa85c5a8349a5106 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,13 +1,17 @@
import type { iconsSet } from '@/common/constants/icons';
+export type TIcons = keyof typeof iconsSet;
+
export type TThemeColor =
| 'white'
- | 'slate'
| 'blue'
| 'sky'
+ | 'cyan'
| 'teal'
+ | 'lime'
| 'green'
| 'yellow'
+ | 'amber'
| 'orange'
| 'pink'
| 'fuchsia'
@@ -17,6 +21,8 @@ export type TThemeColor =
| 'red'
| 'black';
+export type TDarkness = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
export type TThemeColorNoWhite = Exclude<TThemeColor, 'white'>;
export type TSize = 'small' | 'medium' | 'large' | 'huge';
@@ -30,5 +36,3 @@ export type TPosition = 'top' | 'right' | 'bottom' | 'left';
export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
export type TBorder = 'solid' | 'dashed' | 'dotted';
-
-export type TIcons = keyof typeof iconsSet;
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 1f0e3c306f006ef5c98664440d53df2ecb17db4a..aa30d5cc7f900cdd6d0838434de588ec099fac20 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
export interface ITreeItem {
label: string;
@@ -11,22 +11,38 @@ export interface ITreeItem {
iconAfter?: TIcons;
iconColor?: TThemeColor;
children?: ITreeItem[];
+ darknessColor?: TDarkness;
+ darknessIconColor?: TDarkness;
isLinkClicked?: boolean;
}
+export interface IMDItemProps {
+ label: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
+ textStyle?: TTextStyle;
+ link?: string;
+ linkBlank?: boolean;
+ onClick?: () => void;
+}
+
export interface ISBOption {
label: string;
value?: never;
color?: TThemeColor;
activeColor?: TThemeColor;
backgroundColor?: TThemeColor;
+ darknessColor?: TDarkness;
+ darknessActiveColor?: TDarkness;
+ darknessBackgroundColor?: TDarkness;
isLabelHidden?: boolean;
iconPosition?: TPosition;
textStyle?: TTextStyle;
}
export interface ISliderOptions {
- label: string | number;
+ label: string | number | boolean;
value?: string | number;
- color?: string;
+ color?: TThemeColor;
+ darknessColor?: TDarkness;
}
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8d663ab5a251804b593200f44f06cc24c09cd124..c80425a2476a812c47e7e6ea0cf3909185e1fa0c 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -1,5 +1,6 @@
import type {
TBorder,
+ TDarkness,
TDirection,
TExpandedPosition,
TIcons,
@@ -9,13 +10,19 @@ import type {
TThemeColor,
TThemeColorNoWhite,
} from '@interfaces/common';
-import type { ISBOption, ISliderOptions, ITreeItem } from '@interfaces/componentsProp';
+import type {
+ IMDItemProps,
+ ISBOption,
+ ISliderOptions,
+ ITreeItem,
+} from '@interfaces/componentsProp';
export interface ITLProps {
items: ITreeItem[];
maxWidth?: number;
expand?: boolean;
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
}
export interface ITIProps {
@@ -24,21 +31,15 @@ export interface ITIProps {
label: string;
}[];
items: ITreeItem[];
- textColor: TThemeColor;
+ textColor: string;
themeColor: string;
}
export interface IMDProps {
- items: {
- label: string;
- theme?: string;
- textStyle?: TTextStyle;
- link?: string;
- linkBlank?: boolean;
- onClick?: () => void;
- }[];
+ items: IMDItemProps[];
size?: TSize;
- theme?: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
direction?: TDirection;
// direction?: TDirection | 'circle';
}
@@ -51,6 +52,8 @@ export interface ISliderProps {
size?: TSize;
theme?: TThemeColor;
backgroundColor?: TThemeColor;
+ darknessTheme?: TDarkness;
+ darknessBackgroundColor?: TDarkness;
orientation?: 'horizontal' | 'vertical';
isSmooth?: boolean;
options?: ISliderOptions[];
@@ -60,6 +63,7 @@ export interface IDrawerProps {
position?: TPosition;
width?: string | number;
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
modal?: boolean;
dismissible?: boolean;
closeIcon?: TIcons;
@@ -69,6 +73,7 @@ export interface IDrawerProps {
export interface IModalProps {
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
width?: string;
height?: string;
position?: TExpandedPosition;
@@ -77,12 +82,23 @@ export interface IModalProps {
headerDivider?: boolean;
}
+export interface IPopupProps {
+ parentSelector?: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
+ maxWidth?: string;
+ maxHeight?: string;
+ padding?: string;
+}
+
export interface ISBProps {
options: ISBOption[];
size?: TSize;
rounded?: boolean;
activeBackgroundColor?: TThemeColor;
border?: TThemeColor;
+ darknessActiveBackgroundColor?: TDarkness;
+ darknessBorder?: TDarkness;
disabled?: boolean;
}
@@ -92,17 +108,21 @@ export interface IButtonProps {
textStyle?: TTextStyle;
iconPos?: TPosition;
width?: string | number;
+ iconOnly?: boolean;
theme?: TThemeColor;
textColor?: TThemeColor;
border?: TThemeColor;
- iconOnly?: boolean;
+ darknessTheme?: TDarkness;
+ darknessTextColor?: TDarkness;
+ darknessBorder?: TDarkness;
}
export interface ITSProps {
size?: TSize;
theme?: TThemeColorNoWhite;
negativeTheme?: TThemeColor;
- darkNegative?: boolean;
+ darknessTheme?: TDarkness;
+ darknessNegativeTheme?: TDarkness;
disabled?: boolean;
}
@@ -110,4 +130,5 @@ export interface IDividerProps {
height?: number;
type?: TBorder;
color?: TThemeColor;
+ darknessColor?: TDarkness;
}
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index bdbacf43e8e2de1c35b2a953afda4b6278444e16..337bc5b1959683a5f5d4316d63398cfb94b239c0 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -19,13 +19,19 @@ const meta: Meta = {
textStyle: { control: 'select', options: ['bold', 'italic'] },
iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
width: { control: 'text' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ darknessTextColor: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ darknessBorder: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -43,9 +49,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -63,9 +69,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index cef4d5580cf028204bf2d801c0f90ad95706f798..45df8f532968ef355a996fd60520ba2e0b81c2e3 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -1,18 +1,25 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { IButtonProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IButtonProps>(), {
size: 'medium',
theme: 'white',
textColor: 'black',
iconPos: 'left',
+ darknessTheme: 500,
+ darknessTextColor: 500,
+ darknessBorder: 500,
});
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const textColorComputed = computed(() => convert500ThemeToColor(props.textColor));
-const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColorComputed = computed(() =>
+ convertThemeToColor(props.textColor, props.darknessTextColor),
+);
+const borderColor = computed(() =>
+ !props.border ? '' : convertThemeToColor(props.border, props.darknessBorder),
+);
const textSize = computed(() => {
switch (props.size) {
case 'small':
@@ -80,7 +87,7 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
.button {
position: relative;
border-radius: 7px;
- display: flex;
+ display: inline-flex;
gap: 8px;
justify-content: center;
align-items: center;
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
index b7a635072f60e90f550c45dec65c27d0e215c77e..960e6f5f6dc13d5c776adc7972a760077f541861 100644
--- a/src/stories/components/Divider/Divider.stories.ts
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -16,13 +16,14 @@ const meta: Meta = {
argTypes: {
height: { control: 'number' },
type: { control: 'select', options: ['solid', 'dashed', 'dotted'] },
+ darknessColor: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
color: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Divider/Divider.vue b/src/stories/components/Divider/Divider.vue
index 54164cd1f5d957799855c0581e2c182949ce2cea..b195e9787e2fb0bfb080d4ade4a33f38c7b8187f 100644
--- a/src/stories/components/Divider/Divider.vue
+++ b/src/stories/components/Divider/Divider.vue
@@ -1,14 +1,15 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { IDividerProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IDividerProps>(), {
height: 1,
type: 'solid',
color: 'black',
+ darknessColor: 500,
});
-const colorConverted = computed(() => convert500ThemeToColor(props.color));
+const colorConverted = computed(() => convertThemeToColor(props.color, props.darknessColor));
</script>
<template>
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index cd0c0de42a74321505e837c0b8647ea3ddfb567c..9cfdc30f2e9388d1f8bba6a268af8dc1d08e989d 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -26,13 +26,14 @@ const meta: Meta = {
closeIcon: { control: 'select', options: Object.keys(iconsSet) },
headerDivider: { control: 'boolean' },
footerDivider: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index 913796fe566dac8f8657b5fd6dfebc04f98ec446..1656f88449f538bd1caa188228d3a03381d8d7db 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -1,8 +1,9 @@
<script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
import { iconsSet } from '@/common/constants/icons';
-import { convert500ThemeToColor, convert300ThemeToColor } from '@helpers/colors';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
import type { IDrawerProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IDrawerProps>(), {
visible: false,
@@ -11,25 +12,37 @@ const props = withDefaults(defineProps<IDrawerProps>(), {
modal: true,
dismissible: true,
theme: 'white',
+ darknessTheme: 500,
closeIcon: 'CrossIcon',
headerDivider: false,
footerDivider: false,
});
+const body = document.querySelector('body')!;
const emit = defineEmits(['onClose']);
const visible = defineModel<boolean>('visible', {
set(value) {
if (!value) {
+ body.style.overflow = 'auto';
emit('onClose');
}
return value;
},
});
-
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+watch(visible, () => {
+ if (visible.value) {
+ body.style.overflow = 'hidden';
+ }
+});
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const textColor = computed(() => {
- if (!props.theme || props.theme === 'white') return 'black';
- return 'white';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
});
const drawerWidth = computed(() => {
if (+props.width < 200) return '200px';
@@ -46,7 +59,7 @@ const drawerWidth = computed(() => {
drawerBackgroundOpened: visible,
},
]"
- @click.prevent="dismissible ? (visible = false) : ''"
+ @pointerdown.stop="dismissible ? (visible = false) : ''"
></section>
<section
:style="`color: ${textColor}; background-color: ${themeColor}`"
@@ -108,7 +121,7 @@ const drawerWidth = computed(() => {
justify-content: space-between;
padding: 20px;
transition: transform ease-out 0.2s;
- border-right: 2px solid #b1b1b1;
+ border-right: 2px solid v-bind(scrollAndBorderColor);
}
.drawerVertical {
width: 100vw !important;
@@ -158,7 +171,7 @@ const drawerWidth = computed(() => {
}
.divider {
height: 2px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
.divider-header {
position: absolute;
@@ -176,6 +189,6 @@ const drawerWidth = computed(() => {
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
</style>
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/stories/components/MenuDial/MenuDial.stories.ts
index a91196a0ff882e4feb5fa05f244d7dd8cdd7f20a..1fb7c18897b54f40c6f7a28eadfe68a9958371b9 100644
--- a/src/stories/components/MenuDial/MenuDial.stories.ts
+++ b/src/stories/components/MenuDial/MenuDial.stories.ts
@@ -16,14 +16,15 @@ const meta: Meta = {
argTypes: {
items: { control: 'object' },
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
- direction: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+ direction: { control: 'select', options: ['up', 'down', 'left', 'right'] },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -79,3 +80,51 @@ export const Full: Story = {
theme: 'sky',
},
};
+
+export const Down: Story = {
+ args: {
+ items: [
+ {
+ label: 'font-family link',
+ theme: 'green',
+ darknessTheme: 700,
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ },
+ {
+ label: 'Second',
+ theme: 'green',
+ darknessTheme: 800,
+ textStyle: 'italic',
+ },
+ ],
+ theme: 'red',
+ darknessTheme: 700,
+ direction: 'down',
+ },
+};
+
+export const Huge: Story = {
+ args: {
+ items: [
+ {
+ label: 'font-family link',
+ theme: 'green',
+ darknessTheme: 700,
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ },
+ {
+ label: 'Second',
+ theme: 'green',
+ darknessTheme: 800,
+ textStyle: 'italic',
+ },
+ ],
+
+ theme: 'red',
+ darknessTheme: 700,
+ direction: 'right',
+ size: 'medium',
+ },
+};
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
index 5b541296d9ac86f579c62cbecc79291ca8788bc7..933d5f10acd814d950c314f15f6411eaf655405b 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -1,21 +1,29 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { IMDProps } from '@interfaces/componentsProps';
-import { convert500ThemeToColor } from '@helpers/colors';
import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import { convertThemeToColor } from '@helpers/common';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
const props = withDefaults(defineProps<IMDProps>(), {
theme: 'white',
+ darknessTheme: 500,
size: 'medium',
direction: 'right',
});
const active = defineModel('active');
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const textColor = computed(() => {
- if (props.theme === 'white') return '#000000';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
return '#ffffff';
});
+const borderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const elementsSize = computed(() => {
switch (props.size) {
case 'small':
@@ -34,7 +42,7 @@ const menuListStyles = computed(() => {
case 'up':
return `flex-direction: column-reverse; transform: translateY(-${active.value ? (0.5 + props.items.length) * elementsSize.value + 15 : 1.5 * elementsSize.value}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
case 'down':
- return `flex-direction: column; transform: translateY(${active.value ? 25 : -20}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
+ return `flex-direction: column; transform: translateY(${active.value ? elementsSize.value / 1.75 : -20}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
}
return `transform: translateY(-${elementsSize.value / 2}px) translateX(${active.value ? elementsSize.value + 10 : -20}px)`;
});
@@ -60,7 +68,7 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
<template>
<section class="menuContainer">
<button
- :style="`border: ${theme === 'white' ? '2px solid black' : ''}; background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${active ? 'rotate(135deg)' : ''};`"
+ :style="`border: 2px solid ${borderColor}; background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${active ? 'rotate(135deg)' : ''};`"
class="menuButton"
@click.prevent="active = !active"
>
@@ -80,8 +88,8 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
<li
v-for="(item, index) of items"
:key="item.label"
- :style="`height: ${elementsSize}px; background-color: ${convert500ThemeToColor(item.theme ?? 'white')};
- color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'};`"
+ :style="`height: ${elementsSize}px; background-color: ${convertThemeToColor(item.theme ?? 'white', item.darknessTheme ?? 500)};
+ color: ${item.theme === 'white' || ((item.darknessTheme ?? 500) <= 600 && item.theme !== 'black') ? 'black' : 'white'}; border-color: ${borderColor};`"
class="menuElement"
@click="
() => {
@@ -147,7 +155,7 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
justify-content: center;
align-items: center;
padding: 10px;
- border: 1px solid white;
+ border: 1px solid v-bind(borderColor);
border-radius: 5px;
user-select: none;
cursor: pointer;
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
index b23779a6d548c112db0372571eb43b2e7a0ba5c3..d5c6d088ee01c41cef282a826d7c525236e9969c 100644
--- a/src/stories/components/Modal/Modal.stories.ts
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -36,13 +36,14 @@ const meta: Meta = {
'bottomRight',
],
},
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index 1ebe15a779132e088c5cd524a2edfab02dd9d1ed..5c8e74c84cda3196d5a1961bde1c3acb04ce8449 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -1,32 +1,45 @@
<script setup lang="ts">
-import { computed } from 'vue';
-import { convert300ThemeToColor, convert500ThemeToColor } from '@helpers/colors';
+import { computed, watch } from 'vue';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
import type { IModalProps } from '@interfaces/componentsProps';
import { iconsSet } from '@/common/constants/icons';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IModalProps>(), {
visible: false,
dismissible: false,
theme: 'white',
+ darknessTheme: 500,
width: '30%',
height: '30%',
headerDivider: false,
closeIcon: 'CrossIcon',
});
+const body = document.querySelector('body')!;
const emit = defineEmits(['onClose']);
const visible = defineModel('visible', {
set(value) {
if (!value) {
+ body.style.overflow = 'auto';
emit('onClose');
}
return value;
},
});
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+watch(visible, () => {
+ if (visible.value) {
+ body.style.overflow = 'hidden';
+ }
+});
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const textColor = computed(() => {
- if (!props.theme) return '#000000';
- if (props.theme === 'white') return '#000000';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
return '#ffffff';
});
const onKeydown = (event: KeyboardEvent) => {
@@ -101,7 +114,7 @@ document.addEventListener('keydown', onKeydown);
min-width: 250px;
min-height: 100px;
padding: 20px;
- border: 2px solid gray;
+ border: 2px solid v-bind(scrollAndBorderColor);
border-radius: 15px;
opacity: 0;
transform: scale(0.5);
@@ -145,7 +158,7 @@ document.addEventListener('keydown', onKeydown);
}
.divider {
height: 2px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
position: absolute;
left: 20px;
top: 60px;
@@ -153,7 +166,7 @@ document.addEventListener('keydown', onKeydown);
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
.toTop {
top: 10px !important;
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/stories/components/Popup/Popup.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f515edf5eec5eeff23da78a4e8709dc62ee20d8
--- /dev/null
+++ b/src/stories/components/Popup/Popup.stories.ts
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Popup from './Popup.vue';
+import Button from '@stories/components/Button/Button.vue';
+
+const meta: Meta = {
+ title: 'Components/Popup',
+ component: Popup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used as a Popup. Can be used with icon.',
+ },
+ },
+ },
+ argTypes: {
+ default: { control: 'text' },
+ parentSelector: { control: 'text' },
+ maxWidth: { control: 'text' },
+ maxHeight: { control: 'text' },
+ padding: { control: 'text' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Popup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+ args: {
+ default:
+ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat\n soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,\n reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing\n elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et\n minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!',
+ maxWidth: '200px',
+ maxHeight: '100px',
+ },
+};
+
+export const Full: Story = {
+ render: (args) => ({
+ components: { Popup, Button },
+ setup() {
+ return { args };
+ },
+ template:
+ '<Popup v-bind="args"><Button label="Создать" theme="sky" /><p style="display: inline-block; padding: 0 30px"></p><Button label="Удалить" theme="red" /></Popup>',
+ }),
+ args: {
+ theme: 'black',
+ },
+};
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e199b8bf68ba7f8cb3dc6feac125e6195724e5ca
--- /dev/null
+++ b/src/stories/components/Popup/Popup.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { IPopupProps } from '@interfaces/componentsProps';
+import { computed, ref } from 'vue';
+import { convertThemeToColor } from '@helpers/common';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
+
+const props = withDefaults(defineProps<IPopupProps>(), {
+ parentSelector: 'body',
+ theme: 'white',
+ border: 'black',
+ maxWidth: '300px',
+ maxHeight: '100px',
+ padding: '5px',
+ darknessTheme: 500,
+ darknessBorder: 500,
+});
+const active = defineModel<boolean>('active');
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
+const textColor = computed(() => {
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
+});
+
+const top = ref();
+const left = ref();
+const isContainer = ref();
+
+const container = document.querySelector(props.parentSelector);
+if (container) {
+ container.addEventListener('pointerdown', (event: Event) => {
+ const e = event as PointerEvent;
+ if (e.button === 2) {
+ isContainer.value = true;
+ if (!active.value) active.value = true;
+ top.value = e.clientY;
+ left.value = e.clientX;
+ e.stopPropagation();
+ }
+ });
+ container.addEventListener('contextmenu', (e) => {
+ if (isContainer.value) e.preventDefault();
+ });
+}
+
+document.addEventListener('pointerdown', (e) => {
+ if (e.button === 0) active.value = false;
+});
+</script>
+
+<template>
+ <section
+ oncontextmenu="return false"
+ id="popup"
+ @pointerdown.stop=""
+ :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}; color: ${textColor}`"
+ >
+ <div
+ :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto; padding-right: 5px`"
+ >
+ <slot />
+ <p v-if="!$slots.default" style="background-color: black; color: white; padding: 10px">
+ Popup
+ </p>
+ </div>
+ </section>
+</template>
+
+<style scoped>
+#popup {
+ position: fixed;
+ transition: opacity 0.2s ease-in-out;
+ background-color: v-bind(themeColor);
+ border: 1px solid v-bind(scrollAndBorderColor);
+ border-radius: 5px;
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: v-bind(scrollAndBorderColor);
+}
+</style>
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 0e7f8c88b58e34fb32461fe14996c6aa1e4046c4..03c49b65d7883ee633b42c030bc37a55ba4c8e3c 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -19,13 +19,21 @@ const meta: Meta = {
},
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
rounded: { control: 'boolean' },
+ darknessActiveBackgroundColor: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ darknessBorder: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
activeBackgroundColor: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -43,9 +51,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -94,6 +102,7 @@ export const LargeFull: Story = {
},
{
label: 'Second',
+ color: 'red',
activeColor: 'blue',
backgroundColor: 'yellow',
},
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 2f3761b9bd5185f7e58378dde2e5d3083b450b4b..43ba74b88fcf51fd18af44e5e949d8859d088879 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -1,20 +1,25 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ISBProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ISBProps>(), {
size: 'medium',
- border: 'black',
activeBackgroundColor: 'sky',
+ darknessActiveBackgroundColor: 500,
+ darknessBorder: 500,
});
const emit = defineEmits(['onClick']);
const value = defineModel<never>('value');
const activeBackgroundColorComputed = computed(() =>
- props.activeBackgroundColor ? convert500ThemeToColor(props.activeBackgroundColor) : '',
+ props.activeBackgroundColor
+ ? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
+ : '',
+);
+const borderColor = computed(() =>
+ !props.border ? '' : convertThemeToColor(props.border, props.darknessBorder),
);
-const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
const textSize = computed(() => {
switch (props.size) {
case 'small':
@@ -79,7 +84,7 @@ const buttonHeight = computed(() => {
"
>
<span
- :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convert500ThemeToColor(item.backgroundColor ?? 'white')}`"
+ :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convertThemeToColor(item.backgroundColor ?? 'white', item.darknessBackgroundColor ?? 500)}`"
:class="[
'background',
{
@@ -92,7 +97,7 @@ const buttonHeight = computed(() => {
></span>
<span
v-if="!item.isLabelHidden"
- :style="`color: ${value === item.value || value === item.label ? item.activeColor : convert500ThemeToColor(item.color ?? 'black')}; font-size: ${textSize}`"
+ :style="`color: ${(item.value && value === item.value) || value === item.label ? convertThemeToColor(item.activeColor ?? 'black', item.darknessActiveColor ?? 500) : convertThemeToColor(item.color ?? 'black', item.darknessColor ?? 500)}; font-size: ${textSize}`"
:class="[
'text',
{
@@ -102,7 +107,8 @@ const buttonHeight = computed(() => {
]"
>{{ item.label ?? index }}</span
>
- <div
+ <span
+ v-if="$slots[`${index + 1}Icon`]"
:class="[
'icon',
{
@@ -111,7 +117,7 @@ const buttonHeight = computed(() => {
]"
>
<slot :name="`${index + 1}Icon`" />
- </div>
+ </span>
</button>
</div>
</template>
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
index d465efa91f311e07eb90f277f984c23d426e6824..98211f2625ee0e4d7cf24e51f7ca6bd07cd89363 100644
--- a/src/stories/components/Slider/Slider.stories.ts
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -22,13 +22,18 @@ const meta: Meta = {
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
orientation: { control: 'select', options: ['horizontal', 'vertical'] },
isSmooth: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ darknessBackgroundColor: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -46,9 +51,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
index 47b6fcb0f58697288f2c9fe7b1c9735831101f41..5d57dc4665a8ce4d3d7383dde7672fac000329ac 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/stories/components/Slider/Slider.vue
@@ -1,13 +1,15 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ISliderProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ISliderProps>(), {
width: '100',
size: 'medium',
theme: 'sky',
backgroundColor: 'black',
+ darknessTheme: 500,
+ darknessBackgroundColor: 500,
});
const value = defineModel('value');
const optionValue = ref(
@@ -57,8 +59,10 @@ const widthHalf = computed(() => `${Math.floor(+props.width / 2)}px`);
const sliderHeight = computed(() => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2.5)}px`);
const sliderBorderRadius = computed(() => (props.isSmooth ? sliderHeight.value : '0%'));
const sliderButtonBorderRadius = computed(() => (props.isSmooth ? '50%' : '0%'));
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const themeBackground = computed(() => convert500ThemeToColor(props.backgroundColor));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const themeBackground = computed(() =>
+ convertThemeToColor(props.backgroundColor, props.darknessBackgroundColor),
+);
const marksListPadding = computed(
() => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2)}px`,
);
@@ -86,9 +90,9 @@ const marksListPadding = computed(
<ul class="marksList" :style="`width: ${width ?? 200}px`">
<li
v-for="option of options"
- :key="option.label"
+ :key="String(option.label)"
class="mark"
- :style="`color: ${convert500ThemeToColor(option?.color) ?? 'white'}; font-size: ${optionsFontSize}`"
+ :style="`color: ${convertThemeToColor(option.color ?? 'black', option.darknessColor ?? 500) ?? 'white'}; font-size: ${optionsFontSize}`"
>
{{ option.label }}
</li>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
index c003e865f3bf2d5596f363b3e9cc938ca8fe645c..0fe5c11ae933e77809b58d63ddd8c5708316640f 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -20,9 +20,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -40,9 +40,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -56,7 +56,11 @@ const meta: Meta = {
'black',
],
},
- darkNegative: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ darknessNegativeTheme: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
disabled: { control: 'boolean' },
},
args: {},
@@ -68,14 +72,12 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
- darkNegative: true,
active: false,
},
};
export const SmallLight: Story = {
args: {
- darkNegative: false,
negativeTheme: 'yellow',
theme: 'red',
size: 'small',
@@ -84,7 +86,6 @@ export const SmallLight: Story = {
export const Large: Story = {
args: {
- darkNegative: true,
negativeTheme: 'purple',
theme: 'green',
size: 'large',
@@ -93,7 +94,6 @@ export const Large: Story = {
export const Huge: Story = {
args: {
- darkNegative: true,
negativeTheme: 'blue',
theme: 'orange',
size: 'huge',
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 503feb5e515694159db475cda77619426bfc28df..7be5d7a2c590b7efa22c78de42a236fa33bd5982 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,21 +1,20 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor, convert800ThemeToColor } from '@helpers/colors';
import type { ITSProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ITSProps>(), {
size: 'medium',
theme: 'sky',
negativeTheme: 'black',
- darkNegative: true,
+ darknessTheme: 500,
+ darknessNegativeTheme: 500,
});
const active = defineModel<boolean>('active');
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const inactiveColor = computed(() =>
- props.darkNegative
- ? convert800ThemeToColor(props.negativeTheme)
- : convert500ThemeToColor(props.negativeTheme),
+ convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme),
);
const sizes = computed(() => {
if (!props?.size) {
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
index 2dd704c4cfb2560631e267385cfc108865434864..bbd871b10bdf209ed5af91be1822d7c923faeccf 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { iconsSet } from '@/common/constants/icons';
import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ITIProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
defineProps<ITIProps>();
const emit = defineEmits(['toggleIsOpen', 'onClick']);
@@ -44,7 +44,9 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
},
]"
:color="
- item.color && item.isTriangleToColor ? convert500ThemeToColor(item.color) : textColor
+ item.color && item.isTriangleToColor
+ ? convertThemeToColor(item.color, item.darknessColor ?? 500)
+ : textColor
"
size="17"
/>
@@ -59,7 +61,7 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
isDarkerOnHover: item.link,
},
]"
- :style="`color: ${item.color ? convert500ThemeToColor(item.color) : textColor}`"
+ :style="`color: ${item.color ? convertThemeToColor(item.color, item.darknessColor ?? 500) : textColor}`"
@click="
() => {
item.isLinkClicked = true;
@@ -72,14 +74,14 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
><component
:is="iconsSet[item.iconBefore]"
v-if="item.iconBefore"
- :color="convert500ThemeToColor(item.iconColor)"
+ :color="convertThemeToColor(item.iconColor ?? 'black', item.darknessIconColor ?? 500)"
style="min-width: 17px"
size="17" />
<span>{{ item.label }}</span
><component
:is="iconsSet[item.iconAfter]"
v-if="item.iconAfter"
- :color="convert500ThemeToColor(item.iconColor)"
+ :color="convertThemeToColor(item.iconColor ?? 'black', item.darknessIconColor ?? 500)"
style="min-width: 17px"
size="17"
/></a>
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index 9be416a753c45db4cd877b3094f1b0cce4ea8165..8c2165ecb4c990be2adb2cf2c68f47b98658680d 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -18,13 +18,14 @@ const meta: Meta = {
items: { control: 'object' },
maxWidth: { control: 'number' },
expand: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -124,6 +125,8 @@ export const Full: Story = {
color: 'red',
iconAfter: 'DiceIcon',
iconColor: 'red',
+ darknessColor: 400,
+ darknessIconColor: 400,
children: [
{
label: '1-1-1-1',
@@ -160,5 +163,6 @@ export const Full: Story = {
expand: true,
theme: 'black',
+ darknessTheme: 800,
},
};
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/stories/components/TreeList/TreeList.vue
index 061fe645ac17c74418f517f072fb0937093991bc..d4b1f5c18708ede90ee8edba616befa6b7a534ab 100644
--- a/src/stories/components/TreeList/TreeList.vue
+++ b/src/stories/components/TreeList/TreeList.vue
@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { ITreeItem } from '@interfaces/componentsProp';
-import { convert500ThemeToColor } from '@helpers/colors';
import TreeItems from '@stories/components/TreeList/TreeItems.vue';
import type { ITLProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
interface IStateItem {
isOpen: boolean;
@@ -13,14 +13,15 @@ interface IStateItem {
const props = withDefaults(defineProps<ITLProps>(), {
theme: 'white',
maxWidth: 300,
+ darknessTheme: 500,
});
const emit = defineEmits(['onClick']);
const items = computed(() => props.items);
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const textColor = computed(() => {
- if (!props.theme) return 'black';
- if (props.theme === 'white') return 'black';
- return 'white';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
});
const state = ref<IStateItem[]>([]);