Skip to content

Commit 26ec2ef

Browse files
cizil-keyvaluecizil-keyvalue
authored
feat: Integrate core sdk functionality
1 parent e0b85f2 commit 26ec2ef

21 files changed

+1020
-286
lines changed

‎custom.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
declare module '*.svg' {
2-
const src: string;
3-
export default src;
4-
}
2+
const src: string;
3+
export default src;
4+
}

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@
3030
"homepage": "https://github.com/KeyValueSoftwareSystems/siren-vue-inbox#readme",
3131
"devDependencies": {
3232
"@types/node": "^20.2.5",
33+
"@types/pubsub-js": "^1.8.6",
3334
"@typescript-eslint/parser": "^7.5.0",
3435
"@vitejs/plugin-vue": "^5.0.4",
3536
"@vue/eslint-config-airbnb": "^8.0.0",
3637
"@vue/eslint-config-prettier": "^9.0.0",
3738
"@vue/eslint-config-typescript": "^13.0.0",
3839
"eslint-plugin-vue": "^9.24.0",
3940
"path": "^0.12.7",
41+
"pubsub-js": "^1.9.4",
4042
"typescript": "^5.3.3",
4143
"vite": "^5.1.6",
4244
"vite-plugin-css-injected-by-js": "^3.4.0",
@@ -50,5 +52,8 @@
5052
"package.json",
5153
"README.md",
5254
"license"
53-
]
55+
],
56+
"dependencies": {
57+
"test_notification": "1.0.20"
58+
}
5459
}

‎src/components/BellIcon.vue‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
<template>
2-
<div :class="className" :style="{ width: size, height: size }">
3-
<svg :width="size" :height="size" viewBox="0 0 24 24" :fill="fill" xmlns="http://www.w3.org/2000/svg">
4-
<path
5-
d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
6-
:stroke="stroke" stroke-width="1.2973" stroke-linecap="round" stroke-linejoin="round" />
7-
</svg>
8-
</div>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg
4+
:width="size"
5+
:height="size"
6+
viewBox="0 0 24 24"
7+
:fill="fill"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
12+
:stroke="stroke"
13+
stroke-width="1.2973"
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
/>
17+
</svg>
18+
</div>
919
</template>
1020

1121
<script setup lang="ts">
1222
withDefaults(
13-
defineProps<{
14-
fill?: string;
15-
className?: string;
16-
size?: string;
17-
stroke?: string;
18-
}>(),
19-
{
20-
className: '',
21-
fill: 'none',
22-
size: '24',
23-
stroke: '#232326'
24-
}
23+
defineProps<{
24+
fill?: string;
25+
className?: string;
26+
size?: string;
27+
stroke?: string;
28+
}>(),
29+
{
30+
className: '',
31+
fill: 'none',
32+
size: '24',
33+
stroke: '#232326'
34+
}
2535
);
2636
</script>

‎src/components/ClearAllIcon.vue‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
<template>
2-
<div :class="className" :style="{ width: size, height: size }">
3-
<svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4-
<path
5-
d="M5 12C5 12.5523 5.44772 13 6 13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H6C5.44772 11 5 11.4477 5 12ZM3 16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16C17 15.4477 16.5523 15 16 15H4C3.44772 15 3 15.4477 3 16ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9H20C20.5523 9 21 8.55228 21 8C21 7.44772 20.5523 7 20 7H8Z"
6-
:fill="fill" />
7-
</svg>
8-
</div>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg
4+
:width="size"
5+
:height="size"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M5 12C5 12.5523 5.44772 13 6 13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H6C5.44772 11 5 11.4477 5 12ZM3 16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16C17 15.4477 16.5523 15 16 15H4C3.44772 15 3 15.4477 3 16ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9H20C20.5523 9 21 8.55228 21 8C21 7.44772 20.5523 7 20 7H8Z"
12+
:fill="fill"
13+
/>
14+
</svg>
15+
</div>
916
</template>
1017

1118
<script setup lang="ts">
1219
withDefaults(
13-
defineProps<{
14-
fill?: string;
15-
className?: string;
16-
size?: string;
17-
}>(),
18-
{
19-
className: '',
20-
fill: '#667185',
21-
size: '24'
22-
}
20+
defineProps<{
21+
fill?: string;
22+
className?: string;
23+
size?: string;
24+
}>(),
25+
{
26+
className: '',
27+
fill: '#667185',
28+
size: '24'
29+
}
2330
);
2431
</script>

‎src/components/CloseIcon.vue‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
<template>
2-
<div :class="className" :style="{ width: size, height: size }">
3-
<svg :width="size" :height="size" viewBox="0 0 20 20" :fill="fill" xmlns="http://www.w3.org/2000/svg">
4-
<path d="M5 15L15 5M5 5L15 15" :stroke="stroke" stroke-width="2" stroke-linecap="round"
5-
stroke-linejoin="round" />
6-
</svg>
7-
8-
</div>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg
4+
:width="size"
5+
:height="size"
6+
viewBox="0 0 20 20"
7+
:fill="fill"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M5 15L15 5M5 5L15 15"
12+
:stroke="stroke"
13+
stroke-width="2"
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
/>
17+
</svg>
18+
</div>
919
</template>
1020

