mokkun 0.1.0 → 0.1.2

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.
Files changed (75) hide show
  1. package/dist/example.html +225 -0
  2. package/dist/mokkun.css +1 -1
  3. package/dist/mokkun.esm.js +8 -2
  4. package/dist/mokkun.esm.js.map +1 -1
  5. package/dist/mokkun.js +2 -2
  6. package/dist/mokkun.js.map +1 -1
  7. package/dist/types/lib.d.ts +80 -0
  8. package/dist/types/loader/file-loader.d.ts +112 -0
  9. package/dist/types/loader/index.d.ts +4 -0
  10. package/dist/types/parser/index.d.ts +4 -0
  11. package/dist/types/parser/yaml-parser.d.ts +59 -0
  12. package/dist/types/renderer/action-handler.d.ts +76 -0
  13. package/dist/types/renderer/components/accordion-panel.d.ts +144 -0
  14. package/dist/types/renderer/components/action-buttons.d.ts +183 -0
  15. package/dist/types/renderer/components/alert-banner.d.ts +43 -0
  16. package/dist/types/renderer/components/app-header.d.ts +275 -0
  17. package/dist/types/renderer/components/app-navi.d.ts +167 -0
  18. package/dist/types/renderer/components/badge.d.ts +134 -0
  19. package/dist/types/renderer/components/browser.d.ts +134 -0
  20. package/dist/types/renderer/components/calendar.d.ts +198 -0
  21. package/dist/types/renderer/components/checkbox.d.ts +132 -0
  22. package/dist/types/renderer/components/chip.d.ts +120 -0
  23. package/dist/types/renderer/components/combobox.d.ts +217 -0
  24. package/dist/types/renderer/components/data-table.d.ts +186 -0
  25. package/dist/types/renderer/components/date-range-picker.d.ts +203 -0
  26. package/dist/types/renderer/components/definition-list.d.ts +165 -0
  27. package/dist/types/renderer/components/delete-confirm-dialog.d.ts +151 -0
  28. package/dist/types/renderer/components/disclosure.d.ts +118 -0
  29. package/dist/types/renderer/components/dropdown.d.ts +220 -0
  30. package/dist/types/renderer/components/duration-input.d.ts +154 -0
  31. package/dist/types/renderer/components/duration-picker.d.ts +108 -0
  32. package/dist/types/renderer/components/field-renderer.d.ts +22 -0
  33. package/dist/types/renderer/components/float-area.d.ts +196 -0
  34. package/dist/types/renderer/components/form-fields.d.ts +97 -0
  35. package/dist/types/renderer/components/form-section.d.ts +118 -0
  36. package/dist/types/renderer/components/google-map-embed.d.ts +88 -0
  37. package/dist/types/renderer/components/heading.d.ts +119 -0
  38. package/dist/types/renderer/components/image-uploader.d.ts +271 -0
  39. package/dist/types/renderer/components/index.d.ts +48 -0
  40. package/dist/types/renderer/components/information-panel.d.ts +139 -0
  41. package/dist/types/renderer/components/input.d.ts +222 -0
  42. package/dist/types/renderer/components/layout.d.ts +71 -0
  43. package/dist/types/renderer/components/line-clamp.d.ts +170 -0
  44. package/dist/types/renderer/components/loader.d.ts +104 -0
  45. package/dist/types/renderer/components/notification-bar.d.ts +251 -0
  46. package/dist/types/renderer/components/pagination.d.ts +167 -0
  47. package/dist/types/renderer/components/photo-manager-renderer.d.ts +9 -0
  48. package/dist/types/renderer/components/radio-button-panel.d.ts +152 -0
  49. package/dist/types/renderer/components/radio.d.ts +117 -0
  50. package/dist/types/renderer/components/repeater.d.ts +116 -0
  51. package/dist/types/renderer/components/response-message.d.ts +180 -0
  52. package/dist/types/renderer/components/search-input.d.ts +198 -0
  53. package/dist/types/renderer/components/section-nav.d.ts +151 -0
  54. package/dist/types/renderer/components/segmented-control.d.ts +143 -0
  55. package/dist/types/renderer/components/select.d.ts +98 -0
  56. package/dist/types/renderer/components/status-label.d.ts +146 -0
  57. package/dist/types/renderer/components/stepper.d.ts +123 -0
  58. package/dist/types/renderer/components/tabs.d.ts +179 -0
  59. package/dist/types/renderer/components/textarea.d.ts +173 -0
  60. package/dist/types/renderer/components/timeline.d.ts +146 -0
  61. package/dist/types/renderer/components/toggle.d.ts +109 -0
  62. package/dist/types/renderer/components/tooltip.d.ts +158 -0
  63. package/dist/types/renderer/components/wizard.d.ts +118 -0
  64. package/dist/types/renderer/screen-renderer.d.ts +58 -0
  65. package/dist/types/renderer/utils/dom.d.ts +29 -0
  66. package/dist/types/renderer/utils/dummy-data.d.ts +27 -0
  67. package/dist/types/renderer/utils/field-helpers.d.ts +67 -0
  68. package/dist/types/renderer/utils/index.d.ts +6 -0
  69. package/dist/types/theme/index.d.ts +6 -0
  70. package/dist/types/theme/theme-manager.d.ts +102 -0
  71. package/dist/types/types/field-renderable.d.ts +40 -0
  72. package/dist/types/types/index.d.ts +6 -0
  73. package/dist/types/types/schema.d.ts +1683 -0
  74. package/dist/types/types/theme.d.ts +111 -0
  75. package/package.json +2 -2
