Setup latest corrad dev
This commit is contained in:
parent
10a3209021
commit
e722d4b062
@ -10,182 +10,73 @@ export default [
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Carian",
|
||||
path: "/carian",
|
||||
icon: "ph:magnifying-glass",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Laporan",
|
||||
path: "/laporan",
|
||||
icon: "ph:chart-bar-fill",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
header: "Fungsi",
|
||||
description: "",
|
||||
header: "Pentadbiran",
|
||||
description: "Urus aplikasi anda",
|
||||
child: [
|
||||
{
|
||||
title: "Komponen",
|
||||
icon: "ph:gear-fine",
|
||||
title: "Konfigurasi",
|
||||
icon: "ic:outline-settings",
|
||||
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",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Progress Bar",
|
||||
path: "/komponen/progress-bar",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Tab",
|
||||
path: "/komponen/tab",
|
||||
child: [],
|
||||
meta: {},
|
||||
title: "Persekitaran",
|
||||
path: "/devtool/config/environment",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Datatable",
|
||||
path: "/datatable",
|
||||
icon: "ph:table",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Borang",
|
||||
path: "/borang",
|
||||
icon: "ph:clipboard-text",
|
||||
title: "Penyunting Menu",
|
||||
icon: "ci:menu-alt-03",
|
||||
path: "/devtool/menu-editor",
|
||||
child: [],
|
||||
},
|
||||
{
|
||||
title: "Ikon",
|
||||
path: "/ikon",
|
||||
icon: "iconamoon:slightly-smiling-face",
|
||||
child: [],
|
||||
meta: {},
|
||||
title: "Urus Pengguna",
|
||||
path: "/devtool/user-management",
|
||||
icon: "ph:user-circle-gear",
|
||||
child: [
|
||||
{
|
||||
title: "Senarai Pengguna",
|
||||
path: "/devtool/user-management/user",
|
||||
icon: "",
|
||||
child: [],
|
||||
},
|
||||
{
|
||||
title: "Senarai Peranan",
|
||||
path: "/devtool/user-management/role",
|
||||
icon: "",
|
||||
child: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Tipografi",
|
||||
path: "/tipografi",
|
||||
icon: "ph:text-aa",
|
||||
child: [],
|
||||
meta: {},
|
||||
title: "Kandungan",
|
||||
icon: "mdi:pencil-ruler",
|
||||
child: [
|
||||
{
|
||||
title: "Penyunting",
|
||||
path: "/devtool/content-editor",
|
||||
},
|
||||
{
|
||||
title: "Templat",
|
||||
path: "/devtool/content-editor/template",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Senarai Mesej",
|
||||
path: "/senarai-mesej",
|
||||
icon: "ic:outline-mail",
|
||||
title: "Penyunting API",
|
||||
path: "/devtool/api-editor",
|
||||
icon: "material-symbols:api-rounded",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
],
|
||||
meta: {},
|
||||
meta: {
|
||||
auth: {
|
||||
role: ["Developer"],
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// header: "Pentadbiran",
|
||||
// description: "Urus aplikasi anda",
|
||||
// child: [
|
||||
// {
|
||||
// title: "Konfigurasi",
|
||||
// icon: "ic:outline-settings",
|
||||
// child: [
|
||||
// {
|
||||
// title: "Persekitaran",
|
||||
// path: "/devtool/config/environment",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: "Penyunting Menu",
|
||||
// icon: "ci:menu-alt-03",
|
||||
// path: "/devtool/menu-editor",
|
||||
// child: [],
|
||||
// },
|
||||
// {
|
||||
// title: "Urus Pengguna",
|
||||
// path: "/devtool/user-management",
|
||||
// icon: "ph:user-circle-gear",
|
||||
// child: [
|
||||
// {
|
||||
// title: "Senarai Pengguna",
|
||||
// path: "/devtool/user-management/user",
|
||||
// icon: "",
|
||||
// child: [],
|
||||
// },
|
||||
// {
|
||||
// title: "Senarai Peranan",
|
||||
// path: "/devtool/user-management/role",
|
||||
// icon: "",
|
||||
// child: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: "Kandungan",
|
||||
// icon: "mdi:pencil-ruler",
|
||||
// child: [
|
||||
// {
|
||||
// title: "Penyunting",
|
||||
// path: "/devtool/content-editor",
|
||||
// },
|
||||
// {
|
||||
// title: "Templat",
|
||||
// path: "/devtool/content-editor/template",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: "Penyunting API",
|
||||
// path: "/devtool/api-editor",
|
||||
// icon: "material-symbols:api-rounded",
|
||||
// child: [],
|
||||
// },
|
||||
// ],
|
||||
// meta: {
|
||||
// auth: {
|
||||
// role: ["Developer"],
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
||||
@ -1,952 +0,0 @@
|
||||
<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>
|
||||
@ -1,122 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Carian",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Carian",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const categories = ref([
|
||||
"Semua Kategori",
|
||||
"Kategori 1",
|
||||
"Kategori 2",
|
||||
"Kategori 3",
|
||||
]);
|
||||
const selectedCategory = ref("Semua Kategori");
|
||||
|
||||
const criteria = ref([
|
||||
{ label: "Kriteria 1", options: ["Pilihan 1", "Pilihan 2", "Pilihan 3"] },
|
||||
{ label: "Kriteria 2", options: ["Pilihan A", "Pilihan B", "Pilihan C"] },
|
||||
{ label: "Kriteria 3", options: ["Pilihan X", "Pilihan Y", "Pilihan Z"] },
|
||||
{ label: "Kriteria 4", options: ["Pilihan 1", "Pilihan 2", "Pilihan 3"] },
|
||||
{
|
||||
label: "Kriteria 5",
|
||||
options: ["Pilihan A", "Pilihan B", "Pilihan C"],
|
||||
},
|
||||
]);
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const performSearch = () => {
|
||||
// Implement search logic here
|
||||
console.log("Performing search with:", searchQuery.value);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<rs-card>
|
||||
<template #header> Carian laman </template>
|
||||
<template #body>
|
||||
<FormKit type="form" @submit="performSearch" submit-label="Search">
|
||||
<div class="flex items-center space-x-2 mb-4">
|
||||
<FormKit
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Carian..."
|
||||
:classes="{
|
||||
outer: 'flex-grow',
|
||||
input: 'w-full',
|
||||
}"
|
||||
>
|
||||
<template #prefixIcon>
|
||||
<Icon
|
||||
name="ph:magnifying-glass"
|
||||
class="!w-5 !h-5 ml-3 text-gray-500"
|
||||
></Icon>
|
||||
</template>
|
||||
</FormKit>
|
||||
<FormKit
|
||||
type="select"
|
||||
v-model="selectedCategory"
|
||||
:options="categories"
|
||||
placeholder="Semua Kategori"
|
||||
:classes="{
|
||||
outer: 'w-48',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-medium text-gray-700 mb-4">
|
||||
Carian Terperinci
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<FormKit
|
||||
v-for="(item, index) in criteria.slice(0, 2)"
|
||||
:key="index"
|
||||
type="select"
|
||||
:name="item.label.toLowerCase().replace(' ', '_')"
|
||||
:label="item.label"
|
||||
:options="item.options"
|
||||
placeholder="Pilih pilihan"
|
||||
>
|
||||
<template #label>
|
||||
<label
|
||||
class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</template>
|
||||
</FormKit>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<FormKit
|
||||
v-for="(item, index) in criteria.slice(2)"
|
||||
:key="index"
|
||||
type="select"
|
||||
:name="item.label.toLowerCase().replace(' ', '_')"
|
||||
:label="item.label"
|
||||
:options="item.options"
|
||||
placeholder="Pilih pilihan"
|
||||
>
|
||||
<template #label>
|
||||
<label
|
||||
class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</template>
|
||||
</FormKit>
|
||||
</div>
|
||||
</FormKit>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,294 +0,0 @@
|
||||
<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,
|
||||
|
||||
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,
|
||||
|
||||
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>
|
||||
@ -1,137 +0,0 @@
|
||||
<script setup>
|
||||
import iconJson from "@/assets/json/iconamoon.json";
|
||||
|
||||
definePageMeta({
|
||||
title: "Set Ikons",
|
||||
middleware: ["auth"],
|
||||
requiresAuth: true,
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Set Ikons",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const copyToClipboard = (text) => {
|
||||
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;
|
||||
|
||||
const filteredIcons = computed(() => {
|
||||
if (!searchQuery.value) return iconJson;
|
||||
return iconJson.filter((icon) =>
|
||||
icon.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const loadMoreIcons = () => {
|
||||
const newIcons = filteredIcons.value.slice(
|
||||
currentIndex,
|
||||
currentIndex + batchSize
|
||||
);
|
||||
displayedIcons.value.push(...newIcons);
|
||||
currentIndex += batchSize;
|
||||
};
|
||||
|
||||
const resetIconDisplay = () => {
|
||||
displayedIcons.value = [];
|
||||
currentIndex = 0;
|
||||
loadMoreIcons();
|
||||
};
|
||||
|
||||
const showTooltip = (iconName, message) => {
|
||||
tooltips[iconName] = message;
|
||||
setTimeout(() => {
|
||||
tooltips[iconName] = null;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
watch(searchQuery, () => {
|
||||
resetIconDisplay();
|
||||
nextTick(() => {
|
||||
if (containerRef.value) {
|
||||
containerRef.value.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
resetIconDisplay();
|
||||
});
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!containerRef.value) return;
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = containerRef.value;
|
||||
if (scrollHeight - scrollTop <= clientHeight + 1) {
|
||||
loadMoreIcons();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<rs-card>
|
||||
<template #header>
|
||||
Set Ikon Icomoon (Jumlah: {{ filteredIcons.length }})
|
||||
</template>
|
||||
<template #body>
|
||||
<FormKit
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search icons..."
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 max-h-[70vh] overflow-y-auto"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div
|
||||
v-for="icon in displayedIcons"
|
||||
:key="icon.name"
|
||||
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>
|
||||
<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>
|
||||
<div v-if="displayedIcons.length === 0" class="text-center mt-4">
|
||||
No icons found matching your search.
|
||||
</div>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,226 +0,0 @@
|
||||
<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>
|
||||
@ -1,372 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Butang",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Komponen",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const showCode1 = ref(false);
|
||||
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(() => {
|
||||
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 <code>rs-button</code> untuk menunjukkan lencana.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<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)"
|
||||
>
|
||||
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-button>Butang</rs-button>
|
||||
</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 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>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-start gap-x-6">
|
||||
<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>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@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-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>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Jenis Variasi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
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 -->
|
||||
<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-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>
|
||||
</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-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>
|
||||
</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-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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-sm border border-slate-200 py-1 px-3 rounded-lg my-2"
|
||||
@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>
|
||||
<!-- 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>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<rs-card>
|
||||
<template #header> Saiz </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
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"> 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)"
|
||||
>
|
||||
Tunjukkan Kod
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<transition name="fade">
|
||||
<div 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-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>
|
||||
</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,315 +0,0 @@
|
||||
<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,657 +0,0 @@
|
||||
<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>
|
||||
@ -1,206 +0,0 @@
|
||||
<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,549 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Modal",
|
||||
});
|
||||
|
||||
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>
|
||||
@ -1,142 +0,0 @@
|
||||
<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>
|
||||
@ -1,309 +0,0 @@
|
||||
<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>
|
||||
@ -1,295 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Laporan Penerbangan",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Laporan Penerbangan",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
namaDepan: "Ahmad",
|
||||
namaBelakang: "Abdullah",
|
||||
lapangan: "KLIA",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-15 08:30",
|
||||
status: "Tiba",
|
||||
},
|
||||
{
|
||||
namaDepan: "Siti",
|
||||
namaBelakang: "Aminah",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Bayan Lepas",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-16 14:45",
|
||||
status: "Masih dalam penerbangan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Mohd",
|
||||
namaBelakang: "Razak",
|
||||
lapangan: "Lapangan Terbang Sultan Abdul Aziz Shah",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-17 10:15",
|
||||
status: "Terlepas",
|
||||
},
|
||||
{
|
||||
namaDepan: "Nurul",
|
||||
namaBelakang: "Huda",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Kota Kinabalu",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-18 16:20",
|
||||
status: "Dibatalkan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Tan",
|
||||
namaBelakang: "Wei Ling",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Kuching",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-19 09:00",
|
||||
status: "Tiba",
|
||||
},
|
||||
{
|
||||
namaDepan: "Amir",
|
||||
namaBelakang: "Hassan",
|
||||
lapangan: "KLIA",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-20 11:30",
|
||||
status: "Masih dalam penerbangan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Farah",
|
||||
namaBelakang: "Lim",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Penang",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-21 13:45",
|
||||
status: "Tiba",
|
||||
},
|
||||
{
|
||||
namaDepan: "Zain",
|
||||
namaBelakang: "Ismail",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Langkawi",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-22 07:15",
|
||||
status: "Terlepas",
|
||||
},
|
||||
{
|
||||
namaDepan: "Lily",
|
||||
namaBelakang: "Wong",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Senai",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-23 18:00",
|
||||
status: "Tiba",
|
||||
},
|
||||
{
|
||||
namaDepan: "Ravi",
|
||||
namaBelakang: "Kumar",
|
||||
lapangan: "KLIA",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-24 10:30",
|
||||
status: "Dibatalkan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Aishah",
|
||||
namaBelakang: "Yusof",
|
||||
lapangan: "Lapangan Terbang Sultan Abdul Halim",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-25 12:45",
|
||||
status: "Tiba",
|
||||
},
|
||||
{
|
||||
namaDepan: "Chong",
|
||||
namaBelakang: "Wei Ming",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Kota Kinabalu",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-26 15:20",
|
||||
status: "Masih dalam penerbangan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Salmah",
|
||||
namaBelakang: "Othman",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Kuching",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-27 09:10",
|
||||
status: "Terlepas",
|
||||
},
|
||||
{
|
||||
namaDepan: "Raj",
|
||||
namaBelakang: "Muthu",
|
||||
lapangan: "KLIA",
|
||||
jenisPenerbangan: "Berlepas",
|
||||
tarikhMasa: "2023-06-28 14:00",
|
||||
status: "Masih dalam penerbangan",
|
||||
},
|
||||
{
|
||||
namaDepan: "Noor",
|
||||
namaBelakang: "Aziz",
|
||||
lapangan: "Lapangan Terbang Antarabangsa Bayan Lepas",
|
||||
jenisPenerbangan: "Ketibaan",
|
||||
tarikhMasa: "2023-06-29 17:30",
|
||||
status: "Tiba",
|
||||
},
|
||||
]);
|
||||
|
||||
const criteria = ref([
|
||||
{
|
||||
label: "Nama Depan",
|
||||
options: ["Ahmad", "Siti", "Mohd", "Nurul", "Tan"],
|
||||
},
|
||||
{
|
||||
label: "Nama Belakang",
|
||||
options: ["Abdullah", "Aminah", "Razak", "Huda", "Wei Ling"],
|
||||
},
|
||||
{
|
||||
label: "Lapangan Terbang",
|
||||
options: [
|
||||
"KLIA",
|
||||
"Lapangan Terbang Antarabangsa Bayan Lepas",
|
||||
"Lapangan Terbang Sultan Abdul Aziz Shah",
|
||||
"Lapangan Terbang Antarabangsa Kota Kinabalu",
|
||||
"Lapangan Terbang Antarabangsa Kuching",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Tarikh",
|
||||
options: [
|
||||
"2023-06-15",
|
||||
"2023-06-16",
|
||||
"2023-06-17",
|
||||
"2023-06-18",
|
||||
"2023-06-19",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
options: ["Tiba", "Masih dalam penerbangan", "Terlepas", "Dibatalkan"],
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedCriteria = ref({
|
||||
kriteria1: "",
|
||||
kriteria2: "",
|
||||
kriteria3: "",
|
||||
kriteria4: "",
|
||||
kriteria5: "",
|
||||
});
|
||||
|
||||
const filteredData = ref([...data.value]);
|
||||
|
||||
const performSearch = () => {
|
||||
filteredData.value = data.value.filter((item) => {
|
||||
return (
|
||||
(!selectedCriteria.value.kriteria1 ||
|
||||
item.namaDepan.includes(selectedCriteria.value.kriteria1)) &&
|
||||
(!selectedCriteria.value.kriteria2 ||
|
||||
item.namaBelakang.includes(selectedCriteria.value.kriteria2)) &&
|
||||
(!selectedCriteria.value.kriteria3 ||
|
||||
item.lapangan.includes(selectedCriteria.value.kriteria3)) &&
|
||||
(!selectedCriteria.value.kriteria4 ||
|
||||
item.tarikhMasa.includes(selectedCriteria.value.kriteria4)) &&
|
||||
(!selectedCriteria.value.kriteria5 ||
|
||||
item.status.includes(selectedCriteria.value.kriteria5))
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
selectedCriteria.value = {
|
||||
kriteria1: "",
|
||||
kriteria2: "",
|
||||
kriteria3: "",
|
||||
kriteria4: "",
|
||||
kriteria5: "",
|
||||
};
|
||||
filteredData.value = [...data.value];
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<rs-card>
|
||||
<template #header> Laporan Penerbangan</template>
|
||||
<template #body>
|
||||
<FormKit type="form" :actions="false">
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<FormKit
|
||||
v-for="(item, index) in criteria.slice(0, 2)"
|
||||
:key="index"
|
||||
type="select"
|
||||
:name="item.label.toLowerCase().replace(' ', '_')"
|
||||
:label="item.label"
|
||||
:options="item.options"
|
||||
v-model="selectedCriteria[`kriteria${index + 1}`]"
|
||||
placeholder="Pilih pilihan"
|
||||
>
|
||||
<template #label>
|
||||
<label
|
||||
class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</template>
|
||||
</FormKit>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<FormKit
|
||||
v-for="(item, index) in criteria.slice(2)"
|
||||
:key="index"
|
||||
type="select"
|
||||
:name="item.label.toLowerCase().replace(' ', '_')"
|
||||
:label="item.label"
|
||||
:options="item.options"
|
||||
v-model="selectedCriteria[`kriteria${index + 3}`]"
|
||||
placeholder="Pilih pilihan"
|
||||
>
|
||||
<template #label>
|
||||
<label
|
||||
class="formkit-label text-gray-700 dark:text-gray-200 block mb-2 font-semibold text-sm formkit-invalid:text-red-500"
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</template>
|
||||
</FormKit>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end items-center gap-2">
|
||||
<rs-button @click="resetFilter" variant="primary-outline"
|
||||
>Tetapkan Semula</rs-button
|
||||
>
|
||||
<rs-button type="submit" @click="performSearch">
|
||||
Hantar Laporan
|
||||
</rs-button>
|
||||
</div>
|
||||
</FormKit>
|
||||
|
||||
<rs-table
|
||||
class="mt-8"
|
||||
:key="filteredData"
|
||||
:data="filteredData"
|
||||
:pageSize="100"
|
||||
>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge
|
||||
:variant="
|
||||
data.text === 'Tiba'
|
||||
? 'success'
|
||||
: data.text === 'Masih dalam penerbangan'
|
||||
? 'warning'
|
||||
: data.text === 'Terlepas'
|
||||
? 'danger'
|
||||
: data.text === 'Dibatalkan'
|
||||
? 'disabled'
|
||||
: 'default'
|
||||
"
|
||||
>
|
||||
{{ data.text }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
</rs-table>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,193 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Senarai Mesej",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Senarai Mesej",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const messages = ref([
|
||||
{
|
||||
id: 1,
|
||||
sender: "Admin",
|
||||
subject: "Selamat Datang",
|
||||
preview: "Selamat datang ke sistem mesej kami...",
|
||||
content:
|
||||
"Selamat datang ke sistem mesej kami. Kami berharap anda akan menikmati pengalaman menggunakan sistem ini. Jika ada sebarang pertanyaan, sila hubungi kami.",
|
||||
date: "1-50 daripada 528",
|
||||
isRead: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sender: "Spotify",
|
||||
subject: "Tawaran Istimewa untuk Anda",
|
||||
preview: "Dapatkan langganan premium dengan harga istimewa...",
|
||||
content:
|
||||
"Dapatkan langganan premium dengan harga istimewa! Hanya untuk masa yang terhad, nikmati muzik tanpa had dengan harga yang sangat berpatutan.",
|
||||
date: "11:59 malam",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
sender: "Ahmad Zulkifli",
|
||||
subject: "Mesyuarat Projek Baru",
|
||||
preview: "Sila hadir ke mesyuarat projek baru pada...",
|
||||
content:
|
||||
"Sila hadir ke mesyuarat projek baru pada hari Isnin, 10 Julai 2023, jam 10 pagi di Bilik Mesyuarat Utama. Kita akan membincangkan perancangan dan pembahagian tugas untuk projek baru ini.",
|
||||
date: "10:21 malam",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
sender: "Syarikat ABC",
|
||||
subject: "Tawaran Kerja",
|
||||
preview: "Kami dengan sukacitanya menawarkan anda jawatan...",
|
||||
content:
|
||||
"Kami dengan sukacitanya menawarkan anda jawatan Pengaturcara Kanan di Syarikat ABC. Sila baca lampiran untuk maklumat lanjut tentang tawaran ini dan hubungi kami jika anda mempunyai sebarang pertanyaan.",
|
||||
date: "8:37 malam",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
sender: "Puan Mariam",
|
||||
subject: "Peringatan: Bayaran Bil",
|
||||
preview: "Ini adalah peringatan untuk pembayaran bil anda...",
|
||||
content:
|
||||
"Ini adalah peringatan untuk pembayaran bil anda yang telah tamat tempoh. Sila jelaskan bayaran sebelum 30 Jun 2023 untuk mengelakkan sebarang caj lewat.",
|
||||
date: "4:38 petang",
|
||||
isRead: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedMessages = ref([]);
|
||||
const currentMessage = ref(null);
|
||||
|
||||
const selectMessage = (messageId) => {
|
||||
const index = selectedMessages.value.indexOf(messageId);
|
||||
if (index === -1) {
|
||||
selectedMessages.value.push(messageId);
|
||||
} else {
|
||||
selectedMessages.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSelectedMessages = () => {
|
||||
messages.value = messages.value.filter(
|
||||
(message) => !selectedMessages.value.includes(message.id)
|
||||
);
|
||||
selectedMessages.value = [];
|
||||
currentMessage.value = null;
|
||||
};
|
||||
|
||||
const readMessage = (message) => {
|
||||
currentMessage.value = message;
|
||||
if (!message.isRead) {
|
||||
message.isRead = true;
|
||||
}
|
||||
};
|
||||
|
||||
const closeMessage = () => {
|
||||
currentMessage.value = null;
|
||||
};
|
||||
|
||||
const addNewMessage = () => {
|
||||
const newId = messages.value.length + 1;
|
||||
const newMessage = {
|
||||
id: newId,
|
||||
sender: "New Sender",
|
||||
subject: "New Subject",
|
||||
preview: "This is a new message...",
|
||||
content:
|
||||
"This is the full content of the new message. You can edit this to add more details.",
|
||||
date: new Date().toLocaleString(),
|
||||
isRead: false,
|
||||
};
|
||||
messages.value.unshift(newMessage);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-100 min-h-screen">
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<div class="container mx-auto">
|
||||
<rs-card>
|
||||
<div class="flex items-center justify-between p-5">
|
||||
<h2 class="text-xl font-semibold text-gray-800">Senarai Mesej</h2>
|
||||
<div class="flex space-x-2">
|
||||
<rs-button @click="addNewMessage" variant="success">
|
||||
Tambah Mesej
|
||||
</rs-button>
|
||||
<rs-button
|
||||
@click="deleteSelectedMessages"
|
||||
variant="danger"
|
||||
:disabled="selectedMessages.length === 0"
|
||||
>
|
||||
Buang ({{ selectedMessages.length }})
|
||||
</rs-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
@click="readMessage(message)"
|
||||
class="flex items-center p-4 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer"
|
||||
:class="{ 'bg-blue-50': selectedMessages.includes(message.id) }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedMessages.includes(message.id)"
|
||||
@click.stop="selectMessage(message.id)"
|
||||
class="mr-4 h-5 w-5 text-blue-600"
|
||||
/>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between">
|
||||
<span
|
||||
class="font-medium text-gray-900"
|
||||
:class="{ 'font-bold': !message.isRead }"
|
||||
>
|
||||
{{ message.sender }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500">{{ message.date }}</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span
|
||||
class="text-sm font-medium text-gray-900"
|
||||
:class="{ 'font-bold': !message.isRead }"
|
||||
>
|
||||
{{ message.subject }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-600">
|
||||
- {{ message.preview }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</rs-card>
|
||||
|
||||
<!-- Message Content Modal -->
|
||||
<rs-modal v-model="currentMessage" title="Message Details">
|
||||
<template v-if="currentMessage">
|
||||
<p class="text-sm text-gray-600 mb-2">
|
||||
From: {{ currentMessage.sender }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Date: {{ currentMessage.date }}
|
||||
</p>
|
||||
<div class="border-t pt-4">
|
||||
<p class="text-gray-800">{{ currentMessage.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</rs-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Add any additional styles here */
|
||||
</style>
|
||||
@ -1,284 +0,0 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
title: "Tipografi",
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Tipografi",
|
||||
type: "current",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const showCode1 = ref(false);
|
||||
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) {
|
||||
const codeText = codeElement.textContent;
|
||||
navigator.clipboard.writeText(codeText).then(() => {
|
||||
tooltips.value[codeId] = "Kod disalin!";
|
||||
setTimeout(() => {
|
||||
tooltips.value[codeId] = "";
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<rs-card>
|
||||
<template #header> Tipografi </template>
|
||||
<template #body>
|
||||
<p class="mb-4">
|
||||
Dokumentasi tipografi untuk pembangun untuk melihat dan menggunakan.
|
||||
</p>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Tajuk -->
|
||||
<rs-card>
|
||||
<template #header> Tajuk </template>
|
||||
<template #body>
|
||||
<div class="space-y-2">
|
||||
<h1 class="text-4xl font-bold">Tajuk 1</h1>
|
||||
<h2 class="text-3xl font-bold">Tajuk 2</h2>
|
||||
<h3 class="text-2xl font-bold">Tajuk 3</h3>
|
||||
<h4 class="text-xl font-bold">Tajuk 4</h4>
|
||||
<h5 class="text-lg font-bold">Tajuk 5</h5>
|
||||
<h6 class="text-base font-bold">Tajuk 6</h6>
|
||||
</div>
|
||||
<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 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>
|
||||
<pre id="code1" class="language-html">
|
||||
<code>
|
||||
<h1 class="text-4xl font-bold">Tajuk 1</h1>
|
||||
<h2 class="text-3xl font-bold">Tajuk 2</h2>
|
||||
<h3 class="text-2xl font-bold">Tajuk 3</h3>
|
||||
<h4 class="text-xl font-bold">Tajuk 4</h4>
|
||||
<h5 class="text-lg font-bold">Tajuk 5</h5>
|
||||
<h6 class="text-base font-bold">Tajuk 6</h6>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Perenggan -->
|
||||
<rs-card>
|
||||
<template #header> Perenggan </template>
|
||||
<template #body>
|
||||
<p class="mb-2">
|
||||
Ini adalah perenggan lalai. Ia menggunakan saiz fon asas dan
|
||||
ketinggian baris.
|
||||
</p>
|
||||
<p class="text-sm mb-2">
|
||||
Ini adalah perenggan kecil menggunakan kelas text-sm.
|
||||
</p>
|
||||
<p class="text-lg mb-2">
|
||||
Ini adalah perenggan besar menggunakan kelas text-lg.
|
||||
</p>
|
||||
<p class="font-light mb-2">Ini adalah perenggan berat ringan.</p>
|
||||
<p class="font-semibold mb-2">Ini adalah perenggan separa tebal.</p>
|
||||
<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 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>
|
||||
<pre id="code2" class="language-html">
|
||||
<code>
|
||||
<p>Ini adalah perenggan lalai. Ia menggunakan saiz fon asas dan ketinggian baris.</p>
|
||||
<p class="text-sm">Ini adalah perenggan kecil menggunakan kelas text-sm.</p>
|
||||
<p class="text-lg">Ini adalah perenggan besar menggunakan kelas text-lg.</p>
|
||||
<p class="font-light">Ini adalah perenggan berat ringan.</p>
|
||||
<p class="font-semibold">Ini adalah perenggan separa tebal.</p>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Warna Teks -->
|
||||
<rs-card>
|
||||
<template #header> Warna Teks </template>
|
||||
<template #body>
|
||||
<p class="text-primary mb-2">Ini adalah teks warna utama.</p>
|
||||
<p class="text-secondary mb-2">Ini adalah teks warna sekunder.</p>
|
||||
<p class="text-gray-500 mb-2">Ini adalah teks warna kelabu.</p>
|
||||
<p class="text-red-500 mb-2">Ini adalah teks warna merah.</p>
|
||||
<p class="text-green-500 mb-2">Ini adalah teks warna hijau.</p>
|
||||
<div class="flex justify-end mt-2">
|
||||
<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>
|
||||
<pre id="code3" class="language-html">
|
||||
<code>
|
||||
<p class="text-primary">Ini adalah teks warna utama.</p>
|
||||
<p class="text-secondary">Ini adalah teks warna sekunder.</p>
|
||||
<p class="text-gray-500">Ini adalah teks warna kelabu.</p>
|
||||
<p class="text-red-500">Ini adalah teks warna merah.</p>
|
||||
<p class="text-green-500">Ini adalah teks warna hijau.</p>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
|
||||
<!-- Gaya Fon -->
|
||||
<rs-card>
|
||||
<template #header> Gaya Fon </template>
|
||||
<template #body>
|
||||
<p class="italic mb-2">Ini adalah teks condong.</p>
|
||||
<p class="font-bold mb-2">Ini adalah teks tebal.</p>
|
||||
<p class="underline mb-2">Ini adalah teks bergaris.</p>
|
||||
<p class="line-through mb-2">Ini adalah teks dicoret.</p>
|
||||
<p class="uppercase mb-2">Ini adalah teks huruf besar.</p>
|
||||
<p class="lowercase mb-2">Ini adalah teks huruf kecil.</p>
|
||||
<p class="capitalize mb-2">Ini adalah teks huruf awal besar.</p>
|
||||
<div class="flex justify-end mt-2">
|
||||
<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 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>
|
||||
<pre id="code4" class="language-html">
|
||||
<code>
|
||||
<p class="italic">Ini adalah teks condong.</p>
|
||||
<p class="font-bold">Ini adalah teks tebal.</p>
|
||||
<p class="underline">Ini adalah teks bergaris.</p>
|
||||
<p class="line-through">Ini adalah teks dicoret.</p>
|
||||
<p class="uppercase">Ini adalah teks huruf besar.</p>
|
||||
<p class="lowercase">Ini adalah teks huruf kecil.</p>
|
||||
<p class="capitalize">Ini adalah teks huruf awal besar.</p>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltip-enter-active,
|
||||
.tooltip-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.tooltip-enter,
|
||||
.tooltip-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user