From 549afcde5004b2078d49aeafa8e1e915f62a13df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 17 Dec 2024 13:33:25 +0500
Subject: [PATCH] feat: completed with 9 initial components (bundle size:
248.7KB)
---
src/App.vue | 44 +++++++++++--
src/assets/components.css | 4 ++
src/common/interfaces/common.ts | 2 +
src/common/interfaces/componentsProps.ts | 6 +-
.../components/Button/Button.stories.ts | 5 +-
.../components/Divider/Divider.stories.ts | 6 +-
.../components/Drawer/Drawer.stories.ts | 7 +--
src/stories/components/Drawer/Drawer.vue | 3 +-
src/stories/components/Modal/Modal.stories.ts | 5 +-
src/stories/components/Modal/Modal.vue | 4 +-
.../SelectButton/SelectButton.stories.ts | 9 +--
.../components/Slider/Slider.stories.ts | 5 +-
.../ToggleSwitch/ToggleSwitch.stories.ts | 5 +-
.../components/ToggleSwitch/ToggleSwitch.vue | 10 +--
src/stories/components/TreeList/TreeItems.vue | 33 +++++-----
.../components/TreeList/TreeList.stories.ts | 5 +-
.../ButtonStorybook.stories.ts | 63 -------------------
.../ButtonStorybook.vue | 49 ---------------
.../buttonStorybook.css | 30 ---------
.../ExampleStorybookHeader/Header.stories.ts | 48 --------------
.../ExampleStorybookHeader/Header.vue | 53 ----------------
.../ExampleStorybookHeader/header.css | 32 ----------
22 files changed, 85 insertions(+), 343 deletions(-)
delete mode 100644 src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts
delete mode 100644 src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue
delete mode 100644 src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css
delete mode 100644 src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts
delete mode 100644 src/stories/components/examples/ExampleStorybookHeader/Header.vue
delete mode 100644 src/stories/components/examples/ExampleStorybookHeader/header.css
diff --git a/src/App.vue b/src/App.vue
index 5a68697..5838a25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -281,18 +281,51 @@ const options: ISBOption[] = [
const visible = ref(false);
const onClose = () => console.log('close!');
const value = ref();
+const active = ref(false);
+const sliderValue = ref(1);
</script>
<template>
- {{ value }}
<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
nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam
- repellat saepe temporibus?</Modal
+ repellat saepe temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
+ explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil
+ officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe
+ temporibus?</Modal
>
- <MenuDial :items="[{ label: 'First' }]" />
+ <MenuDial
+ v-model:active="active"
+ theme="sky"
+ direction="right"
+ :items="[
+ {
+ label: 'font-family',
+ theme: 'green',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ textStyle: 'bold',
+ },
+ {
+ label: 'Second',
+ theme: 'red',
+ textStyle: 'italic',
+ },
+ ]"
+ >
+ <template #1IconBefore>
+ <AnchorLinkIcon size="20" color="white" />
+ </template>
+ <template #2IconBefore>
+ <CrossIcon color="white" />
+ </template>
+ <template #2IconAfter>
+ <CrossIcon color="white" />
+ </template>
+ </MenuDial>
<Slider
+ v-model:value="sliderValue"
:options="sliderOptions"
orientation="vertical"
width="400"
@@ -330,7 +363,10 @@ const value = ref();
recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque
blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio optio
reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit
- amet, consectetur adipisicing elit.
+ amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
+ nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas
+ quisquam repellat saepe temporibus?
</p>
<template #footer>
pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template
diff --git a/src/assets/components.css b/src/assets/components.css
index f3d23e7..6ad19a0 100644
--- a/src/assets/components.css
+++ b/src/assets/components.css
@@ -11,3 +11,7 @@
width: 8px;
height: 8px;
}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: #888;
+}
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 47caefd..7ff7e70 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -23,6 +23,8 @@ export type TSize = 'small' | 'medium' | 'large' | 'huge';
export type TTextStyle = 'bold' | 'italic';
+export type TDirection = 'up' | 'right' | 'down' | 'left';
+
export type TPosition = 'top' | 'right' | 'bottom' | 'left';
export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 9b5e58b..8d663ab 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -1,5 +1,6 @@
import type {
TBorder,
+ TDirection,
TExpandedPosition,
TIcons,
TPosition,
@@ -32,11 +33,14 @@ export interface IMDProps {
label: string;
theme?: string;
textStyle?: TTextStyle;
+ link?: string;
+ linkBlank?: boolean;
onClick?: () => void;
}[];
size?: TSize;
theme?: string;
- direction?: TPosition;
+ direction?: TDirection;
+ // direction?: TDirection | 'circle';
}
export interface ISliderProps {
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index 694b585..bdbacf4 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -80,10 +80,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Button>;
export default meta;
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
index 86b93fd..b7a6350 100644
--- a/src/stories/components/Divider/Divider.stories.ts
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -37,11 +37,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- // onClick: fn(),
- },
+ args: {},
} satisfies Meta<typeof Divider>;
export default meta;
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index f29ee2c..cd0c0de 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import Drawer from './Drawer.vue';
import { iconsSet } from '@/common/constants/icons';
-import { fn } from '@storybook/test';
const meta: Meta = {
title: 'Components/Drawer',
@@ -48,11 +47,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClose: fn(),
- },
+ args: {},
} satisfies Meta<typeof Drawer>;
export default meta;
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index 0208cdd..913796f 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -46,7 +46,7 @@ const drawerWidth = computed(() => {
drawerBackgroundOpened: visible,
},
]"
- @click.prevent="dismissible ? (visible = false) : false"
+ @click.prevent="dismissible ? (visible = false) : ''"
></section>
<section
:style="`color: ${textColor}; background-color: ${themeColor}`"
@@ -150,6 +150,7 @@ const drawerWidth = computed(() => {
flex: 1 1 auto;
overflow: auto;
margin: 10px;
+ padding-right: 10px;
}
.drawerFooter {
padding: 10px 10px 0 10px;
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
index 4f57493..b23779a 100644
--- a/src/stories/components/Modal/Modal.stories.ts
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -57,10 +57,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Modal>;
export default meta;
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index fec46a3..1ebe15a 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -85,8 +85,8 @@ document.addEventListener('keydown', onKeydown);
position: fixed;
top: -100%;
left: -100%;
- width: 250vw;
- height: 250vh;
+ width: 200vw;
+ height: 200vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: -50;
opacity: 0;
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 9157794..0e7f8c8 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from '@storybook/vue3';
import SelectButton from './SelectButton.vue';
-import { fn } from '@storybook/test';
const meta: Meta = {
title: 'Components/SelectButton',
@@ -16,7 +15,7 @@ const meta: Meta = {
},
argTypes: {
options: {
- control: 'array',
+ control: 'object',
},
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
rounded: { control: 'boolean' },
@@ -62,11 +61,7 @@ const meta: Meta = {
},
disabled: { control: 'boolean' },
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClick: fn(),
- },
+ args: {},
} satisfies Meta<typeof SelectButton>;
export default meta;
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
index 78f3ed0..d465efa 100644
--- a/src/stories/components/Slider/Slider.stories.ts
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -63,10 +63,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Slider>;
export default meta;
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
index 4083f33..c003e86 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -59,10 +59,7 @@ const meta: Meta = {
darkNegative: { control: 'boolean' },
disabled: { control: 'boolean' },
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof ToggleSwitch>;
export default meta;
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index c61184a..503feb5 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -77,7 +77,7 @@ const sizes = computed(() => {
<span
:style="`background-color: ${disabled ? '#e1e7f1 !important' : themeColor}; border-radius: ${sizes.borderRadius}px;`"
:class="[
- 'activeBackground',
+ 'background',
{
inactiveBackground: !active && !disabled,
},
@@ -94,20 +94,20 @@ const sizes = computed(() => {
.switcher {
position: relative;
}
-.activeBackground {
+.background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- transition: background-color 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
.inactiveBackground {
background-color: v-bind(inactiveColor) !important;
- transition: background-color 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
-.switcher:hover .inactiveBackground {
+.switcher:hover .background {
filter: brightness(90%);
}
.switcherCircle {
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
index f3cad67..2dd704c 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -48,13 +48,6 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
"
size="17"
/>
- <component
- :is="iconsSet[item.iconBefore]"
- v-if="item.iconBefore"
- :color="convert500ThemeToColor(item.iconColor)"
- style="min-width: 17px"
- size="17"
- />
<a
:href="item.link"
:target="item.linkBlank ? '_blank' : '_self'"
@@ -76,15 +69,20 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
emit('onClick', item.link);
}
"
- >{{ item.label }}</a
- >
- <component
- :is="iconsSet[item.iconAfter]"
- v-if="item.iconAfter"
- :color="convert500ThemeToColor(item.iconColor)"
- style="min-width: 17px"
- size="17"
- />
+ ><component
+ :is="iconsSet[item.iconBefore]"
+ v-if="item.iconBefore"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17" />
+ <span>{{ item.label }}</span
+ ><component
+ :is="iconsSet[item.iconAfter]"
+ v-if="item.iconAfter"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17"
+ /></a>
</section>
<section class="children">
<TreeItems
@@ -107,7 +105,8 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
background-color: v-bind(themeColor);
}
.label {
- display: inline-block;
+ display: flex;
+ gap: 5px;
position: relative;
padding: 4px 5px;
background-color: v-bind(themeColor);
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index 51b0fda..9be416a 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -39,10 +39,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof TreeList>;
export default meta;
diff --git a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts b/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts
deleted file mode 100644
index 26aad4a..0000000
--- a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Button from './ButtonStorybook.vue';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta = {
- title: 'Examples/Button',
- component: Button,
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- argTypes: {
- size: { control: 'select', options: ['small', 'medium', 'large'] },
- backgroundColor: { control: 'color' },
- },
- args: {
- primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClick: fn(),
- },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
-};
-
-export const Secondary: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-};
-
-export const Large: Story = {
- args: {
- label: 'Button',
- size: 'large',
- },
-};
-
-export const Small: Story = {
- args: {
- label: 'Button',
- size: 'small',
- },
-};
-
-export const DefaultButton: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-};
diff --git a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue b/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue
deleted file mode 100644
index 0a7be63..0000000
--- a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
- <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script lang="ts" setup>
-import './buttonStorybook.css';
-import { computed } from 'vue';
-
-const props = withDefaults(
- defineProps<{
- /**
- * The label of the button
- */
- label: string;
- /**
- * primary or secondary button
- */
- primary?: boolean;
- /**
- * size of the button
- */
- size?: 'small' | 'medium' | 'large';
- /**
- * background color of the button
- */
- backgroundColor?: string;
- }>(),
- { primary: false },
-);
-
-const emit = defineEmits<{
- (e: 'click', id: number): void;
-}>();
-
-const classes = computed(() => ({
- 'storybook-button': true,
- 'storybook-button--primary': props.primary,
- 'storybook-button--secondary': !props.primary,
- [`storybook-button--${props.size || 'medium'}`]: true,
-}));
-
-const style = computed(() => ({
- backgroundColor: props.backgroundColor,
-}));
-
-const onClick = () => {
- emit('click', 1);
-};
-</script>
diff --git a/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css b/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css
deleted file mode 100644
index 94d674b..0000000
--- a/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- display: inline-block;
- cursor: pointer;
- border: 0;
- border-radius: 3em;
- font-weight: 700;
- line-height: 1;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
- background-color: #1ea7fd;
- color: white;
-}
-.storybook-button--secondary {
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
- background-color: transparent;
- color: #333;
-}
-.storybook-button--small {
- padding: 10px 16px;
- font-size: 12px;
-}
-.storybook-button--medium {
- padding: 11px 20px;
- font-size: 14px;
-}
-.storybook-button--large {
- padding: 12px 24px;
- font-size: 16px;
-}
diff --git a/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts b/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts
deleted file mode 100644
index 6f29a1a..0000000
--- a/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MyHeader from './Header.vue';
-
-const meta: Meta = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/configure/#configure-story-loading
- * to learn how to generate automatic titles
- */
- title: 'Examples/Header',
- component: MyHeader,
- render: (args: unknown) => ({
- components: { MyHeader },
- setup() {
- return { args };
- },
- template: '<my-header :user="args.user" />',
- }),
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
- args: {
- onLogin: fn(),
- onLogout: fn(),
- onCreateAccount: fn(),
- },
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
-} satisfies Meta<typeof MyHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
- args: {
- user: {
- name: 'Jane Doe',
- },
- },
-};
-
-export const LoggedOut: Story = {
- args: {
- user: null,
- },
-};
diff --git a/src/stories/components/examples/ExampleStorybookHeader/Header.vue b/src/stories/components/examples/ExampleStorybookHeader/Header.vue
deleted file mode 100644
index 342b8b6..0000000
--- a/src/stories/components/examples/ExampleStorybookHeader/Header.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
- <header>
- <div class="storybook-header">
- <div>
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fill-rule="evenodd">
- <path
- d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
- fill="#FFF"
- />
- <path
- d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
- fill="#555AB9"
- />
- <path
- d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
- fill="#91BAF8"
- />
- </g>
- </svg>
- <h1>Acme</h1>
- </div>
- <div>
- <span class="welcome" v-if="user"
- >Welcome, <b>{{ user.name }}</b
- >!</span
- >
- <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
- <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
- <my-button
- primary
- size="small"
- @click="$emit('createAccount')"
- label="Sign up"
- v-if="!user"
- />
- </div>
- </div>
- </header>
-</template>
-
-<script lang="ts" setup>
-import './header.css';
-import MyButton from '@stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue';
-
-defineProps<{ user: { name: string } | null }>();
-
-defineEmits<{
- (event: 'createAccount'): void;
- (event: 'login'): void;
- (event: 'logout'): void;
-}>();
-</script>
diff --git a/src/stories/components/examples/ExampleStorybookHeader/header.css b/src/stories/components/examples/ExampleStorybookHeader/header.css
deleted file mode 100644
index 5efd46c..0000000
--- a/src/stories/components/examples/ExampleStorybookHeader/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header h1 {
- display: inline-block;
- vertical-align: top;
- margin: 6px 0 6px 10px;
- font-weight: 700;
- font-size: 20px;
- line-height: 1;
-}
-
-.storybook-header button + button {
- margin-left: 10px;
-}
-
-.storybook-header .welcome {
- margin-right: 10px;
- color: #333;
- font-size: 14px;
-}
--
GitLab