diff --git a/README.md b/README.md index eed4e74..8430b76 100644 --- a/README.md +++ b/README.md @@ -40,4 +40,4 @@ npm run preview ``` Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. -# corrad +# Niise diff --git a/app.vue b/app.vue index 1b2b723..c4e21ec 100644 --- a/app.vue +++ b/app.vue @@ -1,6 +1,6 @@ + + diff --git a/ecosystem.config.js b/ecosystem.config.js index 6f4f8c7..0485877 100644 --- a/ecosystem.config.js +++ b/ecosystem.config.js @@ -3,7 +3,7 @@ module.exports = { apps: [ { - name: "corrad", + name: "Niise", port: "3000", exec_mode: "cluster", instances: "max", diff --git a/navigation/index.js b/navigation/index.js index 304b2f0..f3cd556 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -35,12 +35,36 @@ export default [ title: "Komponen", icon: "ph:gear-fine", child: [ + { + title: "Amaran", + path: "/komponen/amaran", + child: [], + meta: {}, + }, { title: "Butang", path: "/komponen/butang", child: [], meta: {}, }, + { + title: "Lencana", + path: "/komponen/lencana", + child: [], + meta: {}, + }, + { + title: "Collapse", + path: "/komponen/collapse", + child: [], + meta: {}, + }, + { + title: "Dropdown", + path: "/komponen/dropdown", + child: [], + meta: {}, + }, { title: "Modal", path: "/komponen/modal", @@ -48,13 +72,32 @@ export default [ meta: {}, }, { - title: "Data Table", - path: "/komponen/datatable", + title: "Progress Bar", + path: "/komponen/progress-bar", + child: [], + meta: {}, + }, + { + title: "Tab", + path: "/komponen/tab", child: [], meta: {}, }, ], }, + { + title: "Datatable", + path: "/datatable", + icon: "ph:table", + child: [], + meta: {}, + }, + { + title: "Borang", + path: "/borang", + icon: "ph:clipboard-text", + child: [], + }, { title: "Ikon", path: "/ikon", diff --git a/nuxt.config.js b/nuxt.config.js index 074b865..082c85d 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -23,14 +23,14 @@ export default defineNuxtConfig({ pageTransition: { name: "page", mode: "out-in" }, }, head: { - title: "corrad", + title: "Niise", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", - content: "corrad", + content: "Niise", }, ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }], @@ -60,9 +60,9 @@ export default defineNuxtConfig({ type: "module", }, manifest: { - name: "corrad", - short_name: "corrad", - theme_color: "#202D3B", + name: "Niise", + short_name: "Niise", + theme_color: "#00A59A", background_color: "#FAFAFA", display: "standalone", scope: "./", diff --git a/pages/borang/index.vue b/pages/borang/index.vue new file mode 100644 index 0000000..4b4c5b0 --- /dev/null +++ b/pages/borang/index.vue @@ -0,0 +1,952 @@ + + + + + diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue new file mode 100644 index 0000000..ea1e457 --- /dev/null +++ b/pages/datatable/index.vue @@ -0,0 +1,294 @@ + + + + + diff --git a/pages/ikon/index.vue b/pages/ikon/index.vue index fb1eca9..400dbd6 100644 --- a/pages/ikon/index.vue +++ b/pages/ikon/index.vue @@ -14,13 +14,16 @@ definePageMeta({ }); const copyToClipboard = (text) => { - let tagHtml = ''; - navigator.clipboard.writeText(tagHtml); + let tagHtml = ''; + navigator.clipboard.writeText(tagHtml).then(() => { + showTooltip(text, "Kod disalin!"); + }); }; const searchQuery = ref(""); const displayedIcons = ref([]); const containerRef = ref(null); +const tooltips = reactive({}); const batchSize = 50; let currentIndex = 0; @@ -46,6 +49,13 @@ const resetIconDisplay = () => { loadMoreIcons(); }; +const showTooltip = (iconName, message) => { + tooltips[iconName] = message; + setTimeout(() => { + tooltips[iconName] = null; + }, 2000); +}; + watch(searchQuery, () => { resetIconDisplay(); nextTick(() => { @@ -93,18 +103,28 @@ const handleScroll = () => {
{{ icon.name }}
- - - Copy - +
+ + + Salin Kod + + + + {{ tooltips[icon.name] }} + + +
diff --git a/pages/komponen/amaran/index.vue b/pages/komponen/amaran/index.vue new file mode 100644 index 0000000..dc9bb1d --- /dev/null +++ b/pages/komponen/amaran/index.vue @@ -0,0 +1,226 @@ + + + + + diff --git a/pages/komponen/butang/index.vue b/pages/komponen/butang/index.vue index cd20ae3..650f6a9 100644 --- a/pages/komponen/butang/index.vue +++ b/pages/komponen/butang/index.vue @@ -14,20 +14,30 @@ const showCode2 = ref(false); const showCode3 = ref(false); const showCode4 = ref(false); +const tooltips = ref({}); + const copyCode = (codeId) => { const codeElement = document.getElementById(codeId); if (codeElement) { navigator.clipboard .writeText(codeElement.textContent) .then(() => { - // You can add a notification here if you want to inform the user that the code was copied - console.log("Code copied to clipboard"); + console.log("Kod disalin ke papan klip"); + showTooltip(codeId, "Kod disalin!"); }) .catch((err) => { - console.error("Failed to copy code: ", err); + console.error("Gagal menyalin kod: ", err); + showTooltip(codeId, "Gagal menyalin kod"); }); } }; + +const showTooltip = (codeId, message) => { + tooltips.value[codeId] = message; + setTimeout(() => { + tooltips.value[codeId] = null; + }, 2000); // Hide tooltip after 2 seconds +};