Done Komponen, borang and datatable.
This commit is contained in:
parent
9662587eda
commit
45bd30b143
@ -40,4 +40,4 @@ npm run preview
|
||||
```
|
||||
|
||||
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
|
||||
# corrad
|
||||
# Niise
|
||||
|
||||
2
app.vue
2
app.vue
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
useHead({
|
||||
title: "corrad | Innovative solutions for captivating content",
|
||||
title: "Niise | Innovative solutions for captivating content",
|
||||
description: "Home page",
|
||||
htmlAttrs: {
|
||||
lang: "en",
|
||||
|
||||
@ -2,6 +2,7 @@ import { createInput } from "@formkit/vue";
|
||||
import OneTimePassword from "~/components/formkit/OneTimePassword.vue";
|
||||
import MaskText from "~/components/formkit/TextMask.vue";
|
||||
import FileDropzone from "~/components/formkit/FileDropzone.vue";
|
||||
import Toggle from "~/components/formkit/Toggle.vue";
|
||||
|
||||
export default {
|
||||
otp: createInput(OneTimePassword, {
|
||||
@ -13,4 +14,7 @@ export default {
|
||||
dropzone: createInput(FileDropzone, {
|
||||
props: ["accept", "multiple", "maxSize", "minSize", "maxFiles", "disabled"],
|
||||
}),
|
||||
toggle: createInput(Toggle, {
|
||||
props: ["onLabel", "offLabel"],
|
||||
}),
|
||||
};
|
||||
|
||||
92
assets/json/data.json
Normal file
92
assets/json/data.json
Normal file
@ -0,0 +1,92 @@
|
||||
[
|
||||
{
|
||||
"id": "#001",
|
||||
"firstName": "John",
|
||||
"lastName": "Doe",
|
||||
"email": "johndoe@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Active",
|
||||
"age": 34
|
||||
},
|
||||
{
|
||||
"id": "#002",
|
||||
"firstName": "Jane",
|
||||
"lastName": "Smith",
|
||||
"email": "janesmith@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Inactive",
|
||||
"age": 28
|
||||
},
|
||||
{
|
||||
"id": "#003",
|
||||
"firstName": "Robert",
|
||||
"lastName": "Brown",
|
||||
"email": "robertbrown@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Banned",
|
||||
"age": 45
|
||||
},
|
||||
{
|
||||
"id": "#004",
|
||||
"firstName": "Emily",
|
||||
"lastName": "White",
|
||||
"email": "emilywhite@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Active",
|
||||
"age": 37
|
||||
},
|
||||
{
|
||||
"id": "#005",
|
||||
"firstName": "Michael",
|
||||
"lastName": "Johnson",
|
||||
"email": "michaeljohnson@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Inactive",
|
||||
"age": 50
|
||||
},
|
||||
{
|
||||
"id": "#006",
|
||||
"firstName": "Linda",
|
||||
"lastName": "Williams",
|
||||
"email": "lindawilliams@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Active",
|
||||
"age": 32
|
||||
},
|
||||
{
|
||||
"id": "#007",
|
||||
"firstName": "James",
|
||||
"lastName": "Taylor",
|
||||
"email": "jamestaylor@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Banned",
|
||||
"age": 40
|
||||
},
|
||||
{
|
||||
"id": "#008",
|
||||
"firstName": "Patricia",
|
||||
"lastName": "Brown",
|
||||
"email": "patriciabrown@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Inactive",
|
||||
"age": 29
|
||||
},
|
||||
{
|
||||
"id": "#009",
|
||||
"firstName": "David",
|
||||
"lastName": "Wilson",
|
||||
"email": "davidwilson@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Active",
|
||||
"age": 38
|
||||
},
|
||||
{
|
||||
"id": "#010",
|
||||
"firstName": "Elizabeth",
|
||||
"lastName": "Garcia",
|
||||
"email": "elizabethgarcia@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Banned",
|
||||
"age": 42
|
||||
}
|
||||
]
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
.accordion.accordion-border {
|
||||
@apply border-t border-x rounded-lg;
|
||||
border-color: rgb(var(--border));
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group {
|
||||
@ -16,12 +16,12 @@
|
||||
|
||||
.accordion .accordion-group.accordion-default {
|
||||
@apply border-b;
|
||||
border-color: rgb(var(--border));
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group.accordion-border {
|
||||
@apply border-b last:rounded-b-lg;
|
||||
border-color: rgb(var(--border));
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group.accordion-card {
|
||||
|
||||
@ -274,7 +274,6 @@
|
||||
}
|
||||
|
||||
.tab .tab-content {
|
||||
@apply rounded-lg;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.formkit-label {
|
||||
@apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
|
||||
}
|
||||
|
||||
.formkit-fieldset-box {
|
||||
@apply max-w-md border border-[rgb(var(--fk-border-color))] rounded-lg px-4 py-2;
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.formkit-outer-text {
|
||||
@apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
|
||||
}
|
||||
|
||||
.formkit-inner-text {
|
||||
@apply flex
|
||||
items-center
|
||||
|
||||
@ -27,11 +27,11 @@ const refreshPage = () => {
|
||||
>
|
||||
<svg class="h-14 w-14 animate-spin" viewBox="3 3 18 18">
|
||||
<path
|
||||
class="fill-[#1F2C3A]/10"
|
||||
class="fill-[#00A59A]/10"
|
||||
d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-[#1F2C3A]"
|
||||
class="fill-[#00A59A]"
|
||||
d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
@ -4,6 +4,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -51,7 +55,10 @@ onMounted(() => {
|
||||
'alert-danger': variant === 'danger',
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon v-if="icon" :name="icon" />
|
||||
<slot />
|
||||
</div>
|
||||
<button @click="showComponent = false">
|
||||
<Icon name="ic:baseline-close" size="14"></Icon>
|
||||
</button>
|
||||
|
||||
@ -623,7 +623,7 @@ watch(
|
||||
options.variant === 'warning' && options.striped,
|
||||
'border-danger/20 odd:bg-white even:bg-danger/5':
|
||||
options.variant === 'danger' && options.striped,
|
||||
'cursor-pointer hover:bg-[rgb(var(--text-color))]':
|
||||
'cursor-pointer hover:bg-slate-300':
|
||||
options.hover && options.variant === 'default',
|
||||
'cursor-pointer hover:bg-primary/5':
|
||||
options.hover && options.variant === 'primary',
|
||||
|
||||
36
components/formkit/Toggle.vue
Normal file
36
components/formkit/Toggle.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
context: Object,
|
||||
});
|
||||
|
||||
function handleChange(event) {
|
||||
props.context.node.input(event.target.checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label
|
||||
:class="context.classes.toggle"
|
||||
class="inline-flex items-center mb-5 cursor-pointer mt-1"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="context.value"
|
||||
:disabled="context.disabled"
|
||||
class="sr-only peer"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<div
|
||||
class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all peer-checked:bg-blue-600"
|
||||
></div>
|
||||
<span class="ms-3 text-sm font-medium text-gray-900">
|
||||
{{
|
||||
context.onLabel || context.offLabel
|
||||
? context.value
|
||||
? context.onLabel
|
||||
: context.offLabel
|
||||
: context.label
|
||||
}}
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
@ -3,7 +3,7 @@
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: "corrad",
|
||||
name: "Niise",
|
||||
port: "3000",
|
||||
exec_mode: "cluster",
|
||||
instances: "max",
|
||||
|
||||
@ -35,12 +35,36 @@ export default [
|
||||
title: "Komponen",
|
||||
icon: "ph:gear-fine",
|
||||
child: [
|
||||
{
|
||||
title: "Amaran",
|
||||
path: "/komponen/amaran",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Butang",
|
||||
path: "/komponen/butang",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Lencana",
|
||||
path: "/komponen/lencana",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Collapse",
|
||||
path: "/komponen/collapse",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Dropdown",
|
||||
path: "/komponen/dropdown",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Modal",
|
||||
path: "/komponen/modal",
|
||||
@ -48,13 +72,32 @@ export default [
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Data Table",
|
||||
path: "/komponen/datatable",
|
||||
title: "Progress Bar",
|
||||
path: "/komponen/progress-bar",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Tab",
|
||||
path: "/komponen/tab",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Datatable",
|
||||
path: "/datatable",
|
||||
icon: "ph:table",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Borang",
|
||||
path: "/borang",
|
||||
icon: "ph:clipboard-text",
|
||||
child: [],
|
||||
},
|
||||
{
|
||||
title: "Ikon",
|
||||
path: "/ikon",
|
||||
|
||||
@ -23,14 +23,14 @@ export default defineNuxtConfig({
|
||||
pageTransition: { name: "page", mode: "out-in" },
|
||||
},
|
||||
head: {
|
||||
title: "corrad",
|
||||
title: "Niise",
|
||||
meta: [
|
||||
{ charset: "utf-8" },
|
||||
{ name: "viewport", content: "width=device-width, initial-scale=1" },
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "corrad",
|
||||
content: "Niise",
|
||||
},
|
||||
],
|
||||
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
|
||||
@ -60,9 +60,9 @@ export default defineNuxtConfig({
|
||||
type: "module",
|
||||
},
|
||||
manifest: {
|
||||
name: "corrad",
|
||||
short_name: "corrad",
|
||||
theme_color: "#202D3B",
|
||||
name: "Niise",
|
||||
short_name: "Niise",
|
||||
theme_color: "#00A59A",
|
||||
background_color: "#FAFAFA",
|
||||
display: "standalone",
|
||||
scope: "./",
|
||||
|
||||
952
pages/borang/index.vue
Normal file
952
pages/borang/index.vue
Normal file
@ -0,0 +1,952 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Borang",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Komponen",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const showCode = reactive({});
|
||||
const tooltips = reactive({});
|
||||
|
||||
const toggleCode = (section) => {
|
||||
showCode[section] = !showCode[section];
|
||||
};
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips[codeId] = null;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
date: "",
|
||||
time: "",
|
||||
number: 0,
|
||||
textarea: "",
|
||||
select: "",
|
||||
checkbox: [],
|
||||
radio: "",
|
||||
range: 50,
|
||||
file: null,
|
||||
toggle: false,
|
||||
});
|
||||
|
||||
const options = [
|
||||
{ label: "Option 1", value: "1" },
|
||||
{ label: "Option 2", value: "2" },
|
||||
{ label: "Option 3", value: "3" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<!-- Text Input -->
|
||||
<rs-card>
|
||||
<template #header>Text Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>text</code> sebagai jenis input untuk teks biasa.
|
||||
</p>
|
||||
<FormKit
|
||||
type="text"
|
||||
name="name"
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama anda"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('text')"
|
||||
>
|
||||
{{ showCode.text ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.text" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeText')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeText']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeText"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeText" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="text"
|
||||
name="name"
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama anda"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Email Input -->
|
||||
<rs-card>
|
||||
<template #header>Email Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>email</code> sebagai jenis input untuk alamat email.
|
||||
</p>
|
||||
<FormKit
|
||||
type="email"
|
||||
name="email"
|
||||
label="Alamat Email"
|
||||
placeholder="nama@contoh.com"
|
||||
v-model="formData.email"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('email')"
|
||||
>
|
||||
{{ showCode.email ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.email" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeEmail')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeEmail']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeEmail"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeEmail" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="email"
|
||||
name="email"
|
||||
label="Alamat Email"
|
||||
placeholder="nama@contoh.com"
|
||||
v-model="formData.email"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Password Input -->
|
||||
<rs-card>
|
||||
<template #header>Password Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>password</code> sebagai jenis input untuk kata laluan.
|
||||
</p>
|
||||
<FormKit
|
||||
type="password"
|
||||
name="password"
|
||||
label="Kata Laluan"
|
||||
placeholder="Masukkan kata laluan"
|
||||
v-model="formData.password"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('password')"
|
||||
>
|
||||
{{ showCode.password ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.password" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codePassword')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codePassword']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codePassword"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codePassword" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="password"
|
||||
name="password"
|
||||
label="Kata Laluan"
|
||||
placeholder="Masukkan kata laluan"
|
||||
v-model="formData.password"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Date Input -->
|
||||
<rs-card>
|
||||
<template #header>Date Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>date</code> sebagai jenis input untuk memilih tarikh.
|
||||
</p>
|
||||
<FormKit
|
||||
type="date"
|
||||
name="date"
|
||||
label="Pilih Tarikh"
|
||||
v-model="formData.date"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('date')"
|
||||
>
|
||||
{{ showCode.date ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.date" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeDate')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeDate']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeDate"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeDate" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="date"
|
||||
name="date"
|
||||
label="Pilih Tarikh"
|
||||
v-model="formData.date"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Time Input -->
|
||||
<rs-card>
|
||||
<template #header>Time Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>time</code> sebagai jenis input untuk memilih masa.
|
||||
</p>
|
||||
<FormKit
|
||||
type="time"
|
||||
name="time"
|
||||
label="Pilih Masa"
|
||||
v-model="formData.time"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('time')"
|
||||
>
|
||||
{{ showCode.time ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.time" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeTime')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeTime']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeTime"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeTime" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="time"
|
||||
name="time"
|
||||
label="Pilih Masa"
|
||||
v-model="formData.time"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Number Input -->
|
||||
<rs-card>
|
||||
<template #header>Number Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>number</code> sebagai jenis input untuk nombor.
|
||||
</p>
|
||||
<FormKit
|
||||
type="number"
|
||||
name="number"
|
||||
label="Nombor"
|
||||
v-model="formData.number"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('number')"
|
||||
>
|
||||
{{ showCode.number ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.number" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeNumber')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeNumber']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeNumber"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeNumber" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="number"
|
||||
name="number"
|
||||
label="Nombor"
|
||||
v-model="formData.number"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Textarea Input -->
|
||||
<rs-card>
|
||||
<template #header>Textarea Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>textarea</code> sebagai jenis input untuk teks panjang.
|
||||
</p>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
name="textarea"
|
||||
label="Textarea"
|
||||
placeholder="Masukkan teks panjang di sini"
|
||||
v-model="formData.textarea"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('textarea')"
|
||||
>
|
||||
{{ showCode.textarea ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.textarea" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeTextarea')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeTextarea']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeTextarea"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeTextarea" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
name="textarea"
|
||||
label="Textarea"
|
||||
placeholder="Masukkan teks panjang di sini"
|
||||
v-model="formData.textarea"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Select Input -->
|
||||
<rs-card>
|
||||
<template #header>Select Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>select</code> sebagai jenis input untuk pilihan dari
|
||||
senarai.
|
||||
</p>
|
||||
<FormKit
|
||||
type="select"
|
||||
name="select"
|
||||
label="Pilih Satu"
|
||||
placeholder="Pilih satu pilihan"
|
||||
:options="options"
|
||||
v-model="formData.select"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('select')"
|
||||
>
|
||||
{{ showCode.select ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.select" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeSelect')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeSelect']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeSelect"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeSelect" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="select"
|
||||
name="select"
|
||||
label="Pilih Satu"
|
||||
placeholder="Pilih satu pilihan"
|
||||
:options="options"
|
||||
v-model="formData.select"
|
||||
/>
|
||||
|
||||
// In script setup:
|
||||
const options = [
|
||||
{ label: 'Option 1', value: '1' },
|
||||
{ label: 'Option 2', value: '2' },
|
||||
{ label: 'Option 3', value: '3' },
|
||||
];
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Checkbox Input -->
|
||||
<rs-card>
|
||||
<template #header>Checkbox Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>checkbox</code> sebagai jenis input untuk pilihan
|
||||
berbilang.
|
||||
</p>
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
name="checkbox"
|
||||
label="Pilihan"
|
||||
:options="options"
|
||||
v-model="formData.checkbox"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('checkbox')"
|
||||
>
|
||||
{{ showCode.checkbox ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.checkbox" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeCheckbox')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeCheckbox']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeCheckbox"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeCheckbox" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
name="checkbox"
|
||||
label="Pilihan"
|
||||
:options="options"
|
||||
v-model="formData.checkbox"
|
||||
/>
|
||||
|
||||
// In script setup:
|
||||
const options = [
|
||||
{ label: 'Option 1', value: '1' },
|
||||
{ label: 'Option 2', value: '2' },
|
||||
{ label: 'Option 3', value: '3' },
|
||||
];
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Radio Input -->
|
||||
<rs-card>
|
||||
<template #header>Radio Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>radio</code> sebagai jenis input untuk pilihan tunggal.
|
||||
</p>
|
||||
<FormKit
|
||||
type="radio"
|
||||
name="radio"
|
||||
label="Pilihan"
|
||||
:options="options"
|
||||
v-model="formData.radio"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('radio')"
|
||||
>
|
||||
{{ showCode.radio ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.radio" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeRadio')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeRadio']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeRadio"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeRadio" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="radio"
|
||||
name="radio"
|
||||
label="Pilihan"
|
||||
:options="options"
|
||||
v-model="formData.radio"
|
||||
/>
|
||||
|
||||
// In script setup:
|
||||
const options = [
|
||||
{ label: 'Option 1', value: '1' },
|
||||
{ label: 'Option 2', value: '2' },
|
||||
{ label: 'Option 3', value: '3' },
|
||||
];
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Range Input -->
|
||||
<rs-card>
|
||||
<template #header>Range Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>range</code> sebagai jenis input untuk memilih nilai
|
||||
dalam julat tertentu.
|
||||
</p>
|
||||
<FormKit
|
||||
type="range"
|
||||
name="range"
|
||||
label="Julat"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
v-model="formData.range"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('range')"
|
||||
>
|
||||
{{ showCode.range ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.range" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeRange')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeRange']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeRange"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeRange" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="range"
|
||||
name="range"
|
||||
label="Julat"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
v-model="formData.range"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- File Input -->
|
||||
<rs-card>
|
||||
<template #header>Fail Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>file</code> sebagai jenis input untuk memuat naik fail.
|
||||
</p>
|
||||
<FormKit
|
||||
type="file"
|
||||
name="file"
|
||||
label="Muat Naik Fail"
|
||||
accept="image/*"
|
||||
v-model="formData.file"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('file')"
|
||||
>
|
||||
{{ showCode.file ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.file" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeFile')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeFile']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeFile"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeFile" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="file"
|
||||
name="file"
|
||||
label="Muat Naik Fail"
|
||||
accept="image/*"
|
||||
v-model="formData.file"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Toggle Input -->
|
||||
<rs-card>
|
||||
<template #header>Toggle Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>toggle</code> sebagai jenis input untuk suis on/off.
|
||||
</p>
|
||||
<FormKit
|
||||
type="toggle"
|
||||
name="toggle"
|
||||
label="Toggle"
|
||||
onLabel="Hidup"
|
||||
offLabel="Mati"
|
||||
v-model="formData.toggle"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('toggle')"
|
||||
>
|
||||
{{ showCode.toggle ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.toggle" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeToggle')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeToggle']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeToggle"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeToggle" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="toggle"
|
||||
name="toggle"
|
||||
label="Toggle"
|
||||
onLabel="Hidup"
|
||||
offLabel="Mati"
|
||||
v-model="formData.toggle"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Validation Input -->
|
||||
<rs-card>
|
||||
<template #header>Validasi Input</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>validation</code> untuk menambah validasi pada input.
|
||||
Beberapa contoh validasi termasuk <code>required</code>,
|
||||
<code>email</code>, <code>min</code>, <code>max</code>, dan banyak
|
||||
lagi. Anda boleh lihat dengan lebih terperinci di
|
||||
<a
|
||||
href="https://formkit.com/essentials/validation"
|
||||
class="text-info underline"
|
||||
>input validasi</a
|
||||
>
|
||||
</p>
|
||||
<FormKit
|
||||
type="text"
|
||||
name="name"
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama anda"
|
||||
v-model="formData.name"
|
||||
validation="required|min:3|max:20"
|
||||
:validation-messages="{
|
||||
required: 'Nama diperlukan',
|
||||
min: 'Nama terlalu pendek',
|
||||
max: 'Nama terlalu panjang',
|
||||
}"
|
||||
/>
|
||||
<FormKit
|
||||
type="email"
|
||||
name="email"
|
||||
label="Alamat Email"
|
||||
placeholder="nama@contoh.com"
|
||||
v-model="formData.email"
|
||||
validation="required|email"
|
||||
:validation-messages="{
|
||||
required: 'Email diperlukan',
|
||||
email: 'Format email tidak sah',
|
||||
}"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
name="age"
|
||||
label="Umur"
|
||||
placeholder="Masukkan umur anda"
|
||||
v-model="formData.age"
|
||||
validation="required|min:18|max:60"
|
||||
:validation-messages="{
|
||||
required: 'Umur diperlukan',
|
||||
min: 'Umur minimum adalah 18',
|
||||
max: 'Umur maksimum adalah 60',
|
||||
}"
|
||||
/>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="toggleCode('validation')"
|
||||
>
|
||||
{{ showCode.validation ? "Sembunyi Kod" : "Tunjuk Kod" }}
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode.validation" class="relative" v-highlight>
|
||||
<button
|
||||
@click="copyCode('codeValidation')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-400 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<span
|
||||
v-if="tooltips['codeValidation']"
|
||||
class="absolute top-4 right-20 bg-black text-white text-xs rounded py-1 px-2 z-20"
|
||||
>
|
||||
{{ tooltips["codeValidation"] }}
|
||||
</span>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="codeValidation" class="language-html shadow-none">
|
||||
<code>
|
||||
<FormKit
|
||||
type="text"
|
||||
name="name"
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama anda"
|
||||
v-model="formData.name"
|
||||
validation="required|min:3|max:20"
|
||||
:validation-messages="{ required: 'Nama diperlukan', min: 'Nama terlalu pendek', max: 'Nama terlalu panjang' }"
|
||||
/>
|
||||
|
||||
<FormKit
|
||||
type="email"
|
||||
name="email"
|
||||
label="Alamat Email"
|
||||
placeholder="nama@contoh.com"
|
||||
v-model="formData.email"
|
||||
validation="required|email"
|
||||
:validation-messages="{ required: 'Email diperlukan', email: 'Format email tidak sah' }"
|
||||
/>
|
||||
|
||||
<FormKit
|
||||
type="number"
|
||||
name="age"
|
||||
label="Umur"
|
||||
placeholder="Masukkan umur anda"
|
||||
v-model="formData.age"
|
||||
validation="required|min:18|max:60"
|
||||
:validation-messages="{ required: 'Umur diperlukan', min: 'Umur minimum adalah 18', max: 'Umur maksimum adalah 60' }"
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
294
pages/datatable/index.vue
Normal file
294
pages/datatable/index.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<script setup>
|
||||
import data from "@/assets/json/data.json";
|
||||
definePageMeta({
|
||||
title: "Data Table",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Data Table",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const fields = ["ID", "Nama Penuh", "Umur", "Emel"];
|
||||
|
||||
const showCode1 = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<!-- Basic Table Example -->
|
||||
<rs-card>
|
||||
<template #header> Datatable Asas </template>
|
||||
<template #body>
|
||||
<rs-table
|
||||
:field="fields"
|
||||
:data="data"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
hover: true,
|
||||
fixed: false,
|
||||
}"
|
||||
basic
|
||||
>
|
||||
</rs-table>
|
||||
<div class="flex justify-end mt-2">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode1" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-table
|
||||
:field="fields"
|
||||
:data="data"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
hover: true,
|
||||
fixed: false,
|
||||
}"
|
||||
basic
|
||||
>
|
||||
</rs-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{
|
||||
"id": "#001",
|
||||
"namaPenuh": "John Doe",
|
||||
"umur": 34,
|
||||
"emel": "johndoe@example.com"
|
||||
},
|
||||
{
|
||||
"id": "#002",
|
||||
"namaPenuh": "Jane Smith",
|
||||
"umur": 28,
|
||||
"emel": "janesmith@example.com"
|
||||
},
|
||||
{
|
||||
"id": "#003",
|
||||
"namaPenuh": "Robert Brown",
|
||||
"umur": 45,
|
||||
"emel": "robertbrown@example.com"
|
||||
},
|
||||
{
|
||||
"id": "#004",
|
||||
"namaPenuh": "Emily White",
|
||||
"umur": 37,
|
||||
"emel": "emilywhite@example.com"
|
||||
}
|
||||
];
|
||||
const fields = ["ID", "Nama Penuh", "Umur", "Emel"];
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Advanced Table Example -->
|
||||
<rs-card>
|
||||
<template #header> Datatable Maju</template>
|
||||
<template #body>
|
||||
<rs-table
|
||||
:data="data"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
}"
|
||||
:options-advanced="{
|
||||
sortable: true,
|
||||
responsive: true,
|
||||
filterable: false,
|
||||
}"
|
||||
advanced
|
||||
>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge
|
||||
:variant="
|
||||
data.text === 'Active'
|
||||
? 'success'
|
||||
: data.text == 'Inactive'
|
||||
? 'warning'
|
||||
: 'danger'
|
||||
"
|
||||
>
|
||||
{{ data.text }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
</rs-table>
|
||||
<div class="flex justify-end mt-2">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode2" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-table
|
||||
:data="data"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
}"
|
||||
:options-advanced="{
|
||||
sortable: true,
|
||||
responsive: true,
|
||||
filterable: false,
|
||||
}"
|
||||
advanced
|
||||
>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge
|
||||
:variant="
|
||||
data.text === 'Active'
|
||||
? 'success'
|
||||
: data.text == 'Inactive'
|
||||
? 'warning'
|
||||
: 'danger'
|
||||
">
|
||||
{{ data.text }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
</rs-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{
|
||||
"id": "#001",
|
||||
"namaPenuh": "John Doe",
|
||||
"umur": 34,
|
||||
"emel": "johndoe@example.com",
|
||||
"status": "Active"
|
||||
},
|
||||
{
|
||||
"id": "#002",
|
||||
"namaPenuh": "Jane Smith",
|
||||
"umur": 28,
|
||||
"emel": "janesmith@example.com",
|
||||
"status": "Inactive"
|
||||
},
|
||||
{
|
||||
"id": "#003",
|
||||
"namaPenuh": "Robert Brown",
|
||||
"umur": 45,
|
||||
"emel": "robertbrown@example.com",
|
||||
"status": "Banned"
|
||||
},
|
||||
{
|
||||
"id": "#004",
|
||||
"namaPenuh": "Emily White",
|
||||
"umur": 37,
|
||||
"emel": "emilywhite@example.com",
|
||||
"status": "Active"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
@ -14,13 +14,16 @@ definePageMeta({
|
||||
});
|
||||
|
||||
const copyToClipboard = (text) => {
|
||||
let tagHtml = '<i class="icon-' + text + '"></i>';
|
||||
navigator.clipboard.writeText(tagHtml);
|
||||
let tagHtml = '<Icon name="' + text + '" />';
|
||||
navigator.clipboard.writeText(tagHtml).then(() => {
|
||||
showTooltip(text, "Kod disalin!");
|
||||
});
|
||||
};
|
||||
|
||||
const searchQuery = ref("");
|
||||
const displayedIcons = ref([]);
|
||||
const containerRef = ref(null);
|
||||
const tooltips = reactive({});
|
||||
const batchSize = 50;
|
||||
let currentIndex = 0;
|
||||
|
||||
@ -46,6 +49,13 @@ const resetIconDisplay = () => {
|
||||
loadMoreIcons();
|
||||
};
|
||||
|
||||
const showTooltip = (iconName, message) => {
|
||||
tooltips[iconName] = message;
|
||||
setTimeout(() => {
|
||||
tooltips[iconName] = null;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
watch(searchQuery, () => {
|
||||
resetIconDisplay();
|
||||
nextTick(() => {
|
||||
@ -93,18 +103,28 @@ const handleScroll = () => {
|
||||
<div
|
||||
v-for="icon in displayedIcons"
|
||||
:key="icon.name"
|
||||
class="flex items-center"
|
||||
class="flex items-center relative"
|
||||
>
|
||||
<Icon :name="icon.name" class="!w-10 !h-10 mr-4"></Icon>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm">{{ icon.name }}</div>
|
||||
<rs-button
|
||||
@click="copyToClipboard(icon.name)"
|
||||
class="!text-xs !py-1 !px-2 !mt-1"
|
||||
>
|
||||
<Icon name="ph:copy" class="!w-4 !h-4 mr-1"></Icon>
|
||||
Copy
|
||||
</rs-button>
|
||||
<div class="relative">
|
||||
<rs-button
|
||||
@click="copyToClipboard(icon.name)"
|
||||
class="!text-xs !py-1 !px-2 !mt-1 relative"
|
||||
>
|
||||
<Icon name="ph:copy" class="!w-4 !h-4 mr-1"></Icon>
|
||||
Salin Kod
|
||||
</rs-button>
|
||||
<transition name="fade">
|
||||
<span
|
||||
v-if="tooltips[icon.name]"
|
||||
class="absolute top-4 left-0 mt-4 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips[icon.name] }}
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
226
pages/komponen/amaran/index.vue
Normal file
226
pages/komponen/amaran/index.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Amaran",
|
||||
});
|
||||
|
||||
const showCode = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
const autoDismiss = ref(false);
|
||||
const timer = ref(1000);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
|
||||
const resetAlert = () => {
|
||||
autoDismiss.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
<rs-card>
|
||||
<template #header>
|
||||
<h5>Amaran Biasa</h5>
|
||||
</template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan <code>rs-alert</code> untuk menunjukkan amaran.
|
||||
</p>
|
||||
<rs-alert
|
||||
variant="primary"
|
||||
icon="iconamoon:information-circle"
|
||||
class="mb-4"
|
||||
>
|
||||
Hai, ini adalah amaran primary!
|
||||
</rs-alert>
|
||||
<rs-alert
|
||||
variant="info"
|
||||
icon="iconamoon:information-circle"
|
||||
class="mb-4"
|
||||
>
|
||||
Hai, ini adalah amaran info!
|
||||
</rs-alert>
|
||||
<rs-alert
|
||||
variant="success"
|
||||
icon="iconamoon:information-circle"
|
||||
class="mb-4"
|
||||
>
|
||||
Hai, ini adalah amaran success!
|
||||
</rs-alert>
|
||||
<rs-alert
|
||||
variant="warning"
|
||||
icon="iconamoon:information-circle"
|
||||
class="mb-4"
|
||||
>
|
||||
Hai, ini adalah amaran warning!
|
||||
</rs-alert>
|
||||
<rs-alert
|
||||
variant="danger"
|
||||
icon="iconamoon:information-circle"
|
||||
class="mb-4"
|
||||
>
|
||||
Hai, ini adalah amaran danger!
|
||||
</rs-alert>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode ? (showCode = false) : (showCode = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-alert variant="primary" icon="iconamoon:information-circle">Hai, ini adalah amaran primary!</rs-alert>
|
||||
<rs-alert variant="info" icon="iconamoon:information-circle">Hai, ini adalah amaran info!</rs-alert>
|
||||
<rs-alert variant="success" icon="iconamoon:information-circle">Hai, ini adalah amaran success!</rs-alert>
|
||||
<rs-alert variant="warning" icon="iconamoon:information-circle">Hai, ini adalah amaran warning!</rs-alert>
|
||||
<rs-alert variant="danger" icon="iconamoon:information-circle">Hai, ini adalah amaran danger!</rs-alert>
|
||||
</template>
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header>
|
||||
<h5>Pemberhentian Automatik</h5>
|
||||
</template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan prop <code>auto-dismiss</code> untuk memberhentikan amaran
|
||||
secara automatik. Pemasa lalai adalah 1000ms. Anda boleh menukar
|
||||
pemasa dengan memberikan nilai kepada prop <code>timer</code>.
|
||||
</p>
|
||||
<rs-alert v-if="!autoDismiss" variant="primary" class="mb-4"
|
||||
>Hai, ini adalah amaran yang tidak diberhentikan secara
|
||||
automatik!</rs-alert
|
||||
>
|
||||
<rs-alert
|
||||
v-else
|
||||
variant="primary"
|
||||
class="mb-4"
|
||||
auto-dismiss
|
||||
:timer="timer"
|
||||
>Hai, ini adalah amaran yang diberhentikan secara automatik!</rs-alert
|
||||
>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<FormKit
|
||||
type="number"
|
||||
name="timer"
|
||||
value="1000"
|
||||
step="100"
|
||||
v-model="timer"
|
||||
:classes="{
|
||||
outer: 'mb-0',
|
||||
inner: '!mb-0',
|
||||
}"
|
||||
/>
|
||||
<rs-button @click="resetAlert"> Tetapkan Pemasa</rs-button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode2" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-alert auto-dismiss :timer="1000">Hai, ini adalah amaran yang diberhentikan secara automatik!</rs-alert>
|
||||
</template>
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
@ -14,20 +14,30 @@ const showCode2 = ref(false);
|
||||
const showCode3 = ref(false);
|
||||
const showCode4 = ref(false);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
// You can add a notification here if you want to inform the user that the code was copied
|
||||
console.log("Code copied to clipboard");
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to copy code: ", err);
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -36,16 +46,18 @@ const copyCode = (codeId) => {
|
||||
<rs-card>
|
||||
<template #header> Default </template>
|
||||
<template #body>
|
||||
<p class="mb-4">Use the <code>rs-button</code> to show badges.</p>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>rs-button</code> untuk menunjukkan lencana.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button> Button </rs-button>
|
||||
<rs-button> Butang </rs-button>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Show Code
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
@ -56,19 +68,27 @@ const copyCode = (codeId) => {
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Copy
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre class="language-html shadow-none">
|
||||
<code id="code1">
|
||||
<template>
|
||||
<rs-button>Button</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button>Butang</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,12 +98,12 @@ const copyCode = (codeId) => {
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Variant </template>
|
||||
<template #header> Variasi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Button variant uses props <code>variant</code> to change the color of
|
||||
the button. There are 6 variants: <code>primary</code>,
|
||||
<code>info</code>, <code>success</code>, <code>warning</code> and
|
||||
Variasi butang menggunakan prop <code>variant</code> untuk menukar
|
||||
warna butang. Terdapat 6 variasi: <code>primary</code>,
|
||||
<code>info</code>, <code>success</code>, <code>warning</code> dan
|
||||
<code>danger</code>.
|
||||
</p>
|
||||
|
||||
@ -101,28 +121,45 @@ const copyCode = (codeId) => {
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Show Code
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode2" v-highlight>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button variant="primary">Primary</rs-button>
|
||||
<rs-button variant="secondary">Secondary</rs-button>
|
||||
<rs-button variant="info">Info</rs-button>
|
||||
<rs-button variant="success">Success</rs-button>
|
||||
<rs-button variant="warning">Warning</rs-button>
|
||||
<rs-button variant="danger">Danger</rs-button>
|
||||
</template>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button variant="primary">Primary</rs-button>
|
||||
<rs-button variant="secondary">Secondary</rs-button>
|
||||
<rs-button variant="info">Info</rs-button>
|
||||
<rs-button variant="success">Success</rs-button>
|
||||
<rs-button variant="warning">Warning</rs-button>
|
||||
<rs-button variant="danger">Danger</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
@ -130,15 +167,15 @@ const copyCode = (codeId) => {
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Variant Type </template>
|
||||
<template #header> Jenis Variasi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Button variant type uses props <code>variant</code> to change the
|
||||
shape of the button. There are 3 variant types: <code>fill</code>,
|
||||
<code>outline</code> and <code>text</code>. <code>fill</code> is the
|
||||
default. <code>outline</code> is used to create a button with a
|
||||
border. <code>text</code> is used to create a button with no border
|
||||
and no background.
|
||||
Jenis variasi butang menggunakan prop <code>variant</code> untuk
|
||||
menukar bentuk butang. Terdapat 3 jenis variasi: <code>fill</code>,
|
||||
<code>outline</code> dan <code>text</code>. <code>fill</code> adalah
|
||||
default. <code>outline</code> digunakan untuk membuat butang dengan
|
||||
sempadan. <code>text</code> digunakan untuk membuat butang tanpa
|
||||
sempadan dan latar belakang.
|
||||
</p>
|
||||
|
||||
<!-- Fill Button -->
|
||||
@ -197,45 +234,62 @@ const copyCode = (codeId) => {
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
|
||||
>
|
||||
Show Code
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode3" v-highlight>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<!-- Fill Button -->
|
||||
<rs-button variant="primary">Primary</rs-button>
|
||||
<rs-button variant="secondary">Secondary</rs-button>
|
||||
<rs-button variant="info">Info</rs-button>
|
||||
<rs-button variant="success">Success</rs-button>
|
||||
<rs-button variant="warning">Warning</rs-button>
|
||||
<rs-button variant="danger">Danger</rs-button>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code3')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code3']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code3"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<!-- Outline Button -->
|
||||
<rs-button variant="primary-outline">Primary</rs-button>
|
||||
<rs-button variant="secondary-outline">Secondary</rs-button>
|
||||
<rs-button variant="info-outline">Info</rs-button>
|
||||
<rs-button variant="success-outline">Success</rs-button>
|
||||
<rs-button variant="warning-outline">Warning</rs-button>
|
||||
<rs-button variant="danger-outline">Danger</rs-button>
|
||||
|
||||
<!-- Text Button -->
|
||||
<rs-button variant="primary-text">Primary</rs-button>
|
||||
<rs-button variant="secondary-text">Secondary</rs-button>
|
||||
<rs-button variant="info-text">Info</rs-button>
|
||||
<rs-button variant="success-text">Success</rs-button>
|
||||
<rs-button variant="warning-text">Warning</rs-button>
|
||||
<rs-button variant="danger-text">Danger</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code3" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<!-- Fill Button -->
|
||||
<rs-button variant="primary">Primary</rs-button>
|
||||
<rs-button variant="secondary">Secondary</rs-button>
|
||||
<rs-button variant="info">Info</rs-button>
|
||||
<rs-button variant="success">Success</rs-button>
|
||||
<rs-button variant="warning">Warning</rs-button>
|
||||
<rs-button variant="danger">Danger</rs-button>
|
||||
|
||||
<!-- Outline Button -->
|
||||
<rs-button variant="primary-outline">Primary</rs-button>
|
||||
<rs-button variant="secondary-outline">Secondary</rs-button>
|
||||
<rs-button variant="info-outline">Info</rs-button>
|
||||
<rs-button variant="success-outline">Success</rs-button>
|
||||
<rs-button variant="warning-outline">Warning</rs-button>
|
||||
<rs-button variant="danger-outline">Danger</rs-button>
|
||||
|
||||
<!-- Text Button -->
|
||||
<rs-button variant="primary-text">Primary</rs-button>
|
||||
<rs-button variant="secondary-text">Secondary</rs-button>
|
||||
<rs-button variant="info-text">Info</rs-button>
|
||||
<rs-button variant="success-text">Success</rs-button>
|
||||
<rs-button variant="warning-text">Warning</rs-button>
|
||||
<rs-button variant="danger-text">Danger</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
@ -243,43 +297,60 @@ const copyCode = (codeId) => {
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Size </template>
|
||||
<template #header> Saiz </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Button size uses props <code>size</code> to change the size of button.
|
||||
There are 3 sizes: <code>small</code>, <code>medium</code> and
|
||||
Saiz butang menggunakan prop <code>size</code> untuk menukar saiz
|
||||
butang. Terdapat 3 saiz: <code>small</code>, <code>medium</code> dan
|
||||
<code>large</code>.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button size="sm"> Small </rs-button>
|
||||
<rs-button size="md"> Medium </rs-button>
|
||||
<rs-button size="lg"> Large </rs-button>
|
||||
<rs-button size="sm"> Kecil </rs-button>
|
||||
<rs-button size="md"> Sederhana </rs-button>
|
||||
<rs-button size="lg"> Besar </rs-button>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@click="showCode4 ? (showCode4 = false) : (showCode4 = true)"
|
||||
>
|
||||
Show Code
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode4" v-highlight>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button size="sm">Small</rs-button>
|
||||
<rs-button size="md">Medium</rs-button>
|
||||
<rs-button size="lg">Large</rs-button>
|
||||
</template>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code4')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code4']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code4"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code4" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button size="sm">Kecil</rs-button>
|
||||
<rs-button size="md">Sederhana</rs-button>
|
||||
<rs-button size="lg">Besar</rs-button>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
@ -287,3 +358,15 @@ const copyCode = (codeId) => {
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
315
pages/komponen/collapse/index.vue
Normal file
315
pages/komponen/collapse/index.vue
Normal file
@ -0,0 +1,315 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Collapse",
|
||||
});
|
||||
|
||||
const type = ref("default");
|
||||
const showCode1 = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
const showCode3 = ref(false);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<!-- Default Collapse Example -->
|
||||
<rs-card>
|
||||
<template #header> Default </template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan <code>rs-collapse</code> untuk menunjukkan collapse.
|
||||
<code>rs-collapse-item</code> digunakan untuk menunjukkan item
|
||||
collapse.
|
||||
</p>
|
||||
<rs-collapse>
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
<p class="text-justify">
|
||||
Lorem Ipsum adalah teks rekaan semata-mata dalam industri
|
||||
percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
|
||||
rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
|
||||
dikenali mengambil alih sebatang jenis dan mengocoknya untuk
|
||||
membuat buku spesimen jenis.
|
||||
</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
<p>Kandungan Collapse Item 2</p>
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode1" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-collapse>
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
<p class="text-justify">
|
||||
Lorem Ipsum adalah teks rekaan semata-mata dalam industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks rekaan piawai industri sejak 1500-an.
|
||||
</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
<p>Kandungan Collapse Item 2</p>
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Accordion Example -->
|
||||
<rs-card>
|
||||
<template #header> Accordion </template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan prop <code>accordion</code> kepada
|
||||
<code>rs-collapse</code> untuk menjadikannya sebagai accordion.
|
||||
</p>
|
||||
<rs-collapse accordion>
|
||||
<rs-collapse-item title="Accordion Item 1">
|
||||
<p class="text-justify">
|
||||
Lorem Ipsum adalah teks rekaan semata-mata dalam industri
|
||||
percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
|
||||
rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
|
||||
dikenali mengambil alih sebatang jenis dan mengocoknya untuk
|
||||
membuat buku spesimen jenis.
|
||||
</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Accordion Item 2">
|
||||
<p>Kandungan Accordion Item 2</p>
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode2" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-collapse accordion>
|
||||
<rs-collapse-item title="Accordion Item 1">
|
||||
<p class="text-justify">
|
||||
Lorem Ipsum adalah teks rekaan semata-mata dalam industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks rekaan piawai industri sejak 1500-an.
|
||||
</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Accordion Item 2">
|
||||
<p>Kandungan Accordion Item 2</p>
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Type Example -->
|
||||
<rs-card>
|
||||
<template #header> Jenis </template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan prop <code>type</code> kepada <code>rs-collapse</code> untuk
|
||||
menetapkan jenisnya. Jenis boleh menjadi <code>default</code>,
|
||||
<code>border</code>, dan <code>card</code>.
|
||||
</p>
|
||||
<FormKit
|
||||
v-model="type"
|
||||
type="radio"
|
||||
label="Jenis"
|
||||
:options="[
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Border', value: 'border' },
|
||||
{ label: 'Card', value: 'card' },
|
||||
]"
|
||||
/>
|
||||
<rs-collapse :type="type">
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
<p class="text-justify">
|
||||
Lorem Ipsum adalah teks rekaan semata-mata dalam industri
|
||||
percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi teks
|
||||
rekaan piawai industri sejak 1500-an, apabila pencetak yang tidak
|
||||
dikenali mengambil alih sebatang jenis dan mengocoknya untuk
|
||||
membuat buku spesimen jenis.
|
||||
</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
<p>Kandungan Collapse Item 2</p>
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 3">
|
||||
<p>Kandungan Collapse Item 3</p>
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode3" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code3')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code3']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code3"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code3" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<!-- Default Styling('default') -->
|
||||
<rs-collapse>
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
Kandungan Collapse Item 1
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
Kandungan Collapse Item 2
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
|
||||
<!-- Border Styling('border') -->
|
||||
<rs-collapse type="border">
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
Kandungan Collapse Item 1
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
Kandungan Collapse Item 2
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
|
||||
<!-- Card Styling('card') -->
|
||||
<rs-collapse type="card">
|
||||
<rs-collapse-item title="Collapse Item 1">
|
||||
Kandungan Collapse Item 1
|
||||
</rs-collapse-item>
|
||||
<rs-collapse-item title="Collapse Item 2">
|
||||
Kandungan Collapse Item 2
|
||||
</rs-collapse-item>
|
||||
</rs-collapse>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Data Table",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Data Table",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
657
pages/komponen/dropdown/index.vue
Normal file
657
pages/komponen/dropdown/index.vue
Normal file
@ -0,0 +1,657 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Dropdown",
|
||||
});
|
||||
|
||||
const showCode1 = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
const showCode3 = ref(false);
|
||||
const showCode4 = ref(false);
|
||||
const showCode5 = ref(false);
|
||||
const tooltips = ref({});
|
||||
|
||||
const dropdownItems = [
|
||||
{
|
||||
label: "Item 1 - Application",
|
||||
route: { name: "dashboard" },
|
||||
},
|
||||
{
|
||||
label: "Item 2 - Dashboard",
|
||||
route: { name: "dashboard" },
|
||||
},
|
||||
{
|
||||
label: "Item 3 - Items",
|
||||
route: { name: "dashboard" },
|
||||
},
|
||||
];
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch(() => {
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
<rs-card>
|
||||
<template #header> Dropdown Biasa </template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan <code>rs-dropdown</code> untuk menunjukkan dropdown.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Biasa" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
|
||||
<rs-dropdown title="Divider" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item divider> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode1" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-dropdown title="Biasa">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Divider">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item divider> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Variasi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Variasi dropdown menggunakan prop <code>variant</code> untuk menukar
|
||||
warna butang.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Primary" variant="primary" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode2" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-dropdown title="Primary" variant="primary">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Jenis Variasi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Variasi dropdown menggunakan prop <code>variant</code> untuk menukar
|
||||
warna butang.
|
||||
</p>
|
||||
|
||||
<!-- Fill Button -->
|
||||
<div class="my-6">
|
||||
<div
|
||||
class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
|
||||
>
|
||||
Fill
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Primary" variant="primary" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outline Button -->
|
||||
<div class="my-6">
|
||||
<div
|
||||
class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
|
||||
>
|
||||
Outline
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Primary" variant="primary-outline" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info-outline" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success-outline" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning-outline" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger-outline" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Button -->
|
||||
<div class="my-6">
|
||||
<div
|
||||
class="font-semibold text-lg bg-[rgb(var(--bg-1))] w-full mb-4 pl-2"
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Primary" variant="primary-text" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info-text" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success-text" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning-text" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger-text" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode3" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code3')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code3']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code3"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code3" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<!-- Fill Dropdown -->
|
||||
<rs-dropdown title="Primary" variant="primary">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
|
||||
<!-- Outline Dropdown -->
|
||||
<rs-dropdown title="Primary" variant="primary-outline">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info-outline">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success-outline">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning-outline">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger-outline">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
|
||||
<!-- Text Dropdown -->
|
||||
<rs-dropdown title="Primary" variant="primary-text">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Info" variant="info-text">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Success" variant="success-text">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Warning" variant="warning-text">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Danger" variant="danger-text">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Kedudukan </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Kedudukan dropdown menggunakan prop <code>position</code> untuk
|
||||
menukar kedudukan item dropdown.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Bawah" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Atas" position="top" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Kiri" position="left" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Kanan" position="right" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode4 ? (showCode4 = false) : (showCode4 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode4" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code4')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code4']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code4"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code4" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-dropdown title="Bawah">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Atas" position="top">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Kiri" position="left">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Kanan" position="right">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Saiz </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Saiz dropdown menggunakan prop <code>size</code> untuk menukar saiz
|
||||
butang dropdown.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-dropdown title="Kecil" size="sm" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Sederhana" size="md" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Besar" size="lg" class="mb-2">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode5 ? (showCode5 = false) : (showCode5 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="z-0" v-show="showCode5" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code5')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code5']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code5"] }}
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code5" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-dropdown title="Kecil" size="sm">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Sederhana" size="md">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
<rs-dropdown title="Besar" size="lg">
|
||||
<rs-dropdown-item> Pilihan 1 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 2 </rs-dropdown-item>
|
||||
<rs-dropdown-item> Pilihan 3 </rs-dropdown-item>
|
||||
</rs-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
206
pages/komponen/lencana/index.vue
Normal file
206
pages/komponen/lencana/index.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Lencana",
|
||||
});
|
||||
|
||||
const showCode = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
<rs-card>
|
||||
<template #header>
|
||||
<h5>Lencana Biasa</h5>
|
||||
</template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Gunakan <code>rs-badge</code> untuk menunjukkan lencana.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 md:grid-cols-6 gap-4 gap-y-0">
|
||||
<rs-badge variant="primary" class="mb-4"> Primary </rs-badge>
|
||||
<rs-badge variant="info" class="mb-4"> Info </rs-badge>
|
||||
<rs-badge variant="success" class="mb-4"> Success </rs-badge>
|
||||
<rs-badge variant="warning" class="mb-4"> Warning </rs-badge>
|
||||
<rs-badge variant="danger" class="mb-4"> Danger </rs-badge>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode ? (showCode = false) : (showCode = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-badge variant="primary">Primary</rs-badge>
|
||||
<rs-badge variant="info">Info</rs-badge>
|
||||
<rs-badge variant="success">Success</rs-badge>
|
||||
<rs-badge variant="warning">Warning</rs-badge>
|
||||
<rs-badge variant="danger">Danger</rs-badge>
|
||||
</template>
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Badges with Icon -->
|
||||
<rs-card>
|
||||
<template #header>
|
||||
<h5>Lencana dengan Ikon</h5>
|
||||
</template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Sertakan props <code>icon</code> kepada <code>rs-badge</code> untuk
|
||||
menunjukkan lencana dengan ikon.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 md:grid-cols-6 gap-4 gap-y-0">
|
||||
<rs-badge
|
||||
variant="primary"
|
||||
icon="material-symbols:star-outline-rounded"
|
||||
class="mb-4"
|
||||
>
|
||||
Primary
|
||||
</rs-badge>
|
||||
<rs-badge
|
||||
variant="info"
|
||||
icon="material-symbols:star-outline-rounded"
|
||||
class="mb-4"
|
||||
>
|
||||
Info
|
||||
</rs-badge>
|
||||
<rs-badge
|
||||
variant="success"
|
||||
icon="material-symbols:star-outline-rounded"
|
||||
class="mb-4"
|
||||
>
|
||||
Success
|
||||
</rs-badge>
|
||||
<rs-badge
|
||||
variant="warning"
|
||||
icon="material-symbols:star-outline-rounded"
|
||||
class="mb-4"
|
||||
>
|
||||
Warning
|
||||
</rs-badge>
|
||||
<rs-badge
|
||||
variant="danger"
|
||||
icon="material-symbols:star-outline-rounded"
|
||||
class="mb-4"
|
||||
>
|
||||
Danger
|
||||
</rs-badge>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div v-show="showCode2" v-highlight>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-badge variant="primary" icon="material-symbols:star-outline-rounded">Primary</rs-badge>
|
||||
<rs-badge variant="info" icon="material-symbols:star-outline-rounded">Info</rs-badge>
|
||||
<rs-badge variant="success" icon="material-symbols:star-outline-rounded">Success</rs-badge>
|
||||
<rs-badge variant="warning" icon="material-symbols:star-outline-rounded">Warning</rs-badge>
|
||||
<rs-badge variant="danger" icon="material-symbols:star-outline-rounded">Danger</rs-badge>
|
||||
</template>
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.tooltip-enter-from,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,549 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Modal",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Modal",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const showModal = ref({
|
||||
modal1: false,
|
||||
modal2: false,
|
||||
modal3: false,
|
||||
modal4: false,
|
||||
modal5: false,
|
||||
modal6: false,
|
||||
modal7: false,
|
||||
modal8: false,
|
||||
modal9: false,
|
||||
modal10: false,
|
||||
modal11: false,
|
||||
modal12: false,
|
||||
modal13: false,
|
||||
modal14: false,
|
||||
});
|
||||
|
||||
const showCode = ref({
|
||||
code1: false,
|
||||
code2: false,
|
||||
code3: false,
|
||||
code4: false,
|
||||
code5: false,
|
||||
});
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
|
||||
const clickOK = () => {
|
||||
alert("Anda telah klik OK");
|
||||
};
|
||||
|
||||
const clickCancel = () => {
|
||||
alert("Anda telah klik Batal");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<!-- Default Modal -->
|
||||
<rs-card>
|
||||
<template #header>Default</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>rs-modal</code> untuk menunjukkan/menyembunyikan modal.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button @click="showModal.modal1 = true"
|
||||
>Tunjukkan Modal</rs-button
|
||||
>
|
||||
<rs-button @click="showModal.modal9 = true"
|
||||
>Sembunyikan Overlay</rs-button
|
||||
>
|
||||
<rs-button @click="showModal.modal14 = true">
|
||||
Persistent Overlay
|
||||
</rs-button>
|
||||
</div>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal1">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
v-model="showModal.modal9"
|
||||
hide-overlay
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
v-model="showModal.modal14"
|
||||
:overlayClose="false"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="
|
||||
showCode.code1
|
||||
? (showCode.code1 = false)
|
||||
: (showCode.code1 = true)
|
||||
"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode.code1" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button @click="showModal.modal1 = true">Tunjukkan Modal</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal1">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal2 = true">Sembunyikan Overlay</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal2" hide-overlay>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal3 = true">Persistent Overlay</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal3" :overlayClose="false">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const showModal = ref({
|
||||
modal1: false,
|
||||
modal2: false,
|
||||
modal3: false,
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Size Modal -->
|
||||
<rs-card>
|
||||
<template #header>Saiz</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Saiz modal menggunakan prop <code>size</code> untuk menukar saiz
|
||||
modal. Terdapat 3 saiz: <code>sm</code>, <code>md</code>, dan
|
||||
<code>lg</code>. Saiz lalai ialah <code>md</code>.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button @click="showModal.modal2 = true">Saiz Kecil</rs-button>
|
||||
<rs-button @click="showModal.modal3 = true">Saiz Sederhana</rs-button>
|
||||
<rs-button @click="showModal.modal4 = true">Saiz Besar</rs-button>
|
||||
</div>
|
||||
<rs-modal title="Ini adalah modal" size="sm" v-model="showModal.modal2">
|
||||
Ini adalah kandungan modal kecil.
|
||||
</rs-modal>
|
||||
<rs-modal title="Ini adalah modal" size="md" v-model="showModal.modal3">
|
||||
Ini adalah kandungan modal sederhana.
|
||||
</rs-modal>
|
||||
<rs-modal title="Ini adalah modal" size="lg" v-model="showModal.modal4">
|
||||
Ini adalah kandungan modal besar.
|
||||
</rs-modal>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="
|
||||
showCode.code2
|
||||
? (showCode.code2 = false)
|
||||
: (showCode.code2 = true)
|
||||
"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode.code2" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button @click="showModal.modal2 = true">Saiz Kecil</rs-button>
|
||||
<rs-modal title="Ini adalah modal" size="sm" v-model="showModal.modal2">
|
||||
Ini adalah kandungan modal kecil.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal3 = true">Saiz Sederhana</rs-button>
|
||||
<rs-modal title="Ini adalah modal" size="md" v-model="showModal.modal3">
|
||||
Ini adalah kandungan modal sederhana.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal4 = true">Saiz Besar</rs-button>
|
||||
<rs-modal title="Ini adalah modal" size="lg" v-model="showModal.modal4">
|
||||
Ini adalah kandungan modal besar.
|
||||
</rs-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const showModal = ref({
|
||||
modal2: false,
|
||||
modal3: false,
|
||||
modal4: false,
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Position Modal -->
|
||||
<rs-card>
|
||||
<template #header>Kedudukan</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Kedudukan modal menggunakan prop <code>position</code> untuk menukar
|
||||
kedudukan modal. Terdapat 3 kedudukan: <code>top</code>,
|
||||
<code>center</code>, dan <code>bottom</code>.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button @click="showModal.modal5 = true">Atas</rs-button>
|
||||
<rs-button @click="showModal.modal6 = true">Tengah</rs-button>
|
||||
<rs-button @click="showModal.modal7 = true">Bawah</rs-button>
|
||||
</div>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
position="top"
|
||||
v-model="showModal.modal5"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
position="center"
|
||||
v-model="showModal.modal6"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
position="bottom"
|
||||
v-model="showModal.modal7"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="
|
||||
showCode.code3
|
||||
? (showCode.code3 = false)
|
||||
: (showCode.code3 = true)
|
||||
"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode.code3" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code3')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code3']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code3"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code3" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button @click="showModal.modal5 = true">Atas</rs-button>
|
||||
<rs-modal title="Ini adalah modal" position="top" v-model="showModal.modal5">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal6 = true">Tengah</rs-button>
|
||||
<rs-modal title="Ini adalah modal" position="center" v-model="showModal.modal6">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal7 = true">Bawah</rs-button>
|
||||
<rs-modal title="Ini adalah modal" position="bottom" v-model="showModal.modal7">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const showModal = ref({
|
||||
modal5: false,
|
||||
modal6: false,
|
||||
modal7: false,
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Customize Modal -->
|
||||
<rs-card>
|
||||
<template #header>Sesuaikan</template>
|
||||
<template #body>
|
||||
<p class="mb-4 text-justify">
|
||||
Tajuk, badan dan footer modal boleh disesuaikan dengan menggunakan
|
||||
slot templat. Slot tajuk dinamakan <code>header</code>, slot badan
|
||||
dinamakan <code>body</code> dan slot footer dinamakan
|
||||
<code>footer</code>. Tajuk OK boleh disesuaikan dengan menggunakan
|
||||
prop <code>ok-title</code>. Tajuk lalai ialah <code>OK</code>. Tajuk
|
||||
Batal boleh disesuaikan dengan menggunakan prop
|
||||
<code>cancel-title</code>. Tajuk lalai ialah <code>Batal</code>.
|
||||
Butang OK dan batal boleh disembunyikan dengan menggunakan prop
|
||||
<code>ok-only</code> atau <code>cancel-only</code>. Nilai lalai ialah
|
||||
<code>false</code> untuk kedua-duanya.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button @click="showModal.modal8 = true"
|
||||
>Tunjukkan Modal</rs-button
|
||||
>
|
||||
<rs-button @click="showModal.modal10 = true"
|
||||
>Butang Tersuai</rs-button
|
||||
>
|
||||
<rs-button @click="showModal.modal11 = true">OK Sahaja</rs-button>
|
||||
<rs-button @click="showModal.modal12 = true">Batal Sahaja</rs-button>
|
||||
</div>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal8">
|
||||
<template #header> Tajuk Tersuai </template>
|
||||
<template #body> Badan Tersuai </template>
|
||||
<template #footer> Footer Tersuai </template>
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
v-model="showModal.modal10"
|
||||
cancel-title="Tutup"
|
||||
ok-title="Terima"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal11" ok-only>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
v-model="showModal.modal12"
|
||||
cancel-only
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="
|
||||
showCode.code4
|
||||
? (showCode.code4 = false)
|
||||
: (showCode.code4 = true)
|
||||
"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode.code4" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code4')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code4']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code4"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code4" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button @click="showModal.modal8 = true">Tunjukkan Modal</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal8">
|
||||
<template #header> Tajuk Tersuai </template>
|
||||
<template #body> Badan Tersuai </template>
|
||||
<template #footer> Footer Tersuai </template>
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal10 = true">Butang Tersuai</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal10" cancel-title="Tutup" ok-title="Terima">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal11 = true">OK Sahaja</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal11" ok-only>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<rs-button @click="showModal.modal12 = true">Batal Sahaja</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal12" cancel-only>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const showModal = ref({
|
||||
modal8: false,
|
||||
modal10: false,
|
||||
modal11: false,
|
||||
modal12: false,
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Bind Function Modal -->
|
||||
<rs-card>
|
||||
<template #header>Bind Fungsi</template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Anda boleh mengikat fungsi untuk butang OK dan batal dalam modal
|
||||
dengan menggunakan prop <code>ok-callback</code> dan
|
||||
<code>cancel-callback</code>.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<rs-button @click="showModal.modal13 = true">Bind Fungsi</rs-button>
|
||||
</div>
|
||||
<rs-modal
|
||||
title="Ini adalah modal"
|
||||
v-model="showModal.modal13"
|
||||
:ok-callback="clickOK"
|
||||
:cancel-callback="clickCancel"
|
||||
>
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="
|
||||
showCode.code5
|
||||
? (showCode.code5 = false)
|
||||
: (showCode.code5 = true)
|
||||
"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode.code5" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code5')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code5']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code5"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code5" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-button @click="showModal.modal13 = true">Bind Fungsi</rs-button>
|
||||
<rs-modal title="Ini adalah modal" v-model="showModal.modal13" :ok-callback="clickOK" :cancel-callback="clickCancel">
|
||||
Ini adalah kandungan modal.
|
||||
</rs-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const showModal = ref({
|
||||
modal13: false,
|
||||
});
|
||||
|
||||
const clickOK = () => {
|
||||
alert("Anda telah klik OK");
|
||||
};
|
||||
|
||||
const clickCancel = () => {
|
||||
alert("Anda telah klik Batal");
|
||||
};
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
142
pages/komponen/progress-bar/index.vue
Normal file
142
pages/komponen/progress-bar/index.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Progress Bar",
|
||||
});
|
||||
|
||||
const showCode1 = ref(false);
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
<rs-card>
|
||||
<template #header> Default </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan komponen <code>rs-progress-bar</code> untuk membuat bar
|
||||
kemajuan. Terdapat prop untuk menukar warna, saiz, maksimum,
|
||||
menunjukkan nilai, dan nilai.
|
||||
</p>
|
||||
<rs-progress-bar
|
||||
label="Primary Progress"
|
||||
:value="11"
|
||||
:max="100"
|
||||
variant="primary"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<rs-progress-bar
|
||||
label="Secondary Progress"
|
||||
:value="43"
|
||||
:max="100"
|
||||
variant="secondary"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<rs-progress-bar
|
||||
label="Success Progress"
|
||||
:value="45"
|
||||
:max="100"
|
||||
variant="success"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<rs-progress-bar
|
||||
label="Danger Progress"
|
||||
:value="90"
|
||||
:max="100"
|
||||
variant="danger"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<rs-progress-bar
|
||||
label="Warning Progress"
|
||||
:value="36"
|
||||
:max="100"
|
||||
variant="warning"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<rs-progress-bar
|
||||
label="Info Progress"
|
||||
:value="25"
|
||||
:max="100"
|
||||
variant="info"
|
||||
size="md"
|
||||
:show-value="true"
|
||||
></rs-progress-bar>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode1" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-progress-bar
|
||||
label="Primary Progress"
|
||||
:value="11"
|
||||
:max="100"
|
||||
variant="primary|secondary|success|danger|warning|info"
|
||||
size="md|sm|lg"
|
||||
:show-value="true|false"
|
||||
></rs-progress-bar>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
309
pages/komponen/tab/index.vue
Normal file
309
pages/komponen/tab/index.vue
Normal file
@ -0,0 +1,309 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Tab",
|
||||
});
|
||||
|
||||
const showCode1 = ref(false);
|
||||
const showCode2 = ref(false);
|
||||
const showCode3 = ref(false);
|
||||
const vertical = ref(false);
|
||||
const type = ref("default");
|
||||
const variant = ref("primary");
|
||||
const fill = ref(false);
|
||||
const justify = ref("left");
|
||||
|
||||
const tooltips = ref({});
|
||||
|
||||
const copyCode = (codeId) => {
|
||||
const codeElement = document.getElementById(codeId);
|
||||
if (codeElement) {
|
||||
navigator.clipboard
|
||||
.writeText(codeElement.textContent)
|
||||
.then(() => {
|
||||
console.log("Kod disalin ke papan klip");
|
||||
showTooltip(codeId, "Kod disalin!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Gagal menyalin kod: ", err);
|
||||
showTooltip(codeId, "Gagal menyalin kod");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showTooltip = (codeId, message) => {
|
||||
tooltips.value[codeId] = message;
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = null;
|
||||
}, 2000); // Hide tooltip after 2 seconds
|
||||
};
|
||||
|
||||
const variantOptions = [
|
||||
{ label: "Primary", value: "primary" },
|
||||
{ label: "Secondary", value: "secondary" },
|
||||
{ label: "Success", value: "success" },
|
||||
{ label: "Danger", value: "danger" },
|
||||
{ label: "Warning", value: "warning" },
|
||||
{ label: "Info", value: "info" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
<rs-card>
|
||||
<template #header> Default </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan <code>rs-tab</code> untuk membuat antara muka berasaskan tab.
|
||||
<code>rs-tab-item</code> digunakan untuk membuat setiap tab.
|
||||
</p>
|
||||
<rs-tab>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode1 ? (showCode1 = false) : (showCode1 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode1" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code1')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code1']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code1"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code1" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-tab>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Tab Menegak </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Gunakan props <code>vertical</code> untuk membuat antara muka tab
|
||||
menegak.
|
||||
</p>
|
||||
<rs-tab vertical>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode2 ? (showCode2 = false) : (showCode2 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode2" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code2')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code2']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code2"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code2" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-tab vertical>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Penggayaan </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Tab boleh digayakan menggunakan props <code>variant</code> dan
|
||||
<code>type</code>. Prop <code>type</code> boleh digunakan untuk
|
||||
membuat tab gaya kad dan sempadan. Prop <code>variant</code> boleh
|
||||
digunakan untuk menukar warna tab.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-x-5">
|
||||
<FormKit
|
||||
label="Varian"
|
||||
type="radio"
|
||||
v-model="variant"
|
||||
:options="variantOptions"
|
||||
:classes="{
|
||||
options: 'flex flex-wrap gap-4 pt-2',
|
||||
fieldset: 'px-4 py-0 max-w-full',
|
||||
}"
|
||||
/>
|
||||
|
||||
<FormKit
|
||||
v-model="type"
|
||||
type="radio"
|
||||
label="Jenis"
|
||||
:options="[
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Border', value: 'border' },
|
||||
{ label: 'Card', value: 'card' },
|
||||
]"
|
||||
:classes="{
|
||||
options: 'flex flex-wrap gap-4 pt-2',
|
||||
fieldset: 'px-4 py-0 max-w-full',
|
||||
}"
|
||||
/>
|
||||
<FormKit
|
||||
v-model="vertical"
|
||||
type="radio"
|
||||
label="Menegak"
|
||||
:options="[
|
||||
{ label: 'False', value: false },
|
||||
{ label: 'True', value: true },
|
||||
]"
|
||||
:classes="{
|
||||
options: 'flex flex-wrap gap-4 pt-2',
|
||||
fieldset: 'px-4 py-0 max-w-full',
|
||||
}"
|
||||
/>
|
||||
<FormKit
|
||||
v-model="fill"
|
||||
type="radio"
|
||||
label="Isian"
|
||||
:options="[
|
||||
{ label: 'False', value: false },
|
||||
{ label: 'True', value: true },
|
||||
]"
|
||||
:classes="{
|
||||
options: 'flex flex-wrap gap-4 pt-2',
|
||||
fieldset: 'px-4 py-0 max-w-full',
|
||||
}"
|
||||
/>
|
||||
<FormKit
|
||||
v-model="justify"
|
||||
type="radio"
|
||||
label="Justifikasi"
|
||||
:options="[
|
||||
{ label: 'Kiri', value: 'left' },
|
||||
{ label: 'Tengah', value: 'center' },
|
||||
{ label: 'Kanan', value: 'right' },
|
||||
]"
|
||||
:classes="{
|
||||
options: 'flex flex-wrap gap-4 pt-2',
|
||||
fieldset: 'px-4 py-0 max-w-full',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<rs-tab
|
||||
:variant="variant"
|
||||
:type="type"
|
||||
:fill="fill"
|
||||
:justify="justify"
|
||||
:vertical="vertical"
|
||||
>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg"
|
||||
@click="showCode3 ? (showCode3 = false) : (showCode3 = true)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div class="relative" v-show="showCode3" v-highlight>
|
||||
<button
|
||||
@click="copyCode('code3')"
|
||||
class="absolute top-4 right-2 text-sm bg-gray-300 hover:bg-gray-300 py-1 px-3 rounded z-10"
|
||||
>
|
||||
Salin Kod
|
||||
</button>
|
||||
<transition name="tooltip">
|
||||
<span
|
||||
v-if="tooltips['code3']"
|
||||
class="absolute top-0 right-0 mt-12 mr-2 bg-black text-white text-xs rounded py-1 px-2 z-10"
|
||||
>
|
||||
{{ tooltips["code3"] }}
|
||||
</span>
|
||||
</transition>
|
||||
<NuxtScrollbar style="max-height: 300px">
|
||||
<pre id="code3" class="language-html shadow-none">
|
||||
<code>
|
||||
<template>
|
||||
<rs-tab
|
||||
variant="primary|secondary|info|success|warning|danger"
|
||||
type="default|border|card"
|
||||
justify="left|center|right"
|
||||
fill
|
||||
vertical>
|
||||
<rs-tab-item title="Tab 1"> Tab 1 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 2"> Tab 2 </rs-tab-item>
|
||||
<rs-tab-item title="Tab 3"> Tab 3 </rs-tab-item>
|
||||
</rs-tab>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
</code>
|
||||
</pre>
|
||||
</NuxtScrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user