Skip to content

Commit 8d34c6c

Browse files
mylmz10mylmz10
authored
Merge pull request #31 from mylmz10/develop
Develop to Master
2 parents 49dfda7 + 90d0c1f commit 8d34c6c

20 files changed

+366
-67
lines changed

‎src/components/autocomplete/MdOutlinedAutoComplete.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<MdMenu class="md-autocomplete" v-model="menuOpened">
3+
<template v-slot:activator>
4+
<MdOutlinedTextField v-model="searchText" :label="props.label" @focus="onTextFieldFocus" @input="onTextFieldInput"></MdOutlinedTextField>
5+
</template>
6+
7+
<MdList>
8+
<template v-if="filteredItems.length">
9+
<MdListItem v-for="(item, index) in filteredItems" :selected="modelValue === item" :headline="item" @click="onMenuListItemClick(index)"></MdListItem>
10+
</template>
11+
<template v-else>
12+
<MdListItem headline="No data available"></MdListItem>
13+
</template>
14+
</MdList>
15+
</MdMenu>
16+
</template>
17+
18+
<script setup>
19+
import { computed, onBeforeMount, ref, watch } from 'vue';
20+
import MdOutlinedTextField from '../text-field/MdOutlinedTextField.vue';
21+
import MdMenu from '../menu/MdMenu.vue';
22+
import MdList from '../list/MdList.vue';
23+
import MdListItem from '../list/MdListItem.vue';
24+
25+
const props = defineProps({ modelValue: { type: String, default: null }, label: { type: String, default: null }, items: { type: Array, default: null } });
26+
const emit = defineEmits(['update:modelValue', 'update:search']);
27+
28+
let menuOpened = ref(false);
29+
let searchText = ref(null);
30+
let selecting = ref(false);
31+
let isPristine = ref(true);
32+
33+
const filteredItems = computed(() => {
34+
if (!selecting.value && searchText.value) {
35+
return props.items.filter((item) => item.toLocaleLowerCase().includes(searchText.value.toLocaleLowerCase()));
36+
}
37+
return props.items;
38+
});
39+
40+
onBeforeMount(() => {
41+
searchText.value = props.modelValue;
42+
});
43+
44+
const onTextFieldFocus = () => {
45+
menuOpened.value = true;
46+
};
47+
const onTextFieldInput = () => {
48+
selecting.value = false;
49+
isPristine.value = false;
50+
emit('update:search', searchText.value);
51+
};
52+
const onMenuListItemClick = (index) => {
53+
searchText.value = filteredItems.value[index];
54+
menuOpened.value = false;
55+
isPristine.value = true;
56+
emit('update:modelValue', filteredItems.value[index]);
57+
};
58+
59+
watch(
60+
() => menuOpened.value,
61+
(newValue) => {
62+
if (newValue) {
63+
if (searchText.value === props.modelValue) {
64+
selecting.value = true;
65+
} else {
66+
selecting.value = false;
67+
}
68+
} else {
69+
if (!isPristine.value) {
70+
searchText.value = null;
71+
emit('update:modelValue', null);
72+
}
73+
selecting.value = false;
74+
}
75+
}
76+
);
77+
</script>
78+
79+
<style lang="scss">
80+
.md-autocomplete {
81+
width: 100%;
82+
83+
.md-menu__activator {
84+
width: 100%;
85+
}
86+
87+
.md-menu__content {
88+
width: 100%;
89+
}
90+
91+
.md-outlined-text-field {
92+
width: 100%;
93+
}
94+
}
95+
</style>

‎src/components/button/MdButtonBase.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<button class="md-button" :disabled="disabled"><slot /></button>
2+
<button class="md-button" :disabled="disabled">
3+
<div class="md-button__background"></div>
4+
<slot />
5+
</button>
36
</template>
47

