Skip to content

Commit bedf6eb

Browse files
gdarkogdarko
committed
Restructure components for consistency
1 parent b04ed98 commit bedf6eb

File tree

20 files changed

+343
-325
lines changed

20 files changed

+343
-325
lines changed

‎package-lock.json‎

Lines changed: 284 additions & 283 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/views/components/Badge.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default defineComponent({
3131
break;
3232
case 'danger':
3333
case 'alert':
34+
case 'error':
3435
value = 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900';
3536
break;
3637
default:

‎resources/js/views/components/Form.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
import {useGlobalStateStore} from "@/stores";
1414
import Spinner from "@/views/components/icons/Spinner";
1515
import {computed, defineComponent, watch} from "vue";
16-
import {storeToRefs} from "pinia";
1716
1817
export default defineComponent({
1918
components: {Spinner},
@@ -29,10 +28,6 @@ export default defineComponent({
2928
isLoading: {
3029
type: Boolean,
3130
default: false,
32-
},
33-
bodyPadding: {
34-
type: Boolean,
35-
default: true,
3631
}
3732
},
3833
setup(props) {

‎resources/js/views/components/Modal.vue‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
<template>
22
<transition enter-active-class="transition ease-out duration-300" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
3-
<div v-show="showing" class="fixed inset-0 z-10 overflow-y-auto">
3+
<div v-show="$props.isShowing" class="fixed inset-0 z-10 overflow-y-auto">
44
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20">
55
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
66
<div class="absolute inset-0 bg-gray-800 opacity-75"></div>
77
</div>
88
<div class="m-8 inline-block align-middle w-full max-w-2xl transform transition-all">
9-
<button v-if="showClose" aria-label="close" class="absolute z-10 bg-white rounded-full py-2 px-2 -top-5 -right-5 cursor-pointer focus:outline-none" @click.prevent="onClose">
9+
<button v-if="$props.showClose" aria-label="close" class="absolute z-10 bg-white rounded-full py-2 px-2 -top-5 -right-5 cursor-pointer focus:outline-none" @click.prevent="onClose">
1010
<svg class="h-4 w-4 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1111
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
1212
</svg>
1313
</button>
1414
<div>
15-
<slot></slot>
15+
<template v-if="$props.isLoading">
16+
<div class="pt-10 pb-6 text-center">
17+
<Spinner/>
18+
</div>
19+
</template>
20+
<slot v-else></slot>
1621
</div>
1722
</div>
1823
</div>
@@ -25,16 +30,21 @@ import {defineComponent} from "vue";
2530
import Panel from "@/views/components/Panel.vue";
2631
import TextInput from "@/views/components/input/TextInput.vue";
2732
import Button from "@/views/components/input/Button.vue";
33+
import Spinner from "@/views/components/icons/Spinner.vue";
2834
2935
export default defineComponent({
30-
components: {Button, TextInput, Panel},
31-
emits: ['update:showing', 'close'],
36+
components: {Spinner, Button, TextInput, Panel},
37+
emits: ['update:isShowing', 'close'],
3238
props: {
3339
type: {
3440
type: String,
3541
default: 'simple',
3642
},
37-
showing: {
43+
isShowing: {
44+
type: Boolean,
45+
default: false
46+
},
47+
isLoading: {
3848
type: Boolean,
3949
default: false
4050
},
@@ -49,6 +59,7 @@ export default defineComponent({
4959
}
5060
return {
5161
onClose,
62+
5263
}
5364
}
5465
});

resources/js/views/components/DataTable.vue renamed to resources/js/views/components/Table.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import Spinner from "@/views/components/icons/Spinner";
6565
6666
export default defineComponent({
6767
components: {Spinner, Pager},
68-
emits: ['pageChanged', 'action', 'search', 'sort'],
68+
emits: ['pageChanged', 'action', 'sort'],
6969
props: {
7070
id: {
7171
type: String,
@@ -83,10 +83,6 @@ export default defineComponent({
8383
type: [Array, Object],
8484
default: [],
8585
},
86-
search: {
87-
type: [Array, Object],
88-
default: null,
89-
},
9086
sorting: {
9187
type: [Object],
9288
default: {}

‎resources/js/views/components/input/Button.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<template v-if="$props.icon"><i class="mr-1" :class="$props.icon"></i></template>
44
{{ $props.text }}
55
</router-link>
6-
<button v-else :type="type" :class="classes" @click="onClick">
6+
<button v-else :type="type" :class="classes" @click="onClick" :disabled="disabled">
77
<template v-if="$props.icon"><i class="mr-1" :class="$props.icon"></i></template>
88
{{ text }}
99
</button>
@@ -15,13 +15,13 @@ import {computed, defineComponent} from "vue";
1515
1616
export default defineComponent({
1717
props: {
18-
type: {
18+
label: {
1919
type: String,
20-
default: "submit",
20+
default: "Submit",
2121
},
22-
text: {
22+
type: {
2323
type: String,
24-
default: "Submit",
24+
default: "submit",
2525
},
2626
icon: {
2727
type: String,
@@ -31,6 +31,10 @@ export default defineComponent({
3131
type: String,
3232
default: "",
3333
},
34+
disabled: {
35+
type: Boolean,
36+
default: false,
37+
},
3438
theme: {
3539
type: String,
3640
default: ""

‎resources/js/views/components/input/Dropdown.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<label :for="name" class="text-sm text-gray-500" :class="{ 'sr-only': !showLabel }" v-if="label">
44
{{ label }}<span class="text-red-600" v-if="$props.required">*</span>
55
</label>
6-
<Multiselect track-by="id" label="title" v-model="value" :id="$props.name" :name="$props.name" :placeholder="$props.placeholder" :options="selectOptions" :multiple="$props.multiple" :searchable="!!$props.server" :loading="isLoading" :internal-search="false" :clear-on-select="true" :close-on-select="true" :max-height="400" :show-no-results="false" :hide-selected="true" open-direction="bottom" @search-change="handleSearch">
6+
<Multiselect track-by="id" label="title" v-model="value" :id="$props.name" :name="$props.name" :disabled="disabled" :placeholder="$props.placeholder" :options="selectOptions" :multiple="$props.multiple" :searchable="!!$props.server" :loading="isLoading" :internal-search="false" :clear-on-select="true" :close-on-select="true" :max-height="400" :show-no-results="false" :hide-selected="true" open-direction="bottom" @search-change="handleSearch">
77
</Multiselect>
88
</div>
99
</template>
@@ -43,6 +43,10 @@ export default defineComponent({
4343
type: Boolean,
4444
default: false,
4545
},
46+
disabled: {
47+
type: Boolean,
48+
default: false
49+
},
4650
placeholder: {
4751
type: String,
4852
default: null,

‎resources/js/views/components/input/FileInput.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,6 @@ export default defineComponent({
5656
default: null,
5757
type: [Array, Object, String],
5858
},
59-
disabled: {
60-
type: Boolean,
61-
default: false,
62-
},
6359
multiple: {
6460
type: [Boolean, String],
6561
default: false,
@@ -68,6 +64,10 @@ export default defineComponent({
6864
type: Boolean,
6965
default: false,
7066
},
67+
disabled: {
68+
type: Boolean,
69+
default: false,
70+
},
7171
accept: {
7272
type: String,
7373
default: '*/*'

‎resources/js/views/components/input/TextInput.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
:type="type"
1313
:value="modelValue"
1414
:required="required"
15+
:disabled="disabled"
1516
@input="onInput"
1617
:placeholder="placeholder"
1718
:autocomplete="autocomplete"
@@ -20,6 +21,7 @@
2021
:id="name"
2122
:value="modelValue"
2223
:required="required"
24+
:disabled="disabled"
2325
@input="onInput"
2426
:placeholder="placeholder"
2527
:autocomplete="autocomplete"
@@ -60,6 +62,10 @@ export default defineComponent({
6062
type: Boolean,
6163
default: false,
6264
},
65+
disabled: {
66+
type: Boolean,
67+
default: false,
68+
},
6369
placeholder: {
6470
type: String,
6571
default: null,

‎resources/js/views/layouts/Page.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
</div>
2626
<div class="flex items-center" v-if="$props.actions.length > 0">
2727
<slot v-for="(action, j) in $props.actions" :name="'page-actions-'+action.id">
28-
<Button v-if="action.hasOwnProperty('to') && action.to" :class="{'mr-3' : j < ($props.actions.length-1)}" :to="action.to" :title="action.name" :icon="action.hasOwnProperty('icon') ? action.icon : null" :theme="action.hasOwnProperty('theme') ? action.theme : null" :text="action.name"/>
29-
<Button v-else @click="onPageActionClick({action: action})" :class="{'mr-3' : j < ($props.actions.length-1)}" :title="action.name" :icon="action.hasOwnProperty('icon') ? action.icon : null" :theme="action.hasOwnProperty('theme') ? action.theme : null" :text="action.name"/>
28+
<Button v-if="action.hasOwnProperty('to') && action.to" :class="{'mr-3' : j < ($props.actions.length-1)}" :to="action.to" :title="action.name" :icon="action.hasOwnProperty('icon') ? action.icon : null" :theme="action.hasOwnProperty('theme') ? action.theme : null" :label="action.name"/>
29+
<Button v-else @click="onPageActionClick({action: action})" :class="{'mr-3' : j < ($props.actions.length-1)}" :title="action.name" :icon="action.hasOwnProperty('icon') ? action.icon : null" :theme="action.hasOwnProperty('theme') ? action.theme : null" :label="action.name"/>
3030
</slot>
3131
</div>
3232
</div>

0 commit comments

Comments
 (0)