Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormSelectorFilterable.vueを作成 #4244

Merged
merged 32 commits into from
Apr 7, 2024
Merged
Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
55af32a
FormSelector.vueに検索機能を追加
reiroop Mar 15, 2024
a3cd02d
配置を調整
reiroop Mar 15, 2024
cd3942f
filteredOptionsを用いる形に変更
reiroop Mar 15, 2024
15a028c
上手く動きません、助けてください
reiroop Mar 16, 2024
c33c7e0
Revert "上手く動きません、助けてください"
reiroop Mar 24, 2024
73a281c
vue-multiselectを導入
reiroop Mar 24, 2024
029cadb
機能面は概ねできました
reiroop Mar 26, 2024
b2e511f
modelValueとselectedOptionの同期処理をリファクタ
reiroop Mar 26, 2024
7801174
vue-selectのimportがうまくいかない
reiroop Mar 26, 2024
9ce174a
vue-selectに移行
reiroop Mar 26, 2024
3c589f1
cssを作成
reiroop Mar 29, 2024
293fd4e
選択解除を不可に
reiroop Mar 29, 2024
40fab8c
typoの修正
reiroop Mar 29, 2024
1a44478
npm i --save-dev @types/vue-select
reiroop Mar 29, 2024
98a546d
:disabled="option.value === null"に相当する機能を追加
reiroop Mar 29, 2024
81bf201
:disabled="option.value === null"に相当する機能を実装
reiroop Mar 29, 2024
8fa0c7a
optionの背景色を調整
reiroop Mar 30, 2024
21145bd
borderを中心に見た目を調整
reiroop Mar 30, 2024
09e0c83
微調整
reiroop Mar 30, 2024
c5c83e0
微調整
reiroop Mar 30, 2024
846bfa5
css調整中
reiroop Mar 30, 2024
566c6e9
cssを整理
reiroop Mar 30, 2024
7228d7d
cssの修正
reiroop Mar 30, 2024
00f0f62
borderを調整
reiroop Mar 30, 2024
0199331
高さを調整
reiroop Mar 30, 2024
c57394e
controlの色を調整
reiroop Mar 30, 2024
530394d
search inputの文字位置の調整
reiroop Mar 30, 2024
ccd4ad2
背景・検索の入力・ボーダー・オプションがずれていた問題を修正
reiroop Apr 1, 2024
01ee435
細かい修正
reiroop Apr 5, 2024
08d37af
フォーマッタとコメント
reiroop Apr 5, 2024
3fdd33c
属性の命名を変更
reiroop Apr 7, 2024
a56db2b
styleをdata-backgroundに修正
reiroop Apr 7, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 47 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"turndown-plugin-gfm": "^1.0.2",
"vue": "^3.3.4",
"vue-router": "^4.1.5",
"vue-select": "^4.0.0-beta.6",
"vue-slider-component": "^4.0.0-beta.9",
"zod": "^3.22.4"
},
Expand All @@ -62,6 +63,7 @@
"@types/serviceworker": "^0.0.67",
"@types/throttle-debounce": "^5.0.0",
"@types/turndown": "^5.0.3",
"@types/vue-select": "^3.16.8",
"@types/webappsec-credential-management": "^0.6.4",
"@typescript-eslint/eslint-plugin": "^6.16.0",
"@typescript-eslint/parser": "^6.16.0",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Settings/BrowserTab/OpenMode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<p>
特定のチャンネルを指定します。OFFの場合は最後に開いたチャンネルが設定されます。
</p>
<form-selector
<form-selector-filterable
v-if="openMode === 'particular'"
v-model="openChannelNameValue"
:options="channelOptions"
Expand All @@ -22,7 +22,7 @@

<script lang="ts" setup>
import AToggle from '/@/components/UI/AToggle.vue'
import FormSelector from '/@/components/UI/FormSelector.vue'
import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
import type { OpenMode } from '/@/store/app/browserSettings'
import useChannelPath from '/@/composables/useChannelPath'
import useChannelOptions from '/@/composables/useChannelOptions'
Expand Down
104 changes: 104 additions & 0 deletions src/components/UI/FormSelectorFilterable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div>
<label v-if="label" :for="id" :class="$style.label">
{{ label }}
</label>
<!-- https://vue-select.org/api/props.html -->
<v-select
:id="id"
v-model="selectedOptionValue"
:options="options"
label="key"
:reduce="(option: Option) => option.value"
:selectable="(option: Option) => option.value !== null"
reiroop marked this conversation as resolved.
Show resolved Hide resolved
:clearable="false"
:background="background"
reiroop marked this conversation as resolved.
Show resolved Hide resolved
:class="$style.select"
></v-select>
</div>
</template>

