@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/attachment-files/AttachmentFilesField.svelte

@@ -18,19 +18,65 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let removeFileConfirm: RemoveConfirm = null as unknown as RemoveConfirm;
     export let uploadFile: FileUpload;
+    export let compact: boolean = false;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
+    export let onchange: ((files: Array<AttachmentFile>) => void) | null = null;
 
     export let text: string | null = null;
 
+    export const setFocus = () => {
+        setTimeout(() => {
+            if (containerElement) {
+                containerElement.focus();
+            }
+        }, 50);
+    }
+
     let showUpload: boolean = false;
+    let containerElement: HTMLDivElement;
+    let oldFiles = files;
+    let isUserChange: boolean = false;
+    let hasFocus: boolean = false;
 
     onMount(() => {
 
     })
 
+    // 处理focus/blur事件
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    }
+
+    const handleBlur = () => {
+        if (hasFocus && !showUpload) {
+            hasFocus = false;
+            onblur?.();
+        }
+    }
+
+    const handleContainerFocus = (e: FocusEvent) => {
+        handleFocus();
+    }
+
+    const handleContainerBlur = (e: FocusEvent) => {
+        setTimeout(() => {
+            if (!showUpload && !containerElement?.contains(document.activeElement)) {
+                handleBlur();
+            }
+        }, 50);
+    }
+
     const showDialog = () => {
+        handleFocus();
         showUpload = true;
     }
