Skip to content

Commit

Permalink
Merge branch 'main' into Natsuki/RadioCard
Browse files Browse the repository at this point in the history
  • Loading branch information
cp-20 authored Dec 18, 2024
2 parents 8db6f9a + a39f896 commit 3c1ac84
Show file tree
Hide file tree
Showing 11 changed files with 166 additions and 6 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ module.exports = {
},
],
'vue/component-api-style': ['error', ['script-setup']],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/custom-event-name-casing': ['error', 'camelCase'],
'vue/v-on-event-hyphenation': ['error', 'always', { autofix: true }],
'vue/v-on-function-call': 'error',
Expand Down
4 changes: 1 addition & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template>
<div :class="$style.container">
<header>Header</header>
<div :class="$style['inner-container']">
<main :class="$style.content">
<router-view />
<RouterView />
</main>
</div>
<footer>Footer</footer>
</div>
</template>

Expand Down
6 changes: 4 additions & 2 deletions src/pages/DashBoard.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<div>Here is dashboard</div>
<div><MainHeader></MainHeader></div>
</template>

<script lang="ts" setup></script>
<script lang="ts" setup>
import MainHeader from '@/shared/lib/components/MainHeader.vue';
</script>

<style lang="scss" module></style>
Empty file removed src/shared/components/.gitkeep
Empty file.
28 changes: 28 additions & 0 deletions src/shared/lib/components/ChipCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script setup lang="ts">
import Button from 'primevue/button';
defineProps<{
label: string;
}>();
</script>

<template>
<Button class="button-color"
><span>{{ label }}</span></Button
>
</template>
<style lang="scss" scoped>
.button-color {
background-color: $color-primary;
border-color: $color-primary;
border-width: 2px;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.buton-color:active {
border-color: $color-border-hover;
}
.buton-color:hover {
background-color: $color-primary-hover;
}
</style>
13 changes: 13 additions & 0 deletions src/shared/lib/components/ChipTag.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script setup lang="ts">
import { defineProps } from 'vue';
import Chip from 'primevue/chip';
defineProps<{
label: string;
}>();
</script>
<template>
<Chip class="p-chip">
<span>{{ label }}</span>
</Chip>
</template>
14 changes: 14 additions & 0 deletions src/shared/lib/components/IconAvatar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">
import Avatar from 'primevue/avatar';
defineProps<{
name: string;
}>();
</script>
<template>
<Avatar
:image="`https://q.trap.jp/api/v3/public/icon/${name}`"
class="mr-2"
size="32px"
shape="circle"
/>
</template>
40 changes: 40 additions & 0 deletions src/shared/lib/components/MainHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<div class="box">
<div class="left-box">
<ServiceLogo />
</div>
<div class="right-box">
<ChipCard :label="chipLabel" />
<IconAvatar :name="userName" />
</div>
</div>
</template>

<script lang="ts" setup>
import IconAvatar from '@/shared/lib/components/IconAvatar.vue';
import ChipCard from '@/shared/lib/components/ChipCard.vue';
import ServiceLogo from '@/shared/lib/components/ServiceLogo.vue';
const userName = 'Pugma'; // 実際は指定のユーザーの名前を取得する
const chipLabel = '物品を追加'; //ボタンのラベルをpropsで使えるようにして使いまわす
</script>

<style lang="scss" scoped>
.box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
border-bottom: 1px solid $color-secondary;
}
.left-box {
margin-right: auto;
}
.right-box {
display: flex;
align-items: center;
padding: 16px, 32px;
gap: 16px;
}
</style>
46 changes: 46 additions & 0 deletions src/shared/lib/components/ServiceIcon.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="24.82pt"
height="32pt"
viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet"
>
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g
transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#5cb860"
stroke="none"
>
<path
d="M1059 6977 c-86 -29 -160 -86 -196 -151 l-28 -51 -1 -3250 c-1 -2732
1 -3258 13 -3297 34 -117 189 -208 360 -210 104 -2 146 6 218 42 33 17 209
141 391 278 182 136 342 255 355 265 13 9 157 116 319 237 162 121 311 232
330 246 19 14 122 91 229 170 205 154 247 179 323 200 61 16 195 16 256 0 72
-20 119 -47 269 -159 76 -57 143 -106 150 -110 9 -6 12 143 12 659 0 605 -1
665 -16 660 -194 -75 -324 -99 -533 -100 -220 0 -301 11 -485 70 -91 29 -250
103 -313 145 -24 16 -47 29 -52 29 -4 0 -10 3 -12 8 -1 4 -21 20 -43 36 -270
198 -480 513 -559 836 -44 181 -44 160 -44 1854 l0 1611 -439 2 c-431 3 -439
2 -504 -20z"
/>
<path
d="M2924 6135 c0 -608 3 -865 10 -863 6 2 56 18 111 36 152 49 294 69
465 66 80 -1 154 -4 165 -7 11 -2 43 -8 70 -11 53 -8 164 -36 230 -59 207 -71
391 -186 550 -342 117 -115 138 -141 210 -251 100 -153 163 -302 213 -501 l26
-108 3 -1802 4 -1802 212 -159 c116 -87 246 -184 288 -215 122 -90 249 -120
394 -92 128 24 248 109 278 199 11 34 13 554 13 3291 l-1 3250 -21 45 c-38 83
-122 147 -229 174 -52 14 -233 16 -1525 16 l-1466 0 0 -865z"
/>
<path
d="M3430 4579 c-216 -24 -374 -114 -500 -284 -64 -86 -97 -167 -126
-305 -3 -14 -5 -59 -5 -100 -2 -284 170 -537 438 -645 32 -13 74 -27 93 -30
19 -3 51 -9 70 -14 46 -10 167 -5 231 8 362 78 592 408 545 783 -37 298 -302
555 -602 584 -33 3 -63 6 -69 8 -5 1 -39 -1 -75 -5z"
/>
</g>
</svg>
</template>
<style lang="scss"></style>
18 changes: 18 additions & 0 deletions src/shared/lib/components/ServiceLogo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<div class="content">
<ServiceLogo />
booQ
</div>
</template>
<script setup lang="ts">
import ServiceLogo from '@/shared/lib/components/ServiceIcon.vue';
</script>
<style lang="scss" scoped>
.content {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: $color-primary;
}
</style>
1 change: 1 addition & 0 deletions src/styles/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $color-secondary: #e2e2e2;
$color-secondary-hover: #f0f0f0;
$color-secondary-disabled: #c9cac9;

$color-border-hover: #2b2b2b;
$color-error: #ff4500;

$color-text-primary: #1a1a1c;
Expand Down

0 comments on commit 3c1ac84

Please sign in to comment.