@ttdk-design-system/library-vue 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# @ttdk-design-system/library-vue
|
|
2
|
+
|
|
3
|
+
Official Vue 3 component library for **TTDK Design System**, developed for the Digital Transformation Office (DTO) Kementerian Kesehatan Republik Indonesia (SATUSEHAT ecosystem).
|
|
4
|
+
|
|
5
|
+
Built with Mitosis for seamless cross-framework consistency, `v-model` reactivity, strong TypeScript typings, and mobile webview readiness.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @ttdk-design-system/library-vue
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 🚀 Quick Start
|
|
18
|
+
|
|
19
|
+
### 1. Import Design Tokens (CSS)
|
|
20
|
+
|
|
21
|
+
Import the base design tokens (colors, typography, radii, spacing) in your application entry file (e.g., `main.ts` or `App.vue`):
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import "@ttdk-design-system/library-vue/theme/tokens.css";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Import Component Stylesheets & Components
|
|
28
|
+
|
|
29
|
+
Each component comes with modular styling for optimal bundle sizes:
|
|
30
|
+
|
|
31
|
+
```vue
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { ref } from "vue";
|
|
34
|
+
import Button from "@ttdk-design-system/library-vue/web/button";
|
|
35
|
+
import "@ttdk-design-system/library-vue/web/button/button.css";
|
|
36
|
+
|
|
37
|
+
import Input from "@ttdk-design-system/library-vue/web/input";
|
|
38
|
+
import "@ttdk-design-system/library-vue/web/input/input.css";
|
|
39
|
+
|
|
40
|
+
import BottomSheet from "@ttdk-design-system/library-vue/webview/bottomsheet";
|
|
41
|
+
import "@ttdk-design-system/library-vue/webview/bottomsheet/bottomsheet.css";
|
|
42
|
+
|
|
43
|
+
const sheetOpen = ref(false);
|
|
44
|
+
const name = ref("");
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<template>
|
|
48
|
+
<div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
|
|
49
|
+
<Input
|
|
50
|
+
v-model="name"
|
|
51
|
+
label="Nama Pasien"
|
|
52
|
+
placeholder="Masukkan nama lengkap"
|
|
53
|
+
/>
|
|
54
|
+
|
|
55
|
+
<Button variant="primary" @click="sheetOpen = true">
|
|
56
|
+
Buka Detail (BottomSheet)
|
|
57
|
+
</Button>
|
|
58
|
+
|
|
59
|
+
<BottomSheet
|
|
60
|
+
v-model:open="sheetOpen"
|
|
61
|
+
mode="auto"
|
|
62
|
+
height="md"
|
|
63
|
+
title="Detail Rekam Medis"
|
|
64
|
+
description="Hasil pemeriksaan laboratorium pasien"
|
|
65
|
+
close
|
|
66
|
+
>
|
|
67
|
+
<p>
|
|
68
|
+
Halo, {{ name || "Pasien" }}! Data medis Anda telah terverifikasi di
|
|
69
|
+
SATUSEHAT.
|
|
70
|
+
</p>
|
|
71
|
+
</BottomSheet>
|
|
72
|
+
</div>
|
|
73
|
+
</template>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 📱 Modules
|
|
79
|
+
|
|
80
|
+
TTDK Design System is split into two specialized modules:
|
|
81
|
+
|
|
82
|
+
1. **`web`**: Components designed for desktop & mobile responsive web applications (Accordion, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, Chip, Dropdown, Modal, Pagination, Popover, Selectbox, Sonner, Table, Tabs, Text, Textarea, Tooltip).
|
|
83
|
+
2. **`webview`**: Components optimized for mobile in-app webviews (e.g., SATUSEHAT Mobile), featuring native Apple HIG & Material 3 aesthetics, notch safe-area insets, swipe gestures, and pull-to-dismiss behavior (BottomSheet, ButtonIos, ButtonMaterial).
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## 🎨 Tailwind CSS Integration
|
|
88
|
+
|
|
89
|
+
Include the TTDK preset in your `tailwind.config.js`:
|
|
90
|
+
|
|
91
|
+
```javascript
|
|
92
|
+
module.exports = {
|
|
93
|
+
presets: [require("@ttdk-design-system/library-vue/tailwind-preset.cjs")],
|
|
94
|
+
content: [
|
|
95
|
+
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
96
|
+
"./node_modules/@ttdk-design-system/library-vue/**/*.{vue,js,ts,jsx,tsx}",
|
|
97
|
+
],
|
|
98
|
+
};
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## 📄 License
|
|
104
|
+
|
|
105
|
+
MIT © DTO Kementerian Kesehatan Republik Indonesia.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttdk-design-system/library-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"tailwind-preset.js",
|
|
13
13
|
"ttdk-manifest.json",
|
|
14
14
|
"AI_GUIDE.md",
|
|
15
|
-
"llms.txt"
|
|
15
|
+
"llms.txt",
|
|
16
|
+
"README.md"
|
|
16
17
|
],
|
|
17
18
|
"main": "./src/index.ts",
|
|
18
19
|
"module": "./src/index.ts",
|