Components renaming (#225)
* refactor: eslint config adjusted for better diff's * refactor: stricter linting + dependencies updated * refactoring: paragraph component - component - docs * refactoring: heading component - component - docs * Update docs/components/heading.md Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com> * refactoring: link component - component - docs * refactoring: image component - component - docs * refactoring: alert component - component - docs * refactoring: avatar component - component - docs * refactoring: removed unnecessary code - component names come from the file name * refactoring: breadcrumb component - component - docs * refactoring: accordion component - component - docs * refactoring: buttom component - component - docs * refactoring: badge component - component - docs * refactoring: card component - component - docs * refactoring: order of components in docs updated * refactoring: unnecessary semicolons removed * refactoring: button group component - component - docs * refactoring: carousel component - component - docs * refactoring: dropdown component - component - docs * refactoring: footer component - component - docs * refactoring:list-group component - component - docs * refactoring: modal component - component - docs * refactoring: navbar component - component - docs * refactoring: pagination component - component - docs * refactoring: progress component - component - docs * refactoring: rating component - component - docs * refactoring: spinner component - component - docs * refactoring: table component - component - docs * refactoring: tabs component - component - docs * feat: Updated pagination examples * lint: Lister fixes * feat: Sidebar component and some fixes * feat: Input component * feat: Some fixes * feat: Some fixes * chore: update deps * refactor: removed old Modal component * refactor: radio component and some fixes * fix: fixed path error * refactor: Range component * refactoring: timeline component - component - docs * refactor: Select component * refactoring: toast component - component - docs * refactoring: tooltip component - component - docs * refactoring: sidebar component - component - docs * refactoring: input component - component - docs * refactoring: fileInput component - component - docs * refactoring: select component - component - docs * refactoring: textarea component - component - docs * refactoring: checkbox component - component - docs * refactoring: radio component - component - docs * refactoring: toggle component - component - docs * refactoring: range component - component - docs * local configs linted * documentation quick start updated * flowbite-themable refactored to fit new linters and style guide * random linter fixes * refactoring: toast-provider component - component - docs * final linter fixes * lint: Linter fixes * fix: Fixed types * fix: Fixed card component * docs: Updated card examples * fix: Fixed tabs * refactor: Heading component refactoring * Fwb rename - few fixes after component review (#237) * fix: button documentation * fix: model type in range examples * chore: Toast marked as WIP --------- Co-authored-by: Sqrcz <naorniakowski@slashlab.pl> Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
GitHub
@@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div class="vp-raw flex justify-start">
|
||||
<button @click="showModal" type="button" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<fwb-button @click="showModal">
|
||||
{{ triggerText }}
|
||||
</button>
|
||||
<Modal :escapable="escapable" :size="size" v-if="isShowModal" @close="closeModal" :persistent="persistent">
|
||||
</fwb-button>
|
||||
<fwb-modal
|
||||
v-if="isShowModal"
|
||||
:not-escapable="notEscapable"
|
||||
:persistent="persistent"
|
||||
:size="size"
|
||||
@close="closeModal"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center text-lg">
|
||||
Terms of Service
|
||||
@@ -19,40 +25,49 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-between">
|
||||
<button @click="closeModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
|
||||
<fwb-button
|
||||
color="alternative"
|
||||
@click="closeModal"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
<button @click="closeModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
</fwb-button>
|
||||
<fwb-button
|
||||
color="green"
|
||||
@click="closeModal"
|
||||
>
|
||||
I accept
|
||||
</button>
|
||||
</fwb-button>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</fwb-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Modal } from '../../../../src/index'
|
||||
import type { ModalSize } from '../../../../src/components/Modal/types'
|
||||
import { ref } from 'vue'
|
||||
import { FwbButton, FwbModal } from '../../../../src/index'
|
||||
import { type ModalSize } from '../../../../src/components/FwbModal/types'
|
||||
|
||||
interface ModalProps {
|
||||
size?: ModalSize,
|
||||
escapable?: boolean,
|
||||
notEscapable?: boolean,
|
||||
persistent?: boolean,
|
||||
triggerText?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<ModalProps>(), {
|
||||
size: '2xl',
|
||||
escapable: true,
|
||||
notEscapable: false,
|
||||
persistent: false,
|
||||
triggerText: 'Demo Modal',
|
||||
triggerText: 'Open Modal',
|
||||
})
|
||||
|
||||
const isShowModal = ref(false)
|
||||
function closeModal() {
|
||||
|
||||
function closeModal () {
|
||||
isShowModal.value = false
|
||||
}
|
||||
function showModal() {
|
||||
|
||||
function showModal () {
|
||||
isShowModal.value = true
|
||||
}
|
||||
</script>
|
||||
13
docs/components/modal/examples/FwbModalExampleEscapable.vue
Normal file
13
docs/components/modal/examples/FwbModalExampleEscapable.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="vp-raw flex justify-start space-x-2">
|
||||
<fwb-modal-example trigger-text="Escapable" />
|
||||
<fwb-modal-example
|
||||
not-escapable
|
||||
trigger-text="Not Escapable"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FwbModalExample from './FwbModalExample.vue'
|
||||
</script>
|
||||
12
docs/components/modal/examples/FwbModalExamplePersistent.vue
Normal file
12
docs/components/modal/examples/FwbModalExamplePersistent.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="vp-raw">
|
||||
<fwb-modal-example
|
||||
persistent
|
||||
trigger-text="Persistent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FwbModalExample from './FwbModalExample.vue'
|
||||
</script>
|
||||
32
docs/components/modal/examples/FwbModalExampleSize.vue
Normal file
32
docs/components/modal/examples/FwbModalExampleSize.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="vp-raw flex justify-start space-x-2">
|
||||
<span>
|
||||
<fwb-modal-example
|
||||
size="xs"
|
||||
trigger-text="SM Modal"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<fwb-modal-example
|
||||
size="md"
|
||||
trigger-text="MD Modal"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<fwb-modal-example
|
||||
size="xl"
|
||||
trigger-text="XL Modal"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<fwb-modal-example
|
||||
size="5xl"
|
||||
trigger-text="5XL Modal"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FwbModalExample from './FwbModalExample.vue'
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div class="vp-raw flex justify-start space-x-2">
|
||||
<span>
|
||||
<ModalExample trigger-text="Escapable" />
|
||||
</span>
|
||||
<span>
|
||||
<ModalExample :escapable="false" trigger-text="Not Escapable" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ModalExample from './ModalExample.vue'
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<div class="vp-raw">
|
||||
<ModalExample trigger-text="Persistent" :persistent="true" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ModalExample from './ModalExample.vue'
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="vp-raw flex justify-start space-x-2">
|
||||
<span>
|
||||
<ModalExample size="xs" trigger-text="SM Modal" />
|
||||
</span>
|
||||
<span>
|
||||
<ModalExample size="md" trigger-text="MD Modal" />
|
||||
</span>
|
||||
<span>
|
||||
<ModalExample size="xl" trigger-text="XL Modal" />
|
||||
</span>
|
||||
<span>
|
||||
<ModalExample size="5xl" trigger-text="5XL Modal" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ModalExample from './ModalExample.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user