Skip to content

Commit 1bcc408

Browse files
howard-tzwhoward-tzw
authored
Merge pull request #9 from howard-tzw/feat/new-style
New css variables and functionality
2 parents 3e6f55f + ea3b92d commit 1bcc408

Some content is hidden

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

42 files changed

+1516
-1036
lines changed

‎CHANGELOG.md

+39
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,45 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
### [0.0.6](https://github.com/howard-tzw/vue3-select/compare/v0.0.5...v0.0.6) (2023-06-05)
6+
7+
8+
### Bug Fixes
9+
10+
* set the pointer to the selected option for the computed options ([b710b8e](https://github.com/howard-tzw/vue3-select/commit/b710b8e9ba98ddaab6a75cdc4475236a3c128bea))
11+
12+
13+
### Style Updates
14+
15+
* export --vs-height ([bf2d2cb](https://github.com/howard-tzw/vue3-select/commit/bf2d2cbe644ac8db1a2b8b5feac6bcbd4651809c))
16+
* selected option highlight in menu and add --vs-dropdown-options-gap ([49dcbc3](https://github.com/howard-tzw/vue3-select/commit/49dcbc3f12bcba086f3bc597e730684a2389ae32))
17+
18+
19+
### Chores
20+
21+
* remove scss folder ([1943696](https://github.com/howard-tzw/vue3-select/commit/194369614c48614c92171c5955b351a1fb2a3fc1))
22+
23+
### [0.0.5](https://github.com/howard-tzw/vue3-select/compare/v0.0.4...v0.0.5) (2023-06-02)
24+
25+
26+
### Style Updates
27+
28+
* export --vs-dropdown-border-radius ([48eb5c5](https://github.com/howard-tzw/vue3-select/commit/48eb5c579c3cf8225d40b5985f476af3fee22fb9))
29+
30+
### [0.0.4](https://github.com/howard-tzw/vue3-select/compare/v0.0.3...v0.0.4) (2023-06-02)
31+
32+
33+
### Features
34+
35+
* add touchstart event for option hover style on mobile ([b41c719](https://github.com/howard-tzw/vue3-select/commit/b41c719846164773031fa28dd8422b116fb8ec13))
36+
* update with new css style ([45046b6](https://github.com/howard-tzw/vue3-select/commit/45046b6745101962fad950fbbc858269adc9d81e))
37+
38+
39+
### Chores
40+
41+
* remove github issue template ([3e6f55f](https://github.com/howard-tzw/vue3-select/commit/3e6f55f42817f7b5d2e4c96e2ff592f2446cff48))
42+
* update dev environment ([2090a30](https://github.com/howard-tzw/vue3-select/commit/2090a30a24e6f9615fd9e5bfa70b7b9ace460c02))
43+
544
### [0.0.3](https://github.com/howard-tzw/vue3-select/compare/v0.0.2...v0.0.3) (2023-05-09)
645

746

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@
2929
"test",
3030
"tests"
3131
],
32-
"version": "0.0.3"
32+
"version": "0.0.6"
3333
}

‎dev/BaseSelect.vue

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<script lang="ts">
2+
export default {
3+
inheritAttrs: false,
4+
}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ref, computed, useAttrs } from 'vue'
9+
10+
const props = withDefaults(
11+
defineProps<{
12+
searchable?: boolean
13+
square?: boolean
14+
}>(),
15+
{
16+
searchable: false,
17+
square: false,
18+
}
19+
)
20+
21+
const borderRadius = computed(() => {
22+
return props.square ? '8px' : '30px'
23+
})
24+
25+
/**
26+
* @feat noDrop 為 true 時的樣式
27+
*/
28+
const attrs = useAttrs()
29+
const noDropBackgroundColor = computed(() =>
30+
attrs['no-drop'] ? '#f7f7f7' : '#fff'
31+
)
32+
const noDropCursor = computed(() => (attrs['no-drop'] ? 'default' : 'pointer'))
33+
34+
/**
35+
* @feat 將選擇的選項名稱加上粗體
36+
*/
37+
function selectedOptionNameClass(name: string) {
38+
if (name === (attrs.modelValue as any)?.name) {
39+
return 'font-semibold'
40+
}
41+
return ''
42+
}
43+
</script>
44+
45+
<template>
46+
<div>
47+
<v-select
48+
class="cursor-auto"
49+
v-bind="$attrs"
50+
:clearable="false"
51+
:searchable="searchable"
52+
label="name"
53+
append-to-body
54+
transition="fade"
55+
>
56+
<template #option="{ name }">
57+
<div class="option--scroll">
58+
<p :class="selectedOptionNameClass(name)">{{ name }}</p>
59+
</div>
60+
</template>
61+
62+
<template #no-options="{ search, searching, loading }">
63+
暫無選項
64+
</template>
65+
</v-select>
66+
</div>
67+
</template>
68+
69+
<style lang="scss" scoped>
70+
:deep(.vs__dropdown-toggle) {
71+
border-radius: v-bind(borderRadius); // 欄位外匡
72+
box-shadow: var(--input-shadow); // 欄位陰影
73+
background-color: v-bind(noDropBackgroundColor); // 欄位背景色
74+
}
75+
76+
// vs__selected-options 調整左側間隔
77+
:deep(.vs__dropdown-toggle .vs__selected-options) {
78+
padding-left: 15px;
79+
}
80+
81+
// vs__selected 欄位文字過長橫軸滑動
82+
:deep(.vs__dropdown-toggle .vs__selected-options .vs__selected) {
83+
overflow-x: scroll;
84+
-ms-overflow-style: none; /* IE and Edge */
85+
scrollbar-width: none; /* Firefox */
86+
}
87+
:deep(.vs__dropdown-toggle
88+
.vs__selected-options
89+
.vs__selected::-webkit-scrollbar) {
90+
display: none;
91+
}
92+
93+
// vs__search
94+
:deep(.vs__dropdown-toggle .vs__selected-options input.vs__search) {
95+
}
96+
97+
// ============== no-drop 為 true 時的樣式 ==============
98+
:deep(.vs--unsearchable .vs__dropdown-toggle) {
99+
cursor: v-bind(noDropCursor);
100+
}
101+
102+
:deep(.vs--unsearchable:not(.vs--disabled) .vs__search) {
103+
cursor: v-bind(noDropCursor);
104+
}
105+
106+
.option--scroll {
107+
white-space: nowrap;
108+
overflow-x: auto;
109+
110+
/* Hide scrollbar for IE, Edge and Firefox */
111+
-ms-overflow-style: none; /* IE and Edge */
112+
scrollbar-width: none; /* Firefox */
113+
}
114+
/* Hide scrollbar for Chrome, Safari and Opera */
115+
.option--scroll::-webkit-scrollbar {
116+
display: none;
117+
}
118+
</style>

‎dev/Dev.vue

-48
This file was deleted.

‎dev/IconDown.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<svg
3+
width="20"
4+
height="20"
5+
viewBox="0 0 20 20"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
fill-rule="evenodd"
11+
clip-rule="evenodd"
12+
d="M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z"
13+
fill="#0F172A"
14+
/>
15+
</svg>
16+
</template>

‎dev/app.vue

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div id="app">
3+
<div class="section">
4+
<h2 class="title">Basic</h2>
5+
<v-select v-model="selected" :options="options" />
6+
</div>
7+
8+
<div class="section">
9+
<h2 class="title">Custom</h2>
10+
<ul>
11+
<li>searchable: false</li>
12+
<li>clearable: false</li>
13+
</ul>
14+
<v-select
15+
v-model="selected"
16+
:options="computedOptions"
17+
:clearable="false"
18+
:searchable="false"
19+
/>
20+
</div>
21+
22+
<div class="section">
23+
<h2 class="title">BaseSelect</h2>
24+
<BaseSelect v-model="selectedOption" :options="baseSelectOptions" />
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script setup lang="ts">
30+
import { ref, computed } from 'vue'
31+
import countries from '../docs/.vuepress/data/countryCodes.js'
32+
import BaseSelect from './BaseSelect.vue'
33+
34+
const selected = ref(null)
35+
const options = ref(countries)
36+
37+
const computedOptions = computed(() => countries)
38+
39+
const baseSelectOptions = ref(
40+
countries.map((country) => ({
41+
name: country.label,
42+
value: country.value,
43+
}))
44+
)
45+
const selectedOption = ref()
46+
47+
setTimeout(() => {
48+
selectedOption.value = baseSelectOptions.value[0]
49+
}, 3000)
50+
</script>
51+
52+
<style lang="scss">
53+
html,
54+
body {
55+
margin: 0;
56+
height: 1000px;
57+
font-family: -apple-system, sans-serif;
58+
}
59+
60+
.title {
61+
@apply text-lg;
62+
}
63+
64+
.section {
65+
@apply p-5;
66+
}
67+
</style>

‎dev/dev.js

-4
This file was deleted.

‎dev/index.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--input-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
7+
--input-border-color: rgba(60, 60, 60, 0.26);
8+
9+
/* easy-data-table 是如何讓 css vars 能夠在 component 內定義的？ */
10+
--vs-dropdown-option--active-bg: black;
11+
}

‎dev/main.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createApp, h } from 'vue'
2+
import VueSelect from '@/index'
3+
import '@/css/vue-select.css'
4+
import App from './app.vue' // must be imported after VueSelect
5+
import IconDown from './IconDown.vue'
6+
import './index.css'
7+
8+
VueSelect.props.components.default = () => ({
9+
// Deselect: {
10+
// render: () => h('span', '❌'),
11+
// },
12+
OpenIndicator: {
13+
render: () => h(IconDown),
14+
},
15+
})
16+
17+
const app = createApp(App)
18+
app.component('VSelect', VueSelect)
19+
20+
app.mount('#app')

‎index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Vue Select Dev</title>
7-
</head>
8-
<body>
9-
<div id="app"></div>
10-
<script type="module" src="./dev/dev.js"></script>
11-
</body>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="./dev/main.js"></script>
11+
</body>
1212
</html>

0 commit comments

Comments
 (0)