58
<script setup>
@@ -18,6 +21,7 @@ defineProps({
1821
1922
.md-button {
2023
@include surface.root-static-styles;
24+
position: relative;
2125
display: inline-flex;
2226
align-items: center;
2327
justify-content: center;
@@ -38,5 +42,22 @@ defineProps({
3842
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
3943
cursor: pointer;
4044
}
45+
46+
&__background {
47+
position: absolute;
48+
inset: 0;
49+
border-radius: inherit;
50+
z-index: 0;
51+
}
52+
53+
> * {
54+
z-index: 1;
55+
}
56+
57+
&:disabled {
58+
.md-ripple {
59+
opacity: 0;
60+
}
61+
}
4162
}
4263
</style>

‎src/components/button/MdElevatedButton.vue‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
22
<MdButtonBase class="md-elevated-button" :disabled="disabled">
33
<MdRipple />
4-
<template v-if="label">
4+
<span v-if="label" class="md-button__label">
55
{{ label }}
6-
</template>
7-
<slot v-else />
6+
</span>
7+
<span v-else class="md-button__label">
8+
<slot />
9+
</span>
810
</MdButtonBase>
911
</template>
1012

@@ -33,26 +35,38 @@ $theme: tokens.md-comp-elevated-button-values();
3335
3436
.md-elevated-button {
3537
@include surface.root-static-styles;
36-
background-color: map.get($theme, container-color);
3738
height: map.get($theme, container-height);
3839
border-radius: map.get($theme, container-shape);
39-
color: map.get($theme, label-text-color);
40-
font-family: map.get($theme, label-text-font);
41-
font-size: map.get($theme, label-text-size);
42-
font-weight: map.get($theme, label-text-weight);
43-
letter-spacing: map.get($theme, label-text-tracking);
44-
line-height: map.get($theme, label-text-line-height);
4540
box-shadow: elevation.resolve-box-shadow(map.get($theme, container-elevation), map.get($theme, container-shadow-color));
4641
@include ripple.ripple($theme, null, 100px);
4742
48-
&:hover:not(:focus):not(:active) {
43+
&:hover:not(:focus):not(:active):not(:disabled) {
4944
box-shadow: elevation.resolve-box-shadow(map.get($theme, hover-container-elevation), map.get($theme, container-shadow-color));
5045
}
5146
47+
.md-button__label {
48+
color: map.get($theme, label-text-color);
49+
font-family: map.get($theme, label-text-font);
50+
font-size: map.get($theme, label-text-size);
51+
font-weight: map.get($theme, label-text-weight);
52+
letter-spacing: map.get($theme, label-text-tracking);
53+
line-height: map.get($theme, label-text-line-height);
54+
}
55+
.md-button__background {
56+
background-color: map.get($theme, container-color);
57+
}
58+
5259
&:disabled {
53-
background-color: rgba(map.get($theme, disabled-container-color), map.get($theme, disabled-container-opacity));
54-
color: rgba(map.get($theme, disabled-label-text-color), map.get($theme, disabled-label-text-opacity));
5560
box-shadow: none;
61+
62+
.md-button__background {
63+
background-color: map.get($theme, disabled-container-color);
64+
opacity: map.get($theme, disabled-container-opacity);
65+
}
66+
.md-button__label {
67+
color: map.get($theme, disabled-label-text-color);
68+
opacity: map.get($theme, disabled-label-text-opacity);
69+
}
5670
}
5771
}
5872
</style>

‎src/components/button/MdFilledButton.vue‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
22
<MdButtonBase class="md-filled-button" :disabled="disabled">
33
<MdRipple />
4-
<template v-if="label">
4+
<span v-if="label" class="md-button__label">
55
{{ label }}
6-
</template>
7-
<slot v-else />
6+
</span>
7+
<span v-else class="md-button__label">
8+
<slot />
9+
</span>
810
</MdButtonBase>
911
</template>
1012

@@ -30,25 +32,37 @@ defineProps({
3032
$theme: tokens.md-comp-filled-button-values();
3133
3234
.md-filled-button {
33-
background-color: map.get($theme, container-color);
3435
height: map.get($theme, container-height);
3536
border-radius: map.get($theme, container-shape);
36-
color: map.get($theme, label-text-color);
37-
font-family: map.get($theme, label-text-font);
38-
font-size: map.get($theme, label-text-size);
39-
font-weight: map.get($theme, label-text-weight);
40-
letter-spacing: map.get($theme, label-text-tracking);
41-
line-height: map.get($theme, label-text-line-height);
4237
box-shadow: none;
4338
@include ripple.ripple($theme, null, 100px);
4439
4540
&:not(:disabled):hover {
4641
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
4742
}
4843
44+
.md-button__label {
45+
color: map.get($theme, label-text-color);
46+
font-family: map.get($theme, label-text-font);
47+
font-size: map.get($theme, label-text-size);
48+
font-weight: map.get($theme, label-text-weight);
49+
letter-spacing: map.get($theme, label-text-tracking);
50+
line-height: map.get($theme, label-text-line-height);
51+
}
52+
53+
.md-button__background {
54+
background-color: map.get($theme, container-color);
55+
}
56+
4957
&:disabled {
50-
background-color: rgba(map.get($theme, disabled-container-color), map.get($theme, disabled-container-opacity));
51-
color: rgba(map.get($theme, disabled-label-text-color), map.get($theme, disabled-label-text-opacity));
58+
.md-button__background {
59+
background-color: map.get($theme, disabled-container-color);
60+
opacity: map.get($theme, disabled-container-opacity);
61+
}
62+
.md-button__label {
63+
color: map.get($theme, disabled-label-text-color);
64+
opacity: map.get($theme, disabled-label-text-opacity);
65+
}
5266
}
5367
}
5468
</style>

‎src/components/button/MdOutlinedButton.vue‎

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<template>
22
<MdButtonBase class="md-outlined-button" :disabled="disabled">
33
<MdRipple />
4-
<template v-if="label">
4+
<div class="md-button__outline"></div>
5+
<span v-if="label" class="md-button__label">
56
{{ label }}
6-
</template>
7-
<slot v-else />
7+
</span>
8+
<span v-else class="md-button__label">
9+
<slot />
10+
</span>
811
</MdButtonBase>
912
</template>
1013

@@ -30,27 +33,48 @@ defineProps({
3033
$theme: tokens.md-comp-outlined-button-values();
3134
3235
.md-outlined-button {
33-
background-color: map.get($theme, container-color);
3436
height: map.get($theme, container-height);
3537
border-radius: map.get($theme, container-shape);
36-
color: map.get($theme, label-text-color);
37-
font-family: map.get($theme, label-text-font);
38-
font-size: map.get($theme, label-text-size);
39-
font-weight: map.get($theme, label-text-weight);
40-
letter-spacing: map.get($theme, label-text-tracking);
41-
line-height: map.get($theme, label-text-line-height);
4238
box-shadow: none;
43-
outline: map.get($theme, outline-color) solid map.get($theme, outline-width);
4439
@include ripple.ripple($theme, null, 100px);
4540
41+
.md-button__outline {
42+
position: absolute;
43+
inset: 0;
44+
z-index: 0;
45+
border-radius: inherit;
46+
outline: map.get($theme, outline-color) solid map.get($theme, outline-width);
47+
}
48+
.md-button__label {
49+
color: map.get($theme, label-text-color);
50+
font-family: map.get($theme, label-text-font);
51+
font-size: map.get($theme, label-text-size);
52+
font-weight: map.get($theme, label-text-weight);
53+
letter-spacing: map.get($theme, label-text-tracking);
54+
line-height: map.get($theme, label-text-line-height);
55+
}
56+
.md-button__background {
57+
background-color: map.get($theme, container-color);
58+
}
59+
4660
&:not(:disabled):hover {
4761
box-shadow: none;
4862
}
4963
5064
&:disabled {
51-
outline-color: rgba(map.get($theme, disabled-outline-color), map.get($theme, disabled-outline-opacity));
52-
color: rgba(map.get($theme, disabled-label-text-color), map.get($theme, disabled-label-text-opacity));
53-
}
65+
box-shadow: none;
5466
67+
.md-button__outline {
68+
outline-color: rgba(map.get($theme, disabled-outline-color), map.get($theme, disabled-outline-opacity));
69+
}
70+
.md-button__background {
71+
background-color: map.get($theme, disabled-container-color);
72+
opacity: map.get($theme, disabled-container-opacity);
73+
}
74+
.md-button__label {
75+
color: map.get($theme, disabled-label-text-color);
76+
opacity: map.get($theme, disabled-label-text-opacity);
77+
}
78+
}
5579
}
5680
</style>

‎src/components/button/MdTextButton.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
22
<MdButtonBase class="md-text-button" :disabled="disabled">
33
<MdRipple />
4-
<template v-if="label">
4+
<span v-if="label" class="md-button__label">
55
{{ label }}
6-
</template>
7-
<slot v-else />
6+
</span>
7+
<span v-else class="md-button__label">
8+
<slot />
9+
</span>
810
</MdButtonBase>
911
</template>
1012

0 commit comments

Comments
 (0)