@designcrowd/fe-shared-lib 1.0.1 → 1.0.2-ast-dropdown
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/{dist → public}/css/tailwind-brandCrowd.css +490 -565
- package/{dist → public}/css/tailwind-brandPage.css +414 -489
- package/{dist → public}/css/tailwind-crazyDomains.css +490 -565
- package/{dist → public}/css/tailwind-designCom.css +490 -565
- package/{dist → public}/css/tailwind-designCrowd.css +490 -565
- package/src/atoms/components/Dropdown/Dropdown.stories.js +7 -2
- package/src/atoms/components/Dropdown/Dropdown.vue +17 -0
- package/src/atoms/components/Slider/Slider.stories.js +7 -1
- package/src/atoms/components/Slider/Slider.vue +3 -1
|
@@ -15,10 +15,15 @@ export const Sample = () => {
|
|
|
15
15
|
DropdownItem,
|
|
16
16
|
Pill,
|
|
17
17
|
},
|
|
18
|
+
data() {
|
|
19
|
+
return {
|
|
20
|
+
show: true,
|
|
21
|
+
}
|
|
22
|
+
},
|
|
18
23
|
template: `
|
|
19
24
|
<div class="tw-font-sans tw-w-1/4">
|
|
20
|
-
<Dropdown menu-align="right">
|
|
21
|
-
<DropdownItem>
|
|
25
|
+
<Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible">
|
|
26
|
+
<DropdownItem @click="() => show = false">
|
|
22
27
|
<span class="tw-grow">Menu item 1</span>
|
|
23
28
|
<Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
|
|
24
29
|
</DropdownItem>
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
</div>
|
|
37
37
|
</template>
|
|
38
38
|
<script>
|
|
39
|
+
import { watch } from 'vue';
|
|
39
40
|
import Icon from '../Icon/Icon.vue';
|
|
40
41
|
|
|
41
42
|
export default {
|
|
@@ -67,6 +68,11 @@ export default {
|
|
|
67
68
|
required: false,
|
|
68
69
|
default: false,
|
|
69
70
|
},
|
|
71
|
+
show: {
|
|
72
|
+
type: Boolean,
|
|
73
|
+
required: false,
|
|
74
|
+
default: false,
|
|
75
|
+
}
|
|
70
76
|
},
|
|
71
77
|
data: () => ({
|
|
72
78
|
isMenuVisible: false,
|
|
@@ -76,15 +82,26 @@ export default {
|
|
|
76
82
|
return (this.$slots.default || []).filter((s) => s.tag);
|
|
77
83
|
},
|
|
78
84
|
},
|
|
85
|
+
watch: {
|
|
86
|
+
show() {
|
|
87
|
+
this.isMenuVisible = this.show;
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
mounted() {
|
|
91
|
+
this.isMenuVisible = this.show;
|
|
92
|
+
},
|
|
79
93
|
methods: {
|
|
80
94
|
onToggleMenu() {
|
|
81
95
|
this.isMenuVisible = !this.isMenuVisible;
|
|
96
|
+
this.$emit('update:show', this.isMenuVisible);
|
|
82
97
|
},
|
|
83
98
|
hideMenu() {
|
|
84
99
|
this.isMenuVisible = false;
|
|
100
|
+
this.$emit('update:show', false);
|
|
85
101
|
},
|
|
86
102
|
showMenu() {
|
|
87
103
|
this.isMenuVisible = true;
|
|
104
|
+
this.$emit('update:show', true);
|
|
88
105
|
},
|
|
89
106
|
},
|
|
90
107
|
};
|
|
@@ -15,7 +15,13 @@ export const SliderFontSize = () => {
|
|
|
15
15
|
Slider,
|
|
16
16
|
},
|
|
17
17
|
template: `
|
|
18
|
-
<
|
|
18
|
+
<div>
|
|
19
|
+
<div>Min 12, Max 128</div>
|
|
20
|
+
<Slider :min="12" :max="128" :model-value="16"/>
|
|
21
|
+
<div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
|
|
22
|
+
<Slider :min="0" :max="100" :model-value="16"/>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
19
25
|
`,
|
|
20
26
|
};
|
|
21
27
|
};
|
|
@@ -191,7 +191,9 @@ export default {
|
|
|
191
191
|
},
|
|
192
192
|
checkLimit(e) {
|
|
193
193
|
let newNumber = 0;
|
|
194
|
-
if (
|
|
194
|
+
if (e.target.value === '') {
|
|
195
|
+
newNumber = this.min;
|
|
196
|
+
} else if (Number.isNaN(this.sliderValue)) {
|
|
195
197
|
newNumber = this.min;
|
|
196
198
|
} else if (this.sliderValue <= this.min) {
|
|
197
199
|
newNumber = this.min;
|