Skip to content

Commit 4f9c595

Browse files
Tushar504Tushar504
committed
Merge branch 'main' of https://github.com/codex-team/notes.web into fix/redirect-when-note-is-not-found
2 parents 19c52c1 + 8296cff commit 4f9c595

45 files changed

Lines changed: 1006 additions & 157 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎codex-ui/dev/Playground.vue‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<template>
22
<div :class="$style.playground">
3-
<div :class="$style.header">
3+
<Navbar>
44
<a
55
:class="$style.logo"
66
href="/dev/index.html"
77
>
88
CodeX UI
99
</a>
10-
<Tabbar
11-
:class="$style.headerRight"
12-
:tabs="[{
13-
title: 'Figma',
14-
id: 'figma-button',
15-
picture: 'https://cdn.svgporn.com/logos/figma.svg',
16-
link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
17-
}]"
18-
/>
19-
</div>
10+
<template #right>
11+
<Tabbar
12+
:tabs="[{
13+
title: 'Figma',
14+
id: 'figma-button',
15+
picture: 'https://cdn.svgporn.com/logos/figma.svg',
16+
link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
17+
}]"
18+
/>
19+
</template>
20+
</Navbar>
2021
<div :class="$style.body">
2122
<div
2223
:class="$style.aside"
@@ -30,6 +31,7 @@
3031
</div>
3132
</div>
3233
<Popover />
34+
<Popup />
3335
</div>
3436
</template>
3537

@@ -38,9 +40,11 @@ import { computed } from 'vue';
3840
import {
3941
VerticalMenu,
4042
Tabbar,
41-
Popover
43+
Popover,
44+
Popup
4245
} from '../src/vue';
4346
import { useTheme } from '../src/vue/composables/useTheme';
47+
import { Navbar } from '../src/vue/layout/navbar';
4448
4549
import { useRouter, useRoute } from 'vue-router';
4650
@@ -94,6 +98,16 @@ const pages = computed(() => [
9498
},
9599
],
96100
},
101+
{
102+
title: 'Layout',
103+
items: [
104+
{
105+
title: 'Navbar',
106+
onActivate: () => router.push('/layout/navbar'),
107+
isActive: route.path === '/layout/navbar',
108+
},
109+
],
110+
},
97111
{
98112
title: 'Components',
99113
items: [
@@ -197,6 +211,16 @@ const pages = computed(() => [
197211
onActivate: () => router.push('/components/editor'),
198212
isActive: route.path === '/components/editor',
199213
},
214+
{
215+
title: 'Popup',
216+
onActivate: () => router.push('/components/popup'),
217+
isActive: route.path === '/components/popup',
218+
},
219+
{
220+
title: 'Confirm',
221+
onActivate: () => router.push('/components/confirm'),
222+
isActive: route.path === '/components/confirm',
223+
},
200224
],
201225
},
202226
]);
@@ -208,14 +232,6 @@ const pages = computed(() => [
208232
color: var(--base--text);
209233
min-height: 100%;
210234
}
211-
.header {
212-
display: grid;
213-
grid-template-columns: auto auto;
214-
align-items: center;
215-
justify-content: space-between;
216-
border-bottom: 1px solid var(--base--border);
217-
padding: var(--spacing-xs) var(--spacing-m);
218-
}
219235
220236
.logo {
221237
font-weight: 800;

‎codex-ui/dev/pages/components/Checkbox.vue‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,51 @@
22
<PageHeader>
33
Checkbox
44
<template #description>
5-
Best used for making selections, such as agreeing to terms, selecting multiple items from a list, or enabling options that require further action (like pressing a "Submit" button) to take effect.
5+
This component has multiple states, useful for selecting options in various scenarios.
66
</template>
77
</PageHeader>
8+
<div class="preview-list">
9+
<div class="preview-item">
10+
<span class="preview-label">Checked</span>
11+
<Checkbox :checked="true" />
12+
</div>
13+
<div class="preview-item">
14+
<span class="preview-label">Unchecked</span>
15+
<Checkbox :checked="false" />
16+
</div>
17+
<div class="preview-item">
18+
<span class="preview-label">Disabled</span>
19+
<Checkbox :checked="false" disabled />
20+
</div>
21+
<div class="preview-item">
22+
<span class="preview-label">Disabled + Checked</span>
23+
<Checkbox :checked="true" disabled />
24+
</div>
25+
</div>
826
</template>
927

1028
<script setup lang="ts">
1129
import PageHeader from '../../components/PageHeader.vue';
12-
30+
import { Checkbox } from '../../../src/vue';
1331
</script>
1432

1533
<style scoped>
34+
.preview-list {
35+
display: flex;
36+
flex-direction: column;
37+
gap: 12px;
38+
margin-top: 20px;
39+
}
40+
41+
.preview-item {
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
width: 240px;
46+
}
47+
48+
.preview-label {
49+
font-size: 16px;
50+
color: #888;
51+
}
1652
</style>

‎codex-ui/dev/pages/components/Confirm.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<PageHeader>
3+
Confirm
4+
<template #description>
5+
A component that allows you to accept or reject a message that appears
6+
</template>
7+
</PageHeader>
8+
<Button
9+
secondary
10+
data-dimensions="large"
11+
@click="show()"
12+
>
13+
Press here to open confirm window
14+
</Button>
15+
</template>
16+
17+
<script setup lang="ts">
18+
import PageHeader from '../../components/PageHeader.vue';
19+
import { Button, useConfirm } from '../../../src/vue';
20+
21+
const { confirm } = useConfirm();
22+
23+
async function show() {
24+
const res = await confirm(
25+
'CodeX',
26+
'Are you sure you want to delete the page?'
27+
);
28+
29+
if (res) {
30+
// eslint-disable-next-line no-console
31+
console.log('The confirm button was pressed');
32+
} else {
33+
// eslint-disable-next-line no-console
34+
console.log('The cancel button was pressed');
35+
}
36+
}
37+
38+
</script>
39+
40+
<style scoped>
41+
</style>

‎codex-ui/dev/pages/components/Popover.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div>
1616
<Button
1717
secondary
18-
@click="show($event.target, {vertically: 'below', horizontally: 'left'})"
18+
@click="!isOpen ? show($event.target, {vertically: 'below', horizontally: 'left'}) : hide()"
1919
>
2020
Open below left
2121
</Button>
@@ -82,7 +82,7 @@
8282
import PageHeader from '../../components/PageHeader.vue';
8383
import { usePopover, PopoverShowParams, Button, ContextMenu, Heading } from '../../../src/vue';
8484
85-
const { showPopover } = usePopover();
85+
const { showPopover, isOpen, hide } = usePopover();
8686
8787
/**
8888
* Example of working with Popover

‎codex-ui/dev/pages/components/Popup.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<PageHeader>
3+
Popup
4+
<template #description>
5+
A component that appears on top of other components. Can include any other component.
6+
</template>
7+
</PageHeader>
8+
<Button
9+
secondary
10+
data-dimensions="large"
11+
@click="show()"
12+
>
13+
Press here to open popup
14+
</Button>
15+
</template>
16+
17+
<script setup lang="ts">
18+
import PageHeader from '../../components/PageHeader.vue';
19+
import { Button, usePopup } from '../../../src/vue';
20+
import StubText from './StubText.vue';
21+
22+
const { showPopup } = usePopup();
23+
24+
function show(): void {
25+
showPopup({
26+
component: StubText,
27+
props: {},
28+
});
29+
}
30+
31+
</script>
32+
33+
<style scoped>
34+
</style>

‎codex-ui/dev/pages/components/Select.vue‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,51 @@
22
<PageHeader>
33
Select
44
<template #description>
5-
Component of the form that allows you to select one or more options from the list
5+
Component of the form that allows you to select one or more options from the list (currently one)
66
</template>
77
</PageHeader>
8+
<Select
9+
:items="options"
10+
:default-item="defaultItem"
11+
/>
812
</template>
913

1014
<script setup lang="ts">
1115
import PageHeader from '../../components/PageHeader.vue';
16+
import { ContextMenuItem, DefaultItem, Select } from '../../../src';
17+
18+
const defaultItem: DefaultItem = {
19+
title: 'Choose an option',
20+
onActivate: () => {},
21+
};
22+
const options: ContextMenuItem[] = [
23+
{
24+
type: 'default',
25+
title: 'Header',
26+
// eslint-disable-next-line no-console
27+
onActivate: console.log,
28+
},
29+
{
30+
title: 'Header 1',
31+
icon: 'H1',
32+
// eslint-disable-next-line no-console
33+
onActivate: console.log,
34+
},
35+
{
36+
type: 'default',
37+
title: 'Image',
38+
icon: 'Picture',
39+
// eslint-disable-next-line no-console
40+
onActivate: console.log,
41+
},
42+
{
43+
type: 'default',
44+
title: 'Text',
45+
icon: 'Text',
46+
// eslint-disable-next-line no-console
47+
onActivate: console.log,
48+
},
49+
];
1250
</script>
1351

1452
<style scoped>

‎codex-ui/dev/pages/components/StubText.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div>
3+
Popup can include any component
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
9+
</script>
10+
11+
<style scoped>
12+
</style>

‎codex-ui/dev/pages/layout/Navbar.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="navbar-wrapper">
3+
<Navbar>
4+
Left
5+
<template #right>
6+
Right
7+
</template>
8+
</Navbar>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { Navbar } from '../../../src/vue';
14+
</script>
15+
16+
<style scoped>
17+
.navbar-wrapper {
18+
min-height: 400px;
19+
position: relative;
20+
background-color: var(--base--bg-secondary);
21+
border-radius: var(--radius-m);
22+
border: 1px solid var(--base--border);
23+
24+
.navbar {
25+
z-index: 1;
26+
top: var(--layout-navbar-height);
27+
border-radius: var(--radius-m) var(--radius-m) 0 0;
28+
}
29+
}
30+
</style>

‎codex-ui/dev/routes.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ import VerticalMenu from './pages/components/VerticalMenu.vue';
2828
import ContextMenu from './pages/components/ContextMenu.vue';
2929
import Editor from './pages/components/Editor.vue';
3030
import ThemePreview from './pages/components/ThemePreview.vue';
31+
import Popup from './pages/components/Popup.vue';
32+
import Confirm from './pages/components/Confirm.vue';
33+
import Navbar from './pages/layout/Navbar.vue';
3134

3235
/**
3336
* Vue router routes list
@@ -145,6 +148,18 @@ const routes: RouteRecordRaw[] = [
145148
path: '/components/theme-preview',
146149
component: ThemePreview as Component,
147150
},
151+
{
152+
path: '/components/popup',
153+
component: Popup as Component,
154+
},
155+
{
156+
path: '/components/confirm',
157+
component: Confirm as Component,
158+
},
159+
{
160+
path: '/layout/navbar',
161+
component: Navbar as Component,
162+
},
148163
];
149164

150165
export default routes;

‎codex-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727
},
2828
"devDependencies": {
29-
"@codexteam/icons": "^0.3.0",
29+
"@codexteam/icons": "^0.3.3",
3030
"@editorjs/header": "^2.8.6",
3131
"@editorjs/nested-list": "^1.4.2",
3232
"@types/node": "^20.11.15",

0 commit comments

Comments
 (0)