Refresh UI components and showcase; release updated framework packages

2026-09-20 18:13:24 +05:30
1 parent d800228585
commit c77f5e1cec
@@ -17,96 +17,32 @@ component DragAndDrop {
    variant: string = "default"
    class: string = ""
  }
+  state orderedItems = items
+  state draggedIndex: number = -1
+  functions {
+    client function startDrag(index, sourceEvent) { draggedIndex = index; sourceEvent.dataTransfer.setData("text/plain", String(index)); output.dragStart({ index: index }) }
+    client function enter(sourceEvent) { sourceEvent.preventDefault(); output.dragEnter({ sourceEvent: sourceEvent }) }
+    client function leave(sourceEvent) { output.dragLeave({ sourceEvent: sourceEvent }) }
+    client function finish(sourceEvent) { draggedIndex = -1; output.dragEnd({ sourceEvent: sourceEvent }) }
+    client function move(from, to, sourceEvent, next, moved) {
+      if (from < 0 || to < 0 || to >= orderedItems.length || from === to) { return }
+      next = orderedItems.slice(); moved = next.splice(from, 1)[0]; next.splice(to, 0, moved); orderedItems = next
+      output.change({ value: orderedItems, sourceEvent: sourceEvent })
+    }
+    client function dropAt(index, sourceEvent) { sourceEvent.preventDefault(); move(draggedIndex, index, sourceEvent); draggedIndex = -1; output.drop({ index: index, items: orderedItems }) }
+  }
  view {
-    <section class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--drag-and-drop wrn-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wrn-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
-    </section>
+    <section {...attrs} class="wrn-sortable {class}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<ol>{#each orderedItems as item, index}<li draggable="true" @dragstart="startDrag(index, event)" @dragover="enter(event)" @dragleave="leave(event)" @dragend="finish(event)" @drop="dropAt(index, event)"><span class="icon-[lucide--grip-vertical]" aria-hidden="true"></span><span>{item.label}</span><button type="button" aria-label="Move {item.label} up" disabled="{index === 0}" @click="move(index, index - 1, event)">↑</button><button type="button" aria-label="Move {item.label} down" disabled="{index === orderedItems.length - 1}" @click="move(index, index + 1, event)">↓</button></li>{/each}</ol><slot /></section>
  }

  style {
-    .wrn-next--drag-and-drop {
-      display: grid;
-      gap: 0.75rem;
-      padding: 1rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius);
-      color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
-    }
-    .wrn-next--drag-and-drop > p { margin: 0; color: var(--wrn-color-muted); }
-    .wrn-next--drag-and-drop > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-    .wrn-next--drag-and-drop > .wrn-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-2); }
-
-    /* Shared component foundation. */
-
-        .wrn-component {
-          --wrn-component-color: var(--wrn-color-primary);
-          --wrn-component-scale: 1;
-          margin: 0;
-          color: var(--wrn-color-text);
-          font-family: var(--wrn-font-sans, inherit);
-        }
-
-        .wrn-component--color-primary {
-          --wrn-component-color: var(--wrn-color-primary);
-        }
-
-        .wrn-component--color-secondary {
-          --wrn-component-color: var(--wrn-color-secondary);
-        }
-
-        .wrn-component--color-success {
-          --wrn-component-color: var(--wrn-color-success);
-        }
-
-        .wrn-component--color-warning {
-          --wrn-component-color: var(--wrn-color-warning);
-        }
-
-        .wrn-component--color-danger {
-          --wrn-component-color: var(--wrn-color-danger);
-        }
-
-        .wrn-component--color-info {
-          --wrn-component-color: var(--wrn-color-info);
-        }
-
-        .wrn-component--size-xs {
-          --wrn-component-scale: 0.78;
-        }
-
-        .wrn-component--size-sm {
-          --wrn-component-scale: 0.88;
-        }
-
-        .wrn-component--size-default,
-        .wrn-component--size-md {
-          --wrn-component-scale: 1;
-        }
-
-        .wrn-component--size-lg {
-          --wrn-component-scale: 1.14;
-        }
-
-        .wrn-component--size-xl {
-          --wrn-component-scale: 1.28;
-        }
-
-        .wrn-component:not(.wrn-btn) {
-          font-size: calc(1em * var(--wrn-component-scale));
-        }
-
-        .wrn-component :is(a, button, input, select, textarea):focus-visible {
-          outline-color: var(--wrn-component-color);
-        }
-
-        .wrn-component p {
-          margin: 0;
-          color: var(--wrn-color-muted);
-          line-height: 1.6;
-        }
+    .wrn-sortable { display:grid; gap:.75rem; color:var(--wrn-color-text); }
+    .wrn-sortable p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
+    .wrn-sortable ol { display:grid; gap:.5rem; list-style:none; margin:0; padding:0; }
+    .wrn-sortable li { display:flex; align-items:center; gap:.6rem; padding:.65rem; background:var(--wrn-color-surface); border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-sm); font-size:.875rem; cursor:grab; }
+    .wrn-sortable li > span:nth-child(2) { flex:1; }
+    .wrn-sortable li > span:first-child { width:1rem; height:1rem; color:var(--wrn-color-muted); }
+    .wrn-sortable button { border:1px solid var(--wrn-color-border); background:transparent; color:inherit; border-radius:4px; width:1.75rem; height:1.75rem; cursor:pointer; }
+    .wrn-sortable button:disabled { opacity:.3; }
  }
 }