@c2-markdown-ui/svelte 0.0.0-stage → 0.4.3

package/src/lib/widgets/Switch.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    label?: string;
+    /** 默认是否选中 */
+    default?: boolean;
+    /** 选中时展示的文案（antd checkedChildren） */
+    checkedText?: string;
+    /** 未选中时展示的文案（antd unCheckedChildren） */
+    unCheckedText?: string;
+    hint?: string;
+    /** 是否必填（switch 始终有值，仅语义标记） */
+    required?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: boolean) => void;
+  }
+  let {
+    label = '',
+    default: initial = false,
+    checkedText = '',
+    unCheckedText = '',
+    hint = '',
+    required = false,
+    disabled = false,
+    onchange
+  }: Props = $props();
+  let checked = $state(initial);
+
+  function toggle() {
+    if (disabled) return;
+    checked = !checked;
+    onchange(checked);
+  }
+</script>
+
+<div class="widget-switch">
+  {#if label || hint || required}
+    <div class="widget-label-row switch-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      class="switch-track"
+      data-checked={checked}
+      onclick={toggle}
+      {disabled}
+    >
+      <span class="switch-thumb"></span>
+      {#if checkedText}<span class="switch-text switch-text-checked">{checkedText}</span>{/if}
+      {#if unCheckedText}<span class="switch-text switch-text-unchecked">{unCheckedText}</span>{/if}
+    </button>
+  </div>
+</div>

package/src/lib/widgets/Text.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  interface Props {
+    /** 文字内容 */
+    text?: string;
+    /** 字号（12-48），默认 14 */
+    size?: number;
+    /** 字体颜色（十六进制或 CSS 颜色名） */
+    color?: string;
+    /** 加粗 */
+    bold?: boolean;
+    /** 文字对齐：left / center / right */
+    align?: 'left' | 'center' | 'right';
+    /** 是否启用 Alert 提示风格（参考 antd Alert） */
+    alert?: boolean;
+    /** Alert 风格：info（默认）/ warning / error */
+    alertStyle?: 'info' | 'warning' | 'error';
+    /** 列内垂直对齐（row 组件用） */
+    onchange?: (value: any) => void;
+    /** 允许透传扩展属性（span/when 等 form 修饰符） */
+    [key: string]: any;
+  }
+  let { text = '', size, color, bold, align, alert = false, alertStyle = 'info' }: Props = $props();
+
+  // Alert 风格图标（antd 风格：info 圆形 i / warning 圆形感叹 / error 圆形叉）
+  const alertIcons: Record<string, string> = {
+    info: 'ℹ',
+    warning: '⚠',
+    error: '✕'
+  };
+</script>
+
+{#if alert}
+  <div
+    class="widget-alert widget-alert-{alertStyle}"
+    style={[align ? `text-align: ${align}` : ''].filter(Boolean).join('; ')}
+    role="alert"
+  >
+    <span class="widget-alert-icon" aria-hidden="true">{alertIcons[alertStyle] ?? alertIcons.info}</span>
+    <span
+      class="widget-alert-message"
+      style={[
+        size ? `font-size: ${size}px` : '',
+        color ? `color: ${color}` : '',
+        bold ? 'font-weight: 600' : ''
+      ].filter(Boolean).join('; ')}
+    >{text}</span>
+  </div>
+{:else}
+  <p
+    class="widget-text"
+    style={[
+      size ? `font-size: ${size}px` : '',
+      color ? `color: ${color}` : '',
+      bold ? 'font-weight: 600' : '',
+      align ? `text-align: ${align}` : ''
+    ].filter(Boolean).join('; ')}
+  >{text}</p>
+{/if}

package/src/lib/widgets/TextInput.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  interface Props {
+    placeholder?: string;
+    label?: string;
+    default?: string;
+    hint?: string;
+    /** 是否必填：label 前红色 * */
+    required?: boolean;
+    /** 正则校验规则（JS 正则源字符串） */
+    pattern?: string;
+    /** 校验失败提示文案 */
+    message?: string;
+    /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+    error?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string) => void;
+  }
+  let { placeholder = '', label = '', default: initial = '', hint = '', required = false, pattern = '', message = '', error = '', disabled = false, onchange }: Props = $props();
+  let value = $state(initial);
+  let localError = $state('');
+
+  /** 校验当前值：返回错误文案或空串 */
+  function validate(v: string): string {
+    if (required && !v.trim()) return message || (label ? `请填写${label}` : '该项为必填项');
+    if (pattern && v && !new RegExp(pattern).test(v)) return message || (label ? `${label}格式不正确` : '格式不正确');
+    return '';
+  }
+
+  function commit() {
+    localError = validate(value);
+    onchange(value);
+  }
+
+  const shownError = $derived(error || localError);
+</script>
+
+<div class="widget-text-input" class:widget-field-error={!!shownError}>
+  {#if label || hint || required}
+    <div class="widget-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <input
+      type="text"
+      class:widget-input-error={!!shownError}
+      bind:value
+      {placeholder}
+      {disabled}
+      onfocusout={commit}
+      oninput={() => { if (localError) localError = validate(value); }}
+    />
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+  </div>
+</div>