+
     const appendNewFile = (file: UploadFile) => {
+        isUserChange = true;
         files = [...files, {
             name: file.file.name,
             uri: file.url ?? '',
@@ -41,6 +87,7 @@
     const removeFile = async (file: AttachmentFile) => {
         let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
         if (confirmed) {
+            isUserChange = true;
             let pos = files.findIndex(item => item == file);
             if (pos > -1) {
                 files.splice(pos, 1);
@@ -49,8 +96,26 @@
         }
     }
 
+    // 监听upload面板关闭
+    $: if (!showUpload && hasFocus) {
+        setTimeout(() => {
+            if (document.activeElement !== containerElement) {
+                handleBlur();
+            }
+        }, 50);
+    }
+
     $: text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>'
 
+    // 处理onchange事件
+    $: if (oldFiles !== files) {
+        if (isUserChange) {
+            onchange?.(files);
+            isUserChange = false;
+        }
+        oldFiles = files;
+    }
+
 </script>
 
 {#if displayMode === DisplayMode.View}
@@ -59,7 +124,8 @@
     </div>
 {:else }
     <div class="uniface-attachment-field" {style}>
-        <div class="uniface-common-editor {variant}" tabindex="-1">
+        <div bind:this={containerElement} class="uniface-common-editor {variant}" class:compact class:disabled 
+             tabindex={disabled ? -1 : 0} on:focus={handleContainerFocus} on:blur={handleContainerBlur}>
             <div class="files-field">
                 {#each files as file}
                     <FileRender {file} {readonly} onRemove={removeFile}/>

package/dist/attachment-files/AttachmentFilesField.svelte.d.ts

@@ -24,9 +24,16 @@ declare const AttachmentFilesField: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: DisplayMode;
     removeFileConfirm?: RemoveConfirm;
     uploadFile: FileUpload;
+    compact?: boolean;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
+    onchange?: ((files: Array<AttachmentFile>) => void) | null;
     text?: string | null;
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type AttachmentFilesField = InstanceType<typeof AttachmentFilesField>;
 export default AttachmentFilesField;

package/dist/base-calendar/CalendarBase.svelte

@@ -33,9 +33,6 @@
     let weekTitle: Array<string> = dateCtx.weekTitleAbbr;
     let monthTitle: Array<string> = dateCtx.months;
     let weekBegin: number = dateCtx.weekBegin;
-
-    console.log("日期资源", dateCtx.weekTitle, dateCtx.months, dateCtx.weekTitleAbbr)
-
     const onSelectDate = (date: dayjs.Dayjs) => {
         value = date;
         onSelect(value);

package/dist/box/README.md

@@ -0,0 +1,385 @@
+# Box Component
+
+A flexible container component with optional header and footer sections, perfect for creating cards, panels, and content sections.
+
+## Features
+
+- **Structured Layout**: Header, content, and footer sections
+- **Flexible Styling**: Individual styling for each section
+- **Optional Elements**: Header and footer are only rendered when needed
+- **Rounded Corners**: Optional rounded corner styling
+- **Title Support**: Built-in title display or custom header content
+- **Responsive**: Adapts to container size
+
+## Basic Usage
+
+```svelte
+<script>
+import Box from '@ticatec/uniface-element/Box';
+</script>
+
+<Box title="My Box">
+  <p>Content goes here</p>
+</Box>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `null` | Title text for the header section |
+| `style` | `string \| null` | `null` | Custom CSS styles for the main container |
+| `round` | `boolean` | `false` | Enable rounded corners |
+| `content$style` | `string \| null` | `null` | Custom CSS styles for the content section |
+| `header$style` | `string \| null` | `null` | Custom CSS styles for the header section |
+| `footer$style` | `string \| null` | `null` | Custom CSS styles for the footer section |
+| `class` | `string` | `null` | Additional CSS classes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `header` | Custom header content (overrides title prop) |
+| `default` | Main content area |
+| `footer` | Footer content |
+
+## Examples
+
+### Basic Box with Title
+
+```svelte
+<Box title="Information">
+  <p>This is some important information that needs to be displayed in a box.</p>
+</Box>
+```
+
+### Custom Header Content
+
+```svelte
+<Box>
+  <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
+    <h3>Custom Header</h3>
+    <button>Action</button>
+  </div>
+  
+  <p>Content with custom header</p>
+</Box>
+```
+
+### Complete Box with Footer
+
+```svelte
+<Box title="User Profile">
+  <div class="profile-content">
+    <img src="/avatar.jpg" alt="User Avatar" />
+    <h4>John Doe</h4>
+    <p>Software Developer</p>
+  </div>
+  
+  <div slot="footer">
+    <button>Edit Profile</button>
+    <button>View Details</button>
+  </div>
+</Box>
+```
+
+### Rounded Box
+
+```svelte
+<Box title="Rounded Card" round={true}>
+  <p>This box has rounded corners for a softer appearance.</p>
+</Box>
+```
+
+### Styled Sections
+
+```svelte
+<Box 
+  title="Styled Box"
+  style="border: 2px solid #007acc; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
+  header$style="background: #007acc; color: white; padding: 16px;"
+  content$style="padding: 20px; background: #f9f9f9;"
+  footer$style="background: #e9e9e9; padding: 12px; text-align: right;"
+>
+  <p>Content with custom styling for each section.</p>
+  
+  <div slot="footer">
+    <button>Cancel</button>
+    <button>Save</button>
+  </div>
+</Box>
+```
+
+### Dashboard Widget
+
+```svelte
+<Box 
+  title="Sales Overview"
+  round={true}
+  style="margin: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
+>
+  <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
+    <h3>Sales Overview</h3>
+    <select>
+      <option>This Month</option>
+      <option>Last Month</option>
+      <option>This Year</option>
+    </select>
+  </div>
+  
+  <div class="metrics">
+    <div class="metric">
+      <span class="value">$12,345</span>
+      <span class="label">Revenue</span>
+    </div>
+    <div class="metric">
+      <span class="value">89</span>
+      <span class="label">Orders</span>
+    </div>
+  </div>
+  
+  <div slot="footer">
+    <a href="/reports/sales">View Detailed Report →</a>
+  </div>
+</Box>
+```
+
+### Settings Panel
+
+```svelte
+<Box title="Account Settings">
+  <div class="settings-form">
+    <div class="form-group">
+      <label>Email Notifications</label>
+      <input type="checkbox" checked />
+    </div>
+    <div class="form-group">
+      <label>Language</label>
+      <select>
+        <option>English</option>
+        <option>Spanish</option>
+        <option>French</option>
+      </select>
+    </div>
+  </div>
+  
+  <div slot="footer" style="text-align: right; gap: 8px;">
+    <button type="button">Reset</button>
+    <button type="submit">Save Changes</button>
+  </div>
+</Box>
+```
+
+### Article Card
+
+```svelte
+<Box round={true} class="article-card">
+  <div slot="header">
+    <img src="/article-thumb.jpg" alt="Article" class="article-image" />
+    <div class="article-meta">
+      <h3>Understanding Svelte Components</h3>
+      <p class="byline">By Jane Smith • March 15, 2024</p>
+    </div>
+  </div>
+  
+  <p>Learn the fundamentals of building reusable components in Svelte...</p>
+  
+  <div slot="footer" style="display: flex; justify-content: space-between; align-items: center;">
+    <div class="tags">
+      <span class="tag">Svelte</span>
+      <span class="tag">Tutorial</span>
+    </div>
+    <button>Read More</button>
+  </div>
+</Box>
+```
+
+### Content-Only Box
+
+```svelte
+<!-- Box without header or footer, just styled content -->
+<Box 
+  style="border: 1px solid #ddd; border-radius: 8px; padding: 0;"
+  content$style="padding: 24px;"
+>
+  <div class="notification">
+    <i class="icon-info"></i>
+    <p>This is an important notification message.</p>
+  </div>
+</Box>
+```
+
+## Layout Structure
+
+The Box component consists of three main sections:
+
+1. **Header** (optional): Displays title or custom content
+2. **Content** (required): Main content area via default slot
+3. **Footer** (optional): Action buttons or additional information
+
+## Styling
+
+The component uses the following CSS classes:
+
+- `.uniface-box` - Main container
+- `.box-header` - Header section container
+- `.box-content` - Content section container  
+- `.box-footer` - Footer section container
+- `.title` - Title text wrapper
+- `.round` - Applied when round prop is true
+
+### Example CSS
+
+```css
+.uniface-box {
+  border: 1px solid #e0e0e0;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.uniface-box.round {
+  border-radius: 8px;
+}
+
+.box-header {
+  background: #f8f9fa;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 16px;
+}
+
+.box-content {
+  padding: 16px;
+}
+
+.box-footer {
+  background: #f8f9fa;
+  border-top: 1px solid #e0e0e0;
+  padding: 12px 16px;
+}
+
+.title {
+  font-weight: 600;
+  color: #333;
+}
+```
+
+## Common Patterns
+
+### Info Panel
+
+```svelte
+<Box title="System Information" round={true}>
+  <div class="info-grid">
+    <div class="info-item">
+      <strong>Version:</strong> 2.1.0
+    </div>
+    <div class="info-item">
+      <strong>Last Updated:</strong> March 15, 2024
+    </div>
+    <div class="info-item">
+      <strong>Status:</strong> Active
+    </div>
+  </div>
+</Box>
+```
+
+### Action Card
+
+```svelte
+<Box>
+  <div slot="header" style="text-align: center;">
+    <i class="large-icon icon-upload"></i>
+    <h3>Upload Files</h3>
+  </div>
+  
+  <p style="text-align: center; color: #666;">
+    Drag and drop files here or click to browse
+  </p>
+  
+  <div slot="footer" style="text-align: center;">
+    <button>Choose Files</button>
+  </div>
+</Box>
+```
+
+### Stats Widget
+
+```svelte
+<Box title="Website Analytics" round={true}>
+  <div class="stats-grid">
+    <div class="stat">
+      <div class="stat-value">1,234</div>
+      <div class="stat-label">Visitors</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">89%</div>
+      <div class="stat-label">Bounce Rate</div>
+    </div>
+  </div>
+  
+  <div slot="footer">
+    <button>View Full Report</button>
+  </div>
+</Box>
+```
+
+## Responsive Design
+
+For responsive layouts, consider using CSS Grid or Flexbox:
+
+```css
+.box-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+
+@media (max-width: 768px) {
+  .uniface-box {
+    margin: 8px;
+  }
+  
+  .box-header,
+  .box-content,
+  .box-footer {
+    padding: 12px;
+  }
+}
+```
+
+## Accessibility
+
+- Use semantic HTML within slots
+- Ensure proper heading hierarchy in headers
+- Provide adequate color contrast
+- Make interactive elements keyboard accessible
+
+## Best Practices
+
+1. **Consistent Spacing**: Use consistent padding/margins across boxes
+2. **Visual Hierarchy**: Use appropriate typography in headers
+3. **Action Placement**: Place primary actions in the footer
+4. **Content Organization**: Group related content logically
+5. **Responsive Design**: Test on different screen sizes
+6. **Loading States**: Consider showing loading states for dynamic content
+
+## Integration with Other Components
+
+The Box component works well with other components:
+
+```svelte
+<Box title="Form Example">
+  <FormField label="Name">
+    <TextEditor value={name} />
+  </FormField>
+  
+  <FormField label="Options">
+    <OptionsSelect options={choices} bind:value={selected} />
+  </FormField>
+  
+  <div slot="footer">
+    <ActionBar buttons={formActions} />
+  </div>
+</Box>
+```