1121
<script setup lang="ts">
1222
withDefaults(
13-
defineProps<{
14-
fill?: string;
15-
className?: string;
16-
size?: string;
17-
stroke?: string;
18-
}>(),
19-
{
20-
fill: 'none',
21-
size: '20',
22-
stroke: '#98A2B3',
23-
className: ''
24-
}
23+
defineProps<{
24+
fill?: string;
25+
className?: string;
26+
size?: string;
27+
stroke?: string;
28+
}>(),
29+
{
30+
fill: 'none',
31+
size: '20',
32+
stroke: '#98A2B3',
33+
className: ''
34+
}
2535
);
2636
</script>

‎src/components/ErrorWindow.vue‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
<template>
2-
<div class="siren-sdk-error-window-container">
3-
<div :style="containerStyle" class="siren-sdk-error-icon-container">
4-
<img src="../assets/errorIcon.svg" alt="error_icon" :style="iconOpacity" class="siren-sdk-error-icon" />
5-
</div>
6-
<div :style="styles.errorText" class="siren-sdk-error-text">
7-
{{ ERROR_TEXT }}
8-
</div>
9-
<div :style="styles.errorText" class="siren-sdk-error-sub-text">
10-
{{ ERROR_SUB_TEXT }}
11-
</div>
2+
<div class="siren-sdk-error-window-container">
3+
<div :style="containerStyle" class="siren-sdk-error-icon-container">
4+
<img
5+
src="../assets/errorIcon.svg"
6+
alt="error_icon"
7+
:style="iconOpacity"
8+
class="siren-sdk-error-icon"
9+
/>
1210
</div>
11+
<div :style="styles.errorText" class="siren-sdk-error-text">
12+
{{ ERROR_TEXT }}
13+
</div>
14+
<div :style="styles.errorText" class="siren-sdk-error-sub-text">
15+
{{ ERROR_SUB_TEXT }}
16+
</div>
17+
</div>
1318
</template>
1419

1520
<script setup lang="ts">
@@ -23,9 +28,9 @@ import '../styles/errorWindow.css';
2328
const props = defineProps<ErrorWindowProps>();
2429
2530
const containerStyle = {
26-
backgroundColor: props.darkMode
27-
? COLORS.dark.iconColor
28-
: COLORS.light.iconColor
31+
backgroundColor: props.darkMode
32+
? COLORS.dark.iconColor
33+
: COLORS.light.iconColor
2934
};
3035
const iconOpacity = { opacity: props.darkMode ? 0.2 : 1 };
3136
</script>

‎src/components/LoaderComponent.vue‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
<template>
2-
<div class="siren-sdk-loader-container">
3-
<div v-for="number in 5" :key="number" class="siren-sdk-card-loader-container">
4-
<div :style="styles.loader" class="siren-sdk-card-loader-avatar" />
5-
<div class="siren-sdk-card-loader-details">
6-
<div :style="styles.loader" class="siren-sdk-card-loader-header" />
7-
<div :style="styles.loader" class="siren-sdk-card-loader-header" />
8-
<div :style="styles.loader" class="siren-sdk-card-loader-body" />
9-
<div class="siren-sdk-card-loader-time-container">
10-
<div :style="styles.loader" class="siren-sdk-card-loader-time-icon" />
11-
<div :style="styles.loader" class="siren-sdk-card-loader-time" />
12-
</div>
13-
</div>
14-
<div :style="styles.loader" class="siren-sdk-card-loader-delete-icon" />
2+
<div class="siren-sdk-loader-container">
3+
<div
4+
v-for="number in 5"
5+
:key="number"
6+
class="siren-sdk-card-loader-container"
7+
>
8+
<div :style="styles.loader" class="siren-sdk-card-loader-avatar" />
9+
<div class="siren-sdk-card-loader-details">
10+
<div :style="styles.loader" class="siren-sdk-card-loader-header" />
11+
<div :style="styles.loader" class="siren-sdk-card-loader-header" />
12+
<div :style="styles.loader" class="siren-sdk-card-loader-body" />
13+
<div class="siren-sdk-card-loader-time-container">
14+
<div :style="styles.loader" class="siren-sdk-card-loader-time-icon" />
15+
<div :style="styles.loader" class="siren-sdk-card-loader-time" />
1516
</div>
17+
</div>
18+
<div :style="styles.loader" class="siren-sdk-card-loader-delete-icon" />
1619
</div>
20+
</div>
1721
</template>
1822

1923
<script setup lang="ts">
20-
2124
import type { SirenStyleProps } from '../types';
2225
2326
import '../styles/loader.css';
2427
2528
defineProps<{
26-
styles: SirenStyleProps
29+
styles: SirenStyleProps;
2730
}>();
2831
</script>

0 commit comments

Comments
 (0)