mokkun 0.1.6 → 0.2.0

package/bin/viewer.html

@@ -72,6 +72,9 @@
     }
 
     .toolbar-spacer { flex: 1; }
+    .toolbar-section[hidden] { display: none; }
+    .toolbar select { min-width: 120px; }
+    .toolbar select option:disabled { color: #8a8aa8; }
 
     #mokkun-app {
       margin-top: 60px;
@@ -113,6 +116,16 @@
         </select>
       </div>
 
+      <!-- v2 文書のときだけ表示: 状態（通常 / 成功 / エラー / 空 / 読み込み中）とロール -->
+      <div class="toolbar-section" id="state-section" hidden>
+        <label for="state-select">状態:</label>
+        <select id="state-select"></select>
+      </div>
+      <div class="toolbar-section" id="role-section" hidden>
+        <label for="role-select">ロール:</label>
+        <select id="role-select"></select>
+      </div>
+
       <div class="toolbar-spacer"></div>
     </div>
 
@@ -137,12 +150,58 @@
       document.body.classList.toggle('dark-theme', currentTheme === 'dark');
       document.documentElement.setAttribute('data-theme', currentTheme);
 
+      var stateSelect = document.getElementById('state-select');
+      var roleSelect = document.getElementById('role-select');
+      var params = new URLSearchParams(window.location.search);
+      // 状態の表示名はライブラリ（Mokkun.utils）のものを使う
+      var STATE_LABELS = Mokkun.utils.V2_STATE_LABELS;
+
+      // 状態セレクト: 現在の画面が持つ states.* に対応するものだけ選べる
+      function refreshStateSelect() {
+        var section = document.getElementById('state-section');
+        if (!mokkunInstance || !mokkunInstance.schemaV2) { section.hidden = true; return; }
+        section.hidden = false;
+        var enabled = mokkunInstance.getAvailableStates();
+        stateSelect.innerHTML = '';
+        Object.keys(STATE_LABELS).forEach(function(key) {
+          var opt = document.createElement('option');
+          opt.value = key;
+          opt.textContent = STATE_LABELS[key];
+          opt.disabled = enabled.indexOf(key) < 0;
+          stateSelect.appendChild(opt);
+        });
+        stateSelect.value = mokkunInstance.viewState;
+      }
+
+      // ロールセレクト: app.roles（と「すべて」）。roles が無い文書では出さない
+      function buildRoleSelect() {
+        var section = document.getElementById('role-section');
+        var schema = mokkunInstance && mokkunInstance.schemaV2;
+        var roles = (schema && schema.app.roles) || [];
+        section.hidden = roles.length === 0;
+        roleSelect.innerHTML = '';
+        [''].concat(roles).forEach(function(role) {
+          var opt = document.createElement('option');
+          opt.value = role;
+          opt.textContent = role || 'すべて';
+          roleSelect.appendChild(opt);
+        });
+        roleSelect.value = mokkunInstance.role || '';
+      }
+
       // Screen change
       screenSelect.addEventListener('change', function() {
         if (mokkunInstance && screenSelect.value) {
           mokkunInstance.showScreen(screenSelect.value);
+          refreshStateSelect();
         }
       });
+      stateSelect.addEventListener('change', function() {
+        if (mokkunInstance) mokkunInstance.setState(stateSelect.value);
+      });
+      roleSelect.addEventListener('change', function() {
+        if (mokkunInstance) mokkunInstance.setRole(roleSelect.value || undefined);
+      });
 
       // Sample YAML for when no file is specified
       var sampleYaml = [
@@ -185,7 +244,11 @@
         var options = {
           container: '#mokkun-app',
           theme: currentTheme,
+          initialScreen: params.get('screen') || undefined,
+          initialState: params.get('state') || undefined,
+          role: params.get('role') || undefined,
           onReady: function(instance) {
+            mokkunInstance = instance;
             var screens = instance.getScreenNames();
             screenSelect.innerHTML = '';
             screens.forEach(function(name) {
@@ -194,7 +257,19 @@
               opt.textContent = name;
               screenSelect.appendChild(opt);
             });
-            screenSelect.value = screens[0] || '';
+            screenSelect.value = instance.currentScreen || screens[0] || '';
+            refreshStateSelect();
+            buildRoleSelect();
+            // 旧フォーマットへ変換したときに落ちるキーはコンソールにだけ出す（画面には出さない）
+            if (instance.schemaV2) {
+              Mokkun.utils.compileV2Warnings(instance.schemaV2).forEach(function(w) {
+                console.warn('[mokkun] 旧フォーマット変換: ' + w.path + ': ' + w.message);
+              });
+            }
+          },
+          onNavigate: function(from, to) {
+            screenSelect.value = to;
+            refreshStateSelect();
           },
           onError: function(error) {
             document.getElementById('mokkun-app').innerHTML =

package/dist/example.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mokkun v0.2.0 - Example</title>
+  <!-- Load Mokkun CSS -->
+  <link rel="stylesheet" href="./mokkun.css">
+  <style>
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--mokkun-bg-primary, #f5f5f5);
+    }
+    #mokkun-app {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .demo-header {
+      text-align: center;
+      padding: 20px 0;
+      margin-bottom: 20px;
+      border-bottom: 1px solid var(--mokkun-border-color, #ddd);
+    }
+    .demo-header h1 {
+      margin: 0 0 8px 0;
+      color: var(--mokkun-text-primary, #333);
+    }
+    .demo-header p {
+      margin: 0;
+      color: var(--mokkun-text-secondary, #666);
+    }
+    .demo-controls {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+    .demo-controls button {
+      padding: 8px 16px;
+      border: 1px solid var(--mokkun-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--mokkun-bg-secondary, #fff);
+      color: var(--mokkun-text-primary, #333);
+      cursor: pointer;
+    }
+    .demo-controls button:hover {
+      background: var(--mokkun-bg-hover, #f0f0f0);
+    }
+    .demo-controls button.active {
+      background: var(--mokkun-primary, #007bff);
+      color: white;
+      border-color: var(--mokkun-primary, #007bff);
+    }
+  </style>
+</head>
+<body>
+  <div id="mokkun-app">
+    <div class="demo-header">
+      <h1>Mokkun v0.2.0</h1>
+      <p>YAML-based Presentation & Form Builder</p>
+    </div>
+    <div class="demo-controls">
+      <button onclick="setTheme('light')" id="theme-light">Light</button>
+      <button onclick="setTheme('dark')" id="theme-dark">Dark</button>
+      <button onclick="setTheme('bootstrap')" id="theme-bootstrap">Bootstrap</button>
+    </div>
+    <div id="content"></div>
+  </div>
+
+  <!-- Load Mokkun JS (UMD bundle) -->
+  <script src="./mokkun.js"></script>
+
+  <script>
+    // Sample YAML content
+    const yamlContent = `
+view:
+  demo:
+    title: お問い合わせフォーム
+    description: 以下のフォームに必要事項をご記入ください
+    fields:
+      - id: name
+        type: text
+        label: お名前
+        required: true
+        placeholder: 山田 太郎
+      - id: email
+        type: text
+        label: メールアドレス
+        input_type: email
+        required: true
+        placeholder: example@email.com
+      - id: category
+        type: select
+        label: お問い合わせ種別
+        required: true
+        options:
+          - label: 選択してください
+            value: ""
+          - label: 製品について
+            value: product
+          - label: サービスについて
+            value: service
+          - label: その他
+            value: other
+      - id: message
+        type: textarea
+        label: お問い合わせ内容
+        rows: 5
+        required: true
+        placeholder: お問い合わせ内容をご記入ください
+      - id: newsletter
+        type: checkbox
+        label: メールマガジンを受け取る
+    actions:
+      - id: submit
+        type: submit
+        label: 送信する
+        style: primary
+      - id: reset
+        type: reset
+        label: クリア
+        style: secondary
+
+  wizard_demo:
+    title: ウィザードデモ
+    description: ステップ形式の入力フォーム
+    wizard:
+      show_progress: true
+      allow_back: true
+      steps:
+        - id: step1
+          title: 基本情報
+          fields:
+            - id: company
+              type: text
+              label: 会社名
+              required: true
+            - id: department
+              type: text
+              label: 部署名
+        - id: step2
+          title: 連絡先
+          fields:
+            - id: phone
+              type: text
+              label: 電話番号
+              placeholder: "03-1234-5678"
+            - id: fax
+              type: text
+              label: FAX番号
+        - id: step3
+          title: 確認
+          description: 入力内容をご確認ください
+          fields:
+            - id: terms
+              type: checkbox
+              label: 利用規約に同意する
+              required: true
+`;
+
+    let mokkunInstance = null;
+    let currentTheme = 'light';
+
+    // Initialize Mokkun
+    async function initMokkun() {
+      try {
+        mokkunInstance = await Mokkun.init({
+          container: '#content',
+          yamlContent: yamlContent,
+          theme: currentTheme,
+          onReady: function(instance) {
+            console.log('Mokkun initialized!');
+            console.log('Available screens:', instance.getScreenNames());
+            console.log('Version:', Mokkun.VERSION);
+            updateThemeButtons();
+          },
+          onError: function(error) {
+            console.error('Mokkun initialization failed:', error);
+            document.getElementById('content').innerHTML =
+              '<div style="color: red; padding: 20px;">Error: ' + error.message + '</div>';
+          },
+          onSubmit: function(screenName, formData) {
+            console.log('Form submitted:', { screenName, formData });
+            alert('フォームが送信されました！\nコンソールでデータを確認できます。');
+          }
+        });
+      } catch (error) {
+        console.error('Failed to initialize:', error);
+      }
+    }
+
+    // Theme switching
+    function setTheme(themeId) {
+      currentTheme = themeId;
+      if (mokkunInstance) {
+        mokkunInstance.setTheme(themeId);
+      }
+      updateThemeButtons();
+    }
+
+    function updateThemeButtons() {
+      document.querySelectorAll('.demo-controls button').forEach(btn => {
+        btn.classList.remove('active');
+      });
+      const activeBtn = document.getElementById('theme-' + currentTheme);
+      if (activeBtn) {
+        activeBtn.classList.add('active');
+      }
+    }
+
+    // Screen navigation
+    window.showScreen = function(screenName) {
+      if (mokkunInstance) {
+        mokkunInstance.showScreen(screenName);
+      }
+    };
+
+    // Initialize on page load
+    initMokkun();
+  </script>
+</body>
+</html>