@kupola/kupola 2.0.0-beta.2 → 2.0.0-beta.3

package/packages/core/src/components/select.js

@@ -24,11 +24,13 @@
 
 import { html } from '../template.js';
 import { render } from '../render.js';
+import { t } from '../i18n.js';
 
 /**
  * Create a Select component instance.
  *
  * @param {Object}  [options]
+ * @param {string}  [options.label]          Label text (creates <label> linked to select)
  * @param {Array<{value:string, text:string}>} [options.items]      Option list
  * @param {string}  [options.placeholder]    Placeholder text
  * @param {boolean} [options.searchable]     Enable search filter
@@ -41,8 +43,9 @@ import { render } from '../render.js';
  */
 export function Select(options = {}) {
   const {
+    label = '',
     items = [],
-    placeholder = 'Select...',
+    placeholder = null,
     searchable = false,
     clearable = false,
     multiple = false,
@@ -51,6 +54,10 @@ export function Select(options = {}) {
     onChange = null,
   } = options;
 
+  const _placeholder = placeholder || t('select.placeholder');
+  const _id = label ? `ds-select-${Math.random().toString(36).slice(2, 8)}` : '';
+  const _hasLabel = !!label;
+
   let _isOpen = false;
   let _focusIndex = -1;
   let _searchQuery = '';
@@ -158,7 +165,7 @@ export function Select(options = {}) {
       valueEl.textContent = `${_selectedValues.size} selected`;
       valueEl.classList.remove('ds-select__value--placeholder');
     } else {
-      valueEl.textContent = placeholder;
+      valueEl.textContent = _placeholder;
       valueEl.classList.add('ds-select__value--placeholder');
     }
   }
@@ -230,6 +237,14 @@ export function Select(options = {}) {
       e.preventDefault();
       _setFocus(_focusIndex - 1);
       break;
+    case 'Home':
+      e.preventDefault();
+      _setFocus(0);
+      break;
+    case 'End':
+      e.preventDefault();
+      _setFocus(_filteredItems().length - 1);
+      break;
     case 'Enter':
       e.preventDefault();
       {
@@ -240,6 +255,7 @@ export function Select(options = {}) {
       }
       break;
     case 'Escape':
+    case 'Tab':
       e.preventDefault();
       close();
       break;
@@ -274,9 +290,10 @@ export function Select(options = {}) {
   // are serialized as static text by the render system.
 
   const tpl = html`
-    <div class="ds-select">
-      <div class="ds-select__trigger">
-        <span class="ds-select__value${!displayText ? ' ds-select__value--placeholder' : ''}">${displayText || placeholder}</span>
+    ${_hasLabel ? html`<label class="ds-form-label" for="${_id}">${label}</label>` : ''}
+    <div class="ds-select" ${!label ? 'aria-label="Select"' : ''}>
+      <div class="ds-select__trigger" id="${_id}">
+        <span class="ds-select__value${!displayText ? ' ds-select__value--placeholder' : ''}">${displayText || _placeholder}</span>
         ${clearable ? html`<button class="ds-select__clear">&times;</button>` : ''}
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <polyline points="6 9 12 15 18 9"/>

package/packages/core/src/components/table.js

@@ -8,6 +8,8 @@
  * @module Table
  */
 
+import { t } from '../i18n.js';
+
 /**
  * @typedef {Object} TableColumn
  * @property {string} key - Column data key
@@ -382,7 +384,7 @@ export function Table(options = {}) {
       const td = document.createElement('td');
       td.colSpan = _getTotalColCount();
       td.className = 'kupola-table-empty';
-      td.textContent = options.emptyText || 'No data';
+      td.textContent = options.emptyText || t('table.empty');
       tr.appendChild(td);
       tbody.appendChild(tr);
     } else {

package/packages/core/src/components/timepicker.js

@@ -20,6 +20,7 @@
 
 import { html } from '../template.js';
 import { render } from '../render.js';
+import { t } from '../i18n.js';
 
 /**
  * Create a Timepicker component instance.
@@ -126,7 +127,7 @@ export function Timepicker(options = {}) {
   const tpl = html`
     <div class="ds-timepicker">
       <div class="ds-timepicker__input-wrap">
-        <input class="ds-timepicker__input" type="text" readonly placeholder="Select time..." />
+        <input class="ds-timepicker__input" type="text" readonly placeholder="${t('timepicker.placeholder')}" />
         <span class="ds-timepicker__icon">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </span>

package/packages/core/src/errors.js

@@ -0,0 +1,80 @@
+// SPDX-License-Identifier: MIT
+/**
+ * @kupola/core — Error boundary utility for graceful error handling.
+ *
+ * Wraps component rendering so that exceptions within a component
+ * do not crash the entire application. On error, a fallback element
+ * is rendered in place of the failed component.
+ *
+ * ```js
+ * import { ErrorBoundary } from '@kupola/core/errors';
+ *
+ * const view = ErrorBoundary(
+ *   () => SomeRiskyComponent({ data: badData }),
+ *   { fallback: (err) => html`<div class="ds-alert ds-alert--error">Error: ${err.message}</div>` }
+ * );
+ * container.appendChild(view.element);
+ * ```
+ *
+ * @module errors
+ */
+
+import { html } from './template.js';
+import { render } from './render.js';
+
+/**
+ * Wrap a component factory with error handling.
+ *
+ * @param {Function} factory - Component factory function that returns { element, ... }
+ * @param {Object}   [options]
+ * @param {Function} [options.fallback] - Fallback factory: (error) => TemplateResult|string
+ * @param {Function} [options.onError]  - Error callback: (error) => void
+ * @returns {{ element: DocumentFragment|HTMLElement, error: Error|null }}
+ */
+export function ErrorBoundary(factory, options = {}) {
+  const {
+    fallback = null,
+    onError = null,
+  } = options;
+
+  try {
+    const result = factory();
+    return result;
+  } catch (err) {
+    if (onError) {
+      try { onError(err); } catch (_e) { /* swallow callback errors */ }
+    }
+
+    // Log to console for debugging
+    console.error('[Kupola ErrorBoundary]', err);
+
+    // Create fallback element
+    const container = document.createDocumentFragment();
+    if (fallback) {
+      try {
+        const fallbackContent = typeof fallback === 'function' ? fallback(err) : fallback;
+        if (typeof fallbackContent === 'string') {
+          const el = document.createElement('div');
+          el.className = 'ds-error-boundary';
+          el.textContent = fallbackContent;
+          container.appendChild(el);
+        } else {
+          render(fallbackContent, container);
+        }
+      } catch (_fallbackErr) {
+        // If fallback also fails, show a minimal error
+        const el = document.createElement('div');
+        el.className = 'ds-error-boundary';
+        el.textContent = `Component error: ${err.message}`;
+        container.appendChild(el);
+      }
+    } else {
+      const el = document.createElement('div');
+      el.className = 'ds-error-boundary';
+      el.textContent = `Component error: ${err.message}`;
+      container.appendChild(el);
+    }
+
+    return { element: container, error: err };
+  }
+}

package/packages/core/src/i18n.js

@@ -19,6 +19,9 @@ const _messages = {
     'fileupload.drag': 'Drag files here or',
     'fileupload.browse': 'Browse',
     'empty.text': 'No data',
+    'datepicker.months': 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
+    'datepicker.weekdays': 'Mo,Tu,We,Th,Fr,Sa,Su',
+    'timepicker.placeholder': 'Select time',
   },
   'zh-CN': {
     'modal.close': '关闭',
@@ -29,6 +32,8 @@ const _messages = {
     'pagination.of': '/',
     'select.placeholder': '请选择',
     'datepicker.placeholder': '选择日期',
+    'datepicker.months': '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',
+    'datepicker.weekdays': '一,二,三,四,五,六,日',
     'timepicker.placeholder': '选择时间',
     'fileupload.drag': '拖拽文件到此处或',
     'fileupload.browse': '浏览',

package/packages/core/src/index.js

@@ -40,3 +40,6 @@ export { flushJobs, resetScheduler } from './scheduler.js';
 
 // ── i18n ─────────────────────────────────────────────────────────────────────
 export { setLocale, getLocale, t, addMessages } from './i18n.js';
+
+// ── Error Boundary ───────────────────────────────────────────────────────────
+export { ErrorBoundary } from './errors.js';