Skip to content

Commit

Permalink
fix: renamed component
Browse files Browse the repository at this point in the history
  • Loading branch information
@kouts
kouts committed Aug 21, 2022
1 parent 1835f74 commit c3052a6
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 25 deletions.
59 changes: 36 additions & 23 deletions playground/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import SimpleDropdown from '@/VueSimpleDropdown.vue'
import SimpleDropdown from '@/SimpleDropdown.vue'
import { ref } from 'vue'
const toggle1 = ref(true)
Expand All @@ -13,33 +13,33 @@ const toggle2 = ref(true)
<div class="grid grid-cols-2">
<div>
<div class="mt-4">
<button type="button" class="border py-2 px-4 rounded" @click="toggle1 = !toggle1">Show/hide dropdown</button>
<button type="button" class="border py-3 px-4 rounded" @click="toggle1 = !toggle1">Show/hide dropdown</button>
</div>
<div v-if="toggle1" class="mt-4">
<SimpleDropdown class="inline" popper-class="w-44 bg-white border rounded-lg shadow-md">
<!-- Popover trigger -->
<SimpleDropdown class="inline" popper-class="w-64 bg-white border rounded-lg shadow-md">
<!-- Dropdown trigger -->
<button
class="inline-block px-6 py-2.5 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
class="dropdown-trigger inline-block px-6 py-3 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
>
Click me
Dropdown button
</button>

<!-- Popover content -->
<!-- Dropdown content -->
<template #popper="{ hide }">
<ul class="py-1 text-sm text-gray-70">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none" @click="hide"
>Dashboard</a
>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none" @click="hide">
Action (closes dropdown)
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Settings</a>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Another action</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Earnings</a>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Something else here</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Sign out</a>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Last menu item</a>
</li>
</ul>
</template>
Expand All @@ -48,45 +48,45 @@ const toggle2 = ref(true)
</div>
<div>
<div class="mt-4">
<button type="button" class="border py-2 px-4 rounded" @click="toggle2 = !toggle2">Show/hide dropdown</button>
<button type="button" class="border py-3 px-4 rounded" @click="toggle2 = !toggle2">Show/hide dropdown</button>
</div>
<div v-if="toggle2" class="mt-4">
<SimpleDropdown
class="inline"
item-selector="li > button:not(.disabled):not(:disabled)"
popper-class="w-44 bg-white border rounded-lg shadow-md"
popper-class="w-64 bg-white border rounded-lg shadow-md"
>
<!-- Popover trigger -->
<!-- Dropdown trigger -->
<button
class="inline-block px-6 py-2.5 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
class="dropdown-trigger inline-block px-6 py-3 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
>
Click me
Dropdown button
</button>

<!-- Popover content -->
<!-- Dropdown content -->
<template #popper="{ hide }">
<ul class="py-1 text-sm text-gray-70">
<li>
<button
class="block py-2 w-full text-left px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none"
@click="hide"
>
Dashboard
Action (closes dropdown)
</button>
</li>
<li>
<button class="block py-2 w-full text-left px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">
Settings
Another action
</button>
</li>
<li>
<button class="block py-2 w-full text-left px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">
Earnings
Something else here
</button>
</li>
<li>
<button class="block py-2 w-full text-left px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">
Sign out
Last menu item
</button>
</li>
</ul>
Expand All @@ -97,3 +97,16 @@ const toggle2 = ref(true)
</div>
</div>
</template>

<style scoped>
.dropdown-trigger::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: '';
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
</style>
0 src/VueSimpleDropdown.types.ts → src/SimpleDropdown.types.ts
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/VueSimpleDropdown.vue → src/SimpleDropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</template>

<script setup lang="ts">
import { BaseDropdownRef, Props } from './VueSimpleDropdown.types'
import { BaseDropdownRef, Props } from './SimpleDropdown.types'
import { Dropdown } from 'floating-vue'
import { getNextActiveElement, isVisible } from './utils'
import { onBeforeUnmount, ref } from 'vue'
Expand Down
2 changes: 1 addition & 1 deletion src/VueSimpleDropdownNoFocus.vue → src/SimpleDropdownNoFocus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</template>

<script setup lang="ts">
import { BaseDropdownRef, Props } from './VueSimpleDropdown.types'
import { BaseDropdownRef, Props } from './SimpleDropdown.types'
import { Dropdown } from 'floating-vue'
import { getNextActiveElement, isVisible } from './utils'
import { onBeforeUnmount, ref } from 'vue'
Expand Down

0 comments on commit c3052a6

Please sign in to comment.