first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false)
|
||||
defineExpose({
|
||||
dialog
|
||||
});
|
||||
|
||||
// const model = defineModel<boolean>();
|
||||
|
||||
const props = defineProps({
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: 'Confirm Action'
|
||||
},
|
||||
|
||||
dialogMessage: {
|
||||
type: String,
|
||||
default: 'Are you sure you want to perform this action?'
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['confirm']);
|
||||
|
||||
function handleConfirmDialog(data: any) {
|
||||
emit('confirm'); // Memberitahu parent untuk tambah data
|
||||
dialog.value = false; // Tutup dialog
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="dialog" persistent class="dialog-mw" max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="warning" class="w-100" v-bind="props" flat> Open Confirm Dialog </v-btn>
|
||||
</template>
|
||||
<v-card class="pa-6">
|
||||
<v-card-title class="text-h5">
|
||||
{{ dialogTitle}}
|
||||
</v-card-title>
|
||||
<v-card-text>{{ dialogMessage }}</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="tonal" @click="dialog = false" flat>
|
||||
Tidak
|
||||
</v-btn>
|
||||
<v-btn color="success" variant="tonal" @click="handleConfirmDialog(1)" flat>
|
||||
Ya
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center mt-4 mt-sm-0">
|
||||
<v-btn color="primary" class="w-100" flat>
|
||||
Open Simple Dialog
|
||||
<v-dialog v-model="dialog" activator="parent" class="dialog-mw">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" @click="dialog = false" variant="tonal"
|
||||
>Close Dialog</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<!-- Form -->
|
||||
<!-- ----------------------------------------------------------------------------- -->
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" persistent class="dialog-mw">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="warning" class="w-100" v-bind="props" flat> Open Form Dialog </v-btn>
|
||||
</template>
|
||||
<v-card style="height: 400px" class="overflow-auto">
|
||||
<v-container>
|
||||
<v-card-title class="pa-5">
|
||||
<span class="text-h5">User Profile</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field label="Legal first name*" required></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
label="Legal middle name"
|
||||
hint="example of helper text only on focus"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field
|
||||
label="Legal last name*"
|
||||
hint="example of persistent helper text"
|
||||
persistent-hint
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Email*" required></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
label="Password*"
|
||||
type="password"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-select
|
||||
:items="['0-17', '18-29', '30-54', '54+']"
|
||||
label="Age*"
|
||||
required
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-autocomplete
|
||||
:items="[
|
||||
'Skiing',
|
||||
'Ice hockey',
|
||||
'Soccer',
|
||||
'Basketball',
|
||||
'Hockey',
|
||||
'Reading',
|
||||
'Writing',
|
||||
'Coding',
|
||||
'Basejump',
|
||||
]"
|
||||
label="Interests"
|
||||
multiple
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<small>*indicates required field</small>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" @click="dialog = false" variant="tonal" flat>
|
||||
Close
|
||||
</v-btn>
|
||||
<v-btn color="success" @click="dialog = false" variant="tonal" flat>
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {XIcon } from "vue-tabler-icons"
|
||||
const dialog = ref(false);
|
||||
const notifications = ref(false);
|
||||
const sound = ref(true);
|
||||
const widgets = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
fullscreen
|
||||
:scrim="false"
|
||||
transition="dialog-bottom-transition"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="error" class="w-100" dark v-bind="props" flat> Open Fullscreen Dialog </v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-toolbar dark color="primary" style="flex: unset">
|
||||
<v-btn icon color="inherit" @click="dialog = false" flat>
|
||||
<XIcon width="20" />
|
||||
</v-btn>
|
||||
<v-toolbar-title>Settings</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<v-btn dark variant="text" @click="dialog = false" flat> Save </v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
<v-card-item>
|
||||
<v-list lines="two" subheader>
|
||||
User Controls
|
||||
<v-list-item
|
||||
title="Content filtering"
|
||||
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Password"
|
||||
subtitle="Require password for purchase or use password to restrict purchase"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list lines="two" subheader>
|
||||
General
|
||||
<v-list-item
|
||||
title="Notifications"
|
||||
subtitle="Notify me about updates to apps or games that I downloaded"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-checkbox v-model="notifications"></v-checkbox>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
title="Sound"
|
||||
subtitle="Auto-update apps at any time. Data charges may apply"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-checkbox v-model="sound"></v-checkbox>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
title="Auto-add widgets"
|
||||
subtitle="Automatically add home screen widgets"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-checkbox v-model="widgets"></v-checkbox>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-btn color="secondary" class="w-100" @click="dialog = true" flat> Open Dialog </v-btn>
|
||||
<v-dialog v-model="dialog" class="dialog-mw">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" @click="dialog = false" variant="tonal"
|
||||
>Close Dialog</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false);
|
||||
const dialog2 = ref(false);
|
||||
const dialog3 = ref(false);
|
||||
const notifications = ref(false);
|
||||
const sound = ref(true);
|
||||
const widgets = ref(false);
|
||||
const items = ref([
|
||||
{
|
||||
title: "Click Me",
|
||||
},
|
||||
{
|
||||
title: "Click Me",
|
||||
},
|
||||
{
|
||||
title: "Click Me",
|
||||
},
|
||||
{
|
||||
title: "Click Me 2",
|
||||
},
|
||||
]);
|
||||
const select = ref([
|
||||
{ text: "State 1" },
|
||||
{ text: "State 2" },
|
||||
{ text: "State 3" },
|
||||
{ text: "State 4" },
|
||||
{ text: "State 5" },
|
||||
{ text: "State 6" },
|
||||
{ text: "State 7" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-btn color="secondary" class=" w-100" @click="dialog = true" flat>
|
||||
Open Dialog 1
|
||||
</v-btn>
|
||||
<v-dialog v-model="dialog" class="dialog-mw">
|
||||
<v-card class="pa-6">
|
||||
<v-card-title> Dialog 1 </v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" class="" @click="dialog2 = true" flat>
|
||||
Open Dialog 2
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="error" variant="tonal" @click="dialog = false" flat> Close </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialog2" class="dialog-mw">
|
||||
<v-card class="pa-6">
|
||||
<v-card-title> Dialog 2 </v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="secondary" @click="dialog3 = !dialog3" flat>
|
||||
Open Dialog 3
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="error" variant="tonal" @click="dialog2 = false" flat> Close </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialog3" class="dialog-mw">
|
||||
<v-card class="pa-6">
|
||||
<v-card-title>
|
||||
<span>Dialog 3</span>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn color="error" variant="tonal" @click="dialog3 = false" flat> Close </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" persistent class="dialog-mw">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" class="w-100" v-bind="props" flat> Open Dialog </v-btn>
|
||||
</template>
|
||||
<v-card class="pa-6">
|
||||
<v-card-title class="text-h5">
|
||||
Use Google's location service?
|
||||
</v-card-title>
|
||||
<v-card-text
|
||||
>Let Google help apps determine location. This means sending anonymous
|
||||
location data to Google, even when no apps are running.</v-card-text
|
||||
>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="tonal" @click="dialog = false" flat>
|
||||
Disagree
|
||||
</v-btn>
|
||||
<v-btn color="success" variant="tonal" @click="dialog = false" flat>
|
||||
Agree
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialogm1 = ref("");
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" scrollable class="dialog-mw">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="success" class="w-100" v-bind="props" flat> Open Scrolling Dialog </v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Select Country</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text style="height: 300px" class="overflow-auto">
|
||||
<v-radio-group v-model="dialogm1" column>
|
||||
<v-radio label="Bahamas, The" value="bahamas"></v-radio>
|
||||
<v-radio label="Bahrain" value="bahrain"></v-radio>
|
||||
<v-radio label="Bangladesh" value="bangladesh"></v-radio>
|
||||
<v-radio label="Barbados" value="barbados"></v-radio>
|
||||
<v-radio label="Belarus" value="belarus"></v-radio>
|
||||
<v-radio label="Belgium" value="belgium"></v-radio>
|
||||
<v-radio label="Belize" value="belize"></v-radio>
|
||||
<v-radio label="Benin" value="benin"></v-radio>
|
||||
<v-radio label="Bhutan" value="bhutan"></v-radio>
|
||||
<v-radio label="Bolivia" value="bolivia"></v-radio>
|
||||
<v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
|
||||
<v-radio label="Botswana" value="botswana"></v-radio>
|
||||
<v-radio label="Brazil" value="brazil"></v-radio>
|
||||
<v-radio label="Brunei" value="brunei"></v-radio>
|
||||
<v-radio label="Bulgaria" value="bulgaria"></v-radio>
|
||||
<v-radio label="Burkina Faso" value="burkina"></v-radio>
|
||||
<v-radio label="Burma" value="burma"></v-radio>
|
||||
<v-radio label="Burundi" value="burundi"></v-radio>
|
||||
</v-radio-group>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn color="error" variant="tonal" @click="dialog = false">
|
||||
Close
|
||||
</v-btn>
|
||||
<v-btn color="success" variant="tonal" @click="dialog = false">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const dialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog transition="dialog-bottom-transition" class="dialog-mw">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="success" class="w-100" v-bind="props" flat>Open Transition Dialog</v-btn>
|
||||
</template>
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card>
|
||||
<v-toolbar color="primary" class="px-4">Opening from the bottom</v-toolbar>
|
||||
<v-card-item>
|
||||
<div class="text-h2 pa-12">Hello world!</div>
|
||||
</v-card-item>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn variant="tonal" @click="isActive.value = false" flat>Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
// defineModel membuat variabel 'modelValue' yang otomatis sinkron dengan Parent
|
||||
const isOpen = defineModel<boolean>({ default: false });
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, default: 'Konfirmasi' },
|
||||
message: { type: String, default: '' }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action-ya']);
|
||||
|
||||
const handleYa = () => {
|
||||
emit('action-ya'); // Kirim sinyal ke parent untuk proses data
|
||||
isOpen.value = false; // Tutup modal
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="isOpen" persistent max-width="450">
|
||||
<v-card class="pa-4" rounded="xl">
|
||||
<v-card-title class="text-h5 font-weight-bold">
|
||||
{{ title }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="text-body-1">
|
||||
{{ message }}
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
color="pink-lighten-5"
|
||||
class="text-pink-accent-2 px-6"
|
||||
variant="flat"
|
||||
rounded="lg"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
Tidak
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
color="cyan-lighten-5"
|
||||
class="text-cyan-darken-1 px-6"
|
||||
variant="flat"
|
||||
rounded="lg"
|
||||
@click="handleYa"
|
||||
>
|
||||
Ya
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user