<script lang="ts" setup>
import { useModelValueSyncer } from '/@/composables/useModelSyncer'
import { randomString } from '/@/lib/basic/randomString'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

type Option = { key: string; value: string | null }
type Background = 'primary' | 'secondary'
const props = withDefaults(
defineProps<{
modelValue?: string | null
background?: Background
options: Array<Option>
label?: string
}>(),
{
modelValue: '',
background: 'secondary'
}
)

const emit = defineEmits<{
(e: 'update:modelValue', _val: string | null): void
}>()

const selectedOptionValue = useModelValueSyncer(props, emit)
const id = randomString()
</script>

<style lang="scss" module>
.label {
@include color-ui-primary;
margin-bottom: 4px;
display: block;
}
// https://vue-select.org/guide/css.html
.select {
reiroop marked this conversation as resolved.
Show resolved Hide resolved
// background
@include background-secondary;
&[background='primary'] {
mehm8128 marked this conversation as resolved.
Show resolved Hide resolved
@include background-primary;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

デフォルトがsecondaryで条件分岐でprimaryを当ててるのちょっと不自然なので、逆にした方がいいかもです
他のところも同様

 @include background-primary;
  &[background='secondary'] {
    @include background-secondary;
  }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FormSelector.vueもそうなんですけど、primaryの上に置くことが多いのでデフォがsecondaryになってるんだと思います。なのでデフォはsecondaryにするのが自然かなーって思ってるんですけど、どうしましょう?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確かにそうかもです
このままで大丈夫そうです👍

border-radius: 4px;
height: 30px;
:global(.vs__dropdown-toggle),
:global(.vs__selected-options),
:global(.vs__actions),
:global(.vs__selected),
:global(.vs__search) {
height: 100%;
}

// Search Input
--vs-search-input-color: var(--theme-ui-primary-default);

// Borders
--vs-border-color: transparent;
--vs-border-width: 2px;
--vs-border-style: solid;
--vs-border-radius: 4px;
&:focus-within {
--vs-border-color: var(--theme-accent-focus-default);
}

// Controls
--vs-controls-color: var(--theme-ui-secondary-default);

// Selected
--vs-selected-color: var(--theme-ui-primary-default);

// Dropdown
--vs-dropdown-bg: var(--theme-background-secondary-default);
&[background='primary'] {
--vs-dropdown-bg: var(--theme-background-primary-default);
}

// Active State
--vs-dropdown-option--active-bg: var(--theme-background-primary-default);
&[background='primary'] {
--vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
}
--vs-dropdown-option--active-color: var(--theme-ui-primary-default);
}
</style>
9 changes: 5 additions & 4 deletions src/views/Settings/ProfileTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
prevent-modal
:class="$style.icon"
/>
<image-upload v-model="newIcon" rounded :class="$style.uploder" />
<image-upload v-model="newIcon" rounded :class="$style.uploader" />
</div>
<div :class="$style.element">
<h3 :class="$style.header">表示名</h3>
Expand All @@ -35,7 +35,7 @@
</div>
<div :class="$style.element">
<h3 :class="$style.header">ホームチャンネル</h3>
<form-selector
<form-selector-filterable
v-model="state.homeChannel"
:options="channelOptions"
:class="$style.form"
Expand Down Expand Up @@ -149,12 +149,13 @@ const useIsLengthValid = (state: Profile) => {
import UserIcon from '/@/components/UI/UserIcon.vue'
import ImageUpload from '/@/components/Settings/ImageUpload.vue'
import FormInput from '/@/components/UI/FormInput.vue'
import FormSelector from '/@/components/UI/FormSelector.vue'
import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
import FormButton from '/@/components/UI/FormButton.vue'
import FormTextArea from '/@/components/UI/FormTextArea.vue'
import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'

const { detail: detailMayBeUndefined } = useMeStore()

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const detail = computed(() => detailMayBeUndefined.value!)

Expand Down Expand Up @@ -209,7 +210,7 @@ const canUpdate = computed(
left: 36px;
}
}
.uploder {
.uploader {
margin-left: 12px;
}
.bioContainer {
Expand Down
Loading