feat: init 'Toast'

src/common/interfaces/componentsProp.ts

@@ -118,3 +118,5 @@ export interface ISliderOptions {
   color?: TThemeColor;
   darknessColor?: TDarkness;
 }
+
+export type TToastType = 'success' | 'info' | 'warn' | 'error';

src/common/interfaces/componentsProps.ts

@@ -19,6 +19,7 @@ import type {
   ISliderOptions,
   ITableColumn,
   ITreeItem,
+  TToastType,
 } from '@interfaces/componentsProp';
 
 export interface ITableProps {
@@ -288,6 +289,15 @@ export interface ITSProps {
   disabled?: boolean;
 }
 
+export interface IToastProps {
+  type?: TToastType;
+  theme?: TThemeColor;
+  size?: TSize;
+  text?: string;
+  header?: string;
+  icon?: TIcon;
+}
+
 export interface ITagProps {
   value?: string;
   size?: TSize;

src/components/Toast/Toast.stories.ts

+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Toast from './Toast.vue';
+
+const meta: Meta = {
+  title: 'Components/Toast',
+  component: Toast,
+  tags: ['small_data'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component is used to categorize content. Can be used with icons.',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    active: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    theme: 'red',
+    value: 'Dangerous',
+    iconRight: 'Age18Icon',
+  },
+};

src/components/Toast/Toast.vue

+<script setup lang="ts">
+import type { IToastProps } from '@interfaces/componentsProps';
+import { computed } from 'vue';
+import { convertThemeToColor } from '@helpers/common';
+import type { TToastType } from '@interfaces/componentsProp';
+
+const props = withDefaults(defineProps<IToastProps>(), {
+  type: 'success',
+  text: 'This is a toast about success.',
+  size: 'normal',
+  theme: 'green',
+});
+
+const typeToHeader: Record<TToastType, string> = {
+  success: 'Success Message',
+  info: 'Info Message',
+  warn: 'Warn Message',
+  error: 'Error Message',
+};
+
+const header = computed<string>(() => props.header ?? typeToHeader[props.type]);
+
+const color = computed(() => convertThemeToColor(props.theme, '400'));
+const whiteOrBlack = computed(() => (props.theme === 'white' ? 'black' : 'white'));
+const backgroundColor = computed(() =>
+  convertThemeToColor(props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme, '700'),
+);
+const borderColor = computed(() => convertThemeToColor(props.theme, '500'));
+const fontSize = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '16px';
+  if (size === 'large') return '20px';
+  if (size === 'huge') return '24px';
+  return '12px';
+});
+const padding = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '5px 11px';
+  if (size === 'large') return '6px 13px';
+  if (size === 'huge') return '7px 16px';
+  return '3px 7px';
+});
+</script>
+
+<template>
+  <section class="toast-container">
+    <h3 class="toast-header" :style="`font-size: calc(${fontSize} + 4px)`">{{ header }}</h3>
+    <p class="toast-text">{{ text }}</p>
+  </section>
+</template>
+
+<style scoped>
+.toast-container {
+  position: absolute;
+  padding: v-bind(padding);
+  border: 1px solid v-bind(borderColor);
+  border-radius: 5px;
+  background-color: v-bind(backgroundColor);
+}
+.toast-header {
+  color: v-bind(color);
+  margin-bottom: 5px;
+}
+.toast-text {
+  color: v-bind(whiteOrBlack);
+  font-size: v-bind(fontSize);
+}
+</style>

src/postponed/Cropper/Cropper.stories.ts

-// import type { Meta, StoryObj } from '@storybook/vue3';
-//
-// import Cropper from './Cropper.vue';
-//
-// const meta: Meta = {
-//   title: 'Components/Cropper',
-//   component: Cropper,
-//   tags: ['pick'],
-//   parameters: {
-//     docs: {
-//       description: {
-//         component: 'A component to pick color. Can be with button.',
-//       },
-//     },
-//   },
-//   argTypes: {
-//     menuPosition: { control: 'select', options: ['top', 'right', 'bottom', 'left'] },
-//     src: { control: 'text' },
-//     width: { control: 'number' },
-//     height: { control: 'number' },
-//   },
-// } satisfies Meta<typeof Cropper>;
-//
-// export default meta;
-//
-// type Story = StoryObj<typeof meta>;
-//
-// export const Simple: Story = {
-//   args: {
-//     src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFRQjM-wM_nXMA03AGDXgJK3VeX7vtD3ctA&s',
-//   },
-// };
-//
-// export const Full: Story = {
-//   args: {
-//     buttonProps: {
-//       label: 'Pick color!',
-//       theme: 'red',
-//       textStyle: 'bold',
-//     },
-//
-//     size: 'large',
-//     sameButtonColor: true,
-//   },
-// };
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Cropper from './Cropper.vue';
+
+const meta: Meta = {
+  title: 'Components/Cropper',
+  component: Cropper,
+  tags: ['pick'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component to pick color. Can be with button.',
+      },
+    },
+  },
+  argTypes: {
+    menuPosition: { control: 'select', options: ['top', 'right', 'bottom', 'left'] },
+    src: { control: 'text' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+} satisfies Meta<typeof Cropper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFRQjM-wM_nXMA03AGDXgJK3VeX7vtD3ctA&s',
+  },
+};
+
+export const Full: Story = {
+  args: {
+    buttonProps: {
+      label: 'Pick color!',
+      theme: 'red',
+      textStyle: 'bold',
+    },
+
+    size: 'large',
+    sameButtonColor: true,
+  },
+};