jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

resolve conflict

Browse Source
This commit is contained in:
hirakei1203
2022-11-25 14:19:21 +09:00
parent 9ed0804cea d7fb36c616
commit 86535656e0
29 changed files with 11184 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button/composables/useButtonClasses.ts
View File

@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
},
}
const buttonSizeClasses: Record<ButtonSize, string> = {
xs: 'text-xs px-2 py-1',
sm: 'text-sm px-3 py-1.5',

10
src/components/Modal/Modal.vue
View File

@@ -9,13 +9,13 @@
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b dark:border-gray-600' : ''">
<div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''">
<slot name="header" />
<div>
<button @click="closeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<button @click="closeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<slot name="close-icon">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</slot>
</button>
</div>
<!-- Modal body -->
<div class="p-6" :class="$slots.header ? '' : 'pt-0'">

90
src/components/Navbar/Navbar.vue
View File

@@ -1,61 +1,27 @@
<template>
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
<nav :class="navbarClasses">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" class="flex items-center">
<!-- <img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />-->
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
<slot name="logo"/>
<button @click="toggleMobileMenu()" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<slot name="menu-icon">
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</slot>
</button>
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
<slot name="default" :isShowMenu="isShowMenu" />
<div v-if="slots['right-side']" class="flex md:order-2 hidden md:flex">
<slot name="right-side" />
</div>
</div>
</nav>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
import { useSlots, ref, computed } from 'vue'
import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
import classNames from 'classnames'
const props = defineProps({
border: {
type: Boolean,
default: false,
},
children: {
type: Array,
default() {
return []
},
},
className: {
type: String,
default: '',
},
fluid: {
type: Boolean,
default: false,
},
menuOpen: {
sticky: {
type: Boolean,
default: false,
},
@@ -63,6 +29,36 @@ const props = defineProps({
type: Boolean,
default: false,
},
solid: {
type: Boolean,
default: false,
},
})
const slots = useSlots()
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md')
const isShowMenuOnMobile = ref(false)
const toggleMobileMenu = useToggle(isShowMenuOnMobile)
const navbarBaseClasses = ' border-gray-200'
const navbarFloatClasses = 'fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600'
const navbarRoundedClasses = 'rounded'
const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
const navbarClasses = computed(() => {
return classNames(
navbarBaseClasses,
props.sticky ? navbarFloatClasses : '',
props.rounded ? navbarRoundedClasses: '',
props.solid ? navbarSolidClasses : navbarWhiteClasses,
)
})
const isShowMenu = computed(() => {
if(!isMobile) {
return true
} else {
return isShowMenuOnMobile.value
}
})
</script>

31
src/components/Navbar/NavbarCollapse.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div :class="menuClasses">
<ul :class="listClasses">
<slot name="default" />
</ul>
</div>
</template>
<script setup lang="ts">
import classNames from 'classnames'
import { computed } from 'vue'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md')
const props = defineProps({
isShowMenu: {
type: Boolean,
default: false,
},
})
const menuClassesDefault = 'w-full md:block md:w-auto'
const listClassesDefault = 'flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700'
const mobileListClasses = 'bg-gray-50'
const menuClasses = computed(() => {
return classNames(menuClassesDefault, props.isShowMenu ? '': 'hidden')
})
const listClasses = computed(() => {
return classNames(listClassesDefault, isMobile.value ? mobileListClasses : '')
})
</script>

61
src/components/Navbar/NavbarLink.ts Normal file
View File

@@ -0,0 +1,61 @@
import { defineComponent, h } from 'vue'
import classNames from 'classnames'
export default defineComponent({
name: 'NavbarLink',
props: {
link: {
type: String,
default: '/',
},
isActive: {
type: Boolean,
default: false,
},
component: {
type: [Object, String],
default: 'a',
},
linkAttr: {
type: String,
default: 'href',
},
disabled: {
type: Boolean,
default: false,
},
},
emits: [
'click',
],
setup(props, { slots, emit }) {
const currentPageClasses = 'bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white'
const defaultStateClasses = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent'
const defaultClasses = 'block py-2 pr-4 pl-3 rounded md:p-0'
const linkClasses = classNames(
defaultClasses,
props.isActive ? currentPageClasses : defaultStateClasses,
)
const handleClick = (event: Event) => {
if (props.disabled) {
return
}
emit('click', event)
}
return () =>
h('li', null, h(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
props.component,
{
...props,
class: linkClasses,
[props.linkAttr]: props.link,
onClick: handleClick,
},
{
default: () => slots.default && slots.default(),
},
))
},
})

60
src/components/Navbar/NavbarLogo.ts Normal file
View File

@@ -0,0 +1,60 @@
import { defineComponent, h } from 'vue'
export default defineComponent({
name: 'NavbarLogo',
props: {
link: {
type: String,
default: '/',
},
imageUrl: {
type: String,
default: '/assets/logo.svg',
},
alt: {
type: String,
default: 'Logo',
},
component: {
type: [Object, String],
default: 'a',
},
linkAttr: {
type: String,
default: 'href',
},
},
emits: [
'click',
],
setup(props, { slots }) {
return () =>
h(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
props.component,
{
[props.linkAttr]: props.link,
class: 'flex items-center',
},
{
default: () => [
h(
'img',
{
src: props.imageUrl,
class: 'mr-3 h-6 sm:h-10',
alt: props.alt,
},
),
h(
'span',
{
class: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white',
},
slots,
)],
},
)
},
})

32
src/components/Progress/Progress.vue
View File

@@ -1,23 +1,37 @@
<template>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
<div>
<template v-if="label || (labelProgress && labelPosition === 'outside')">
<div class="flex justify-between mb-1">
<span class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
<span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
</div>
</template>
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
<div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
<template v-if="labelProgress && labelPosition === 'inside'">
{{ progress }}%
</template>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { toRefs } from 'vue'
import type { PropType } from 'vue'
import { useProgressClasses } from './composables/useProgressClasses'
import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
const props = defineProps({
color: {
type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
default: 'blue',
type: String as PropType<ProgressVariant>,
default: 'default',
},
label: {
type: String,
default: 'progressbar',
default: '',
},
labelPosition: {
type: String, // 'inside' | 'outside' | 'none'
type: String as PropType<ProgressLabelPosition>,
default: 'none',
},
labelProgress: {
@@ -29,9 +43,11 @@ const props = defineProps({
default: 0,
},
size: {
type: String, // 'sm' | 'md' | 'lg' | 'xl'
type: String as PropType<ProgressSize>,
default: 'md',
},
})
const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
</script>

64
src/components/Progress/composables/useProgressClasses.ts Normal file
View File

@@ -0,0 +1,64 @@
import type { Ref } from 'vue'
import { computed } from 'vue'
import classNames from 'classnames'
import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
const barColorClasses: Record<ProgressVariant, string> = {
default: 'bg-blue-600 dark:bg-blue-600',
blue: 'bg-blue-600 dark:bg-blue-600',
dark: 'bg-gray-600 dark:bg-gray-300',
green: 'bg-green-600 dark:bg-green-500',
red: 'bg-red-600 dark:bg-red-500',
yellow: 'bg-yellow-400',
indigo: 'bg-indigo-600 dark:bg-indigo-500',
purple: 'bg-purple-600 dark:bg-purple-500',
}
const outsideTextColorClasses: Record<ProgressVariant, string> = {
default: '',
blue: 'text-blue-700 dark:text-blue-500',
dark: 'dark:text-white',
green: 'text-green-700 dark:text-green-500',
red: 'text-red-700 dark:text-red-500',
yellow: 'text-yellow-700 dark:text-yellow-500',
indigo: 'text-indigo-700 dark:text-indigo-500',
purple: 'text-purple-700 dark:text-purple-500',
}
const progressSizeClasses: Record<ProgressSize, string> = {
sm: 'h-1.5 text-xs leading-none',
md: 'h-2.5 text-xs leading-none',
lg: 'h-4 text-sm leading-none',
xl: 'h-6 text-base leading-tight',
}
export type UseProgressClassesProps = {
color: Ref<ProgressVariant>
size: Ref<ProgressSize>
labelPosition: Ref<ProgressLabelPosition>
}
export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
const bindClasses = computed(() => {
return classNames(
barColorClasses[props.color.value],
progressSizeClasses[props.size.value],
)
})
const outerClasses = computed(() => {
return classNames(
progressSizeClasses[props.size.value],
)
})
const outsideLabelClasses = computed(() => {
return classNames(
outsideTextColorClasses[props.color.value],
)
})
return {
innerClasses: bindClasses,
outerClasses,
outsideLabelClasses,
}
}

3
src/components/Progress/types.ts Normal file
View File

@@ -0,0 +1,3 @@
export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
export type ProgressLabelPosition = 'inside' | 'outside' | 'none'

2
src/components/utils/SlotListener/SlotListener.vue
View File

@@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
import type { VNode, PropType } from 'vue'
import type { SlotListenerTrigger, TriggerEventHandlers } from '@/components/utils/SlotListener/types'
import { getFirstSlotVNode } from '@/utils/getFirstSlotNode'
import pick from 'lodash/pick'
import { pick } from 'lodash-es'
// inspired from https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx

3
src/index.ts
View File

@@ -21,6 +21,9 @@ export { default as ListGroup } from './components/ListGroup/ListGroup.vue'
export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
export { default as Modal } from './components/Modal/Modal.vue'
export { default as Navbar } from './components/Navbar/Navbar.vue'
export { default as NavbarLogo } from './components/Navbar/NavbarLogo'
export { default as NavbarCollapse } from './components/Navbar/NavbarCollapse.vue'
export { default as NavbarLink } from './components/Navbar/NavbarLink'
export { default as Pagination } from './components/Pagination/Pagination.vue'
export { default as Progress } from './components/Progress/Progress.vue'
export { default as Rating } from './components/Rating/Rating.vue'