package/dist/example.html ADDED
@@ -0,0 +1,225 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mokkun v0.1.2 - Example</title>
7
+ <!-- Load Mokkun CSS -->
8
+ <link rel="stylesheet" href="./mokkun.css">
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ min-height: 100vh;
13
+ background: var(--mokkun-bg-primary, #f5f5f5);
14
+ }
15
+ #mokkun-app {
16
+ max-width: 800px;
17
+ margin: 0 auto;
18
+ padding: 20px;
19
+ }
20
+ .demo-header {
21
+ text-align: center;
22
+ padding: 20px 0;
23
+ margin-bottom: 20px;
24
+ border-bottom: 1px solid var(--mokkun-border-color, #ddd);
25
+ }
26
+ .demo-header h1 {
27
+ margin: 0 0 8px 0;
28
+ color: var(--mokkun-text-primary, #333);
29
+ }
30
+ .demo-header p {
31
+ margin: 0;
32
+ color: var(--mokkun-text-secondary, #666);
33
+ }
34
+ .demo-controls {
35
+ display: flex;
36
+ gap: 10px;
37
+ justify-content: center;
38
+ margin-bottom: 20px;
39
+ flex-wrap: wrap;
40
+ }
41
+ .demo-controls button {
42
+ padding: 8px 16px;
43
+ border: 1px solid var(--mokkun-border-color, #ddd);
44
+ border-radius: 4px;
45
+ background: var(--mokkun-bg-secondary, #fff);
46
+ color: var(--mokkun-text-primary, #333);
47
+ cursor: pointer;
48
+ }
49
+ .demo-controls button:hover {
50
+ background: var(--mokkun-bg-hover, #f0f0f0);
51
+ }
52
+ .demo-controls button.active {
53
+ background: var(--mokkun-primary, #007bff);
54
+ color: white;
55
+ border-color: var(--mokkun-primary, #007bff);
56
+ }
57
+ </style>
58
+ </head>
59
+ <body>
60
+ <div id="mokkun-app">
61
+ <div class="demo-header">
62
+ <h1>Mokkun v0.1.2</h1>
63
+ <p>YAML-based Presentation & Form Builder</p>
64
+ </div>
65
+ <div class="demo-controls">
66
+ <button onclick="setTheme('light')" id="theme-light">Light</button>
67
+ <button onclick="setTheme('dark')" id="theme-dark">Dark</button>
68
+ <button onclick="setTheme('bootstrap')" id="theme-bootstrap">Bootstrap</button>
69
+ </div>
70
+ <div id="content"></div>
71
+ </div>
72
+
73
+ <!-- Load Mokkun JS (UMD bundle) -->
74
+ <script src="./mokkun.js"></script>
75
+
76
+ <script>
77
+ // Sample YAML content
78
+ const yamlContent = `
79
+ view:
80
+ demo:
81
+ title: お問い合わせフォーム
82
+ description: 以下のフォームに必要事項をご記入ください
83
+ fields:
84
+ - id: name
85
+ type: text
86
+ label: お名前
87
+ required: true
88
+ placeholder: 山田 太郎
89
+ - id: email
90
+ type: text
91
+ label: メールアドレス
92
+ input_type: email
93
+ required: true
94
+ placeholder: example@email.com
95
+ - id: category
96
+ type: select
97
+ label: お問い合わせ種別
98
+ required: true
99
+ options:
100
+ - label: 選択してください
101
+ value: ""
102
+ - label: 製品について
103
+ value: product
104
+ - label: サービスについて
105
+ value: service
106
+ - label: その他
107
+ value: other
108
+ - id: message
109
+ type: textarea
110
+ label: お問い合わせ内容
111
+ rows: 5
112
+ required: true
113
+ placeholder: お問い合わせ内容をご記入ください
114
+ - id: newsletter
115
+ type: checkbox
116
+ label: メールマガジンを受け取る
117
+ actions:
118
+ - id: submit
119
+ type: submit
120
+ label: 送信する
121
+ style: primary
122
+ - id: reset
123
+ type: reset
124
+ label: クリア
125
+ style: secondary
126
+
127
+ wizard_demo:
128
+ title: ウィザードデモ
129
+ description: ステップ形式の入力フォーム
130
+ wizard:
131
+ show_progress: true
132
+ allow_back: true
133
+ steps:
134
+ - id: step1
135
+ title: 基本情報
136
+ fields:
137
+ - id: company
138
+ type: text
139
+ label: 会社名
140
+ required: true
141
+ - id: department
142
+ type: text
143
+ label: 部署名
144
+ - id: step2
145
+ title: 連絡先
146
+ fields:
147
+ - id: phone
148
+ type: text
149
+ label: 電話番号
150
+ placeholder: "03-1234-5678"
151
+ - id: fax
152
+ type: text
153
+ label: FAX番号
154
+ - id: step3
155
+ title: 確認
156
+ description: 入力内容をご確認ください
157
+ fields:
158
+ - id: terms
159
+ type: checkbox
160
+ label: 利用規約に同意する
161
+ required: true
162
+ `;
163
+
164
+ let mokkunInstance = null;
165
+ let currentTheme = 'light';
166
+
167
+ // Initialize Mokkun
168
+ async function initMokkun() {
169
+ try {
170
+ mokkunInstance = await Mokkun.init({
171
+ container: '#content',
172
+ yamlContent: yamlContent,
173
+ theme: currentTheme,
174
+ onReady: function(instance) {
175
+ console.log('Mokkun initialized!');
176
+ console.log('Available screens:', instance.getScreenNames());
177
+ console.log('Version:', Mokkun.VERSION);
178
+ updateThemeButtons();
179
+ },
180
+ onError: function(error) {
181
+ console.error('Mokkun initialization failed:', error);
182
+ document.getElementById('content').innerHTML =
183
+ '<div style="color: red; padding: 20px;">Error: ' + error.message + '</div>';
184
+ },
185
+ onSubmit: function(screenName, formData) {
186
+ console.log('Form submitted:', { screenName, formData });
187
+ alert('フォームが送信されました！\nコンソールでデータを確認できます。');
188
+ }
189
+ });
190
+ } catch (error) {
191
+ console.error('Failed to initialize:', error);
192
+ }
193
+ }
194
+
195
+ // Theme switching
196
+ function setTheme(themeId) {
197
+ currentTheme = themeId;
198
+ if (mokkunInstance) {
199
+ mokkunInstance.setTheme(themeId);
200
+ }
201
+ updateThemeButtons();
202
+ }
203
+
204
+ function updateThemeButtons() {
205
+ document.querySelectorAll('.demo-controls button').forEach(btn => {
206
+ btn.classList.remove('active');
207
+ });
208
+ const activeBtn = document.getElementById('theme-' + currentTheme);
209
+ if (activeBtn) {
210
+ activeBtn.classList.add('active');
211
+ }
212
+ }
213
+
214
+ // Screen navigation
215
+ window.showScreen = function(screenName) {
216
+ if (mokkunInstance) {
217
+ mokkunInstance.showScreen(screenName);
218
+ }
219
+ };
220
+
221
+ // Initialize on page load
222
+ initMokkun();
223
+ </script>
224
+ </body>
225
+ </html>