1import { p as prop, w as writable, x as store_set, e as init, i as if_block, s as slot, b as set_class, a as set_attribute, f as set_style, q as store_get, m as setup_stores, k as each, d as bind_this, u as index, r as rest_props } from './i18n-CGlVUOvE.js'; 2import { M as push, a0 as mutable_source, Z as get, a1 as createEventDispatcher, a8 as onMount, $ as set, aw as setContext, ar as mutate, Y as legacy_pre_effect, y as deep_read_state, _ as legacy_pre_effect_reset, U as event, av as $window, Q as child, S as sibling, T as reset, t as template_effect, w as untrack, a as append, O as pop, I as tick, P as flushSync, N as first_child, a3 as comment, R as from_html, X as set_text, a4 as text, f as from_svg, ad as user_effect } from './index-Bq2njFOY.js'; 3import { G as Gradio } from './utils.svelte-Bi9ASwv9.js'; 4import { T as TABS, a as Tabs } from './Walkthrough.svelte_svelte_type_style_lang-DyYjqewg.js'; 5import './event-modifiers-DanhKw3_.js'; 6 7var root_2 = from_html(`<p class="step-title"><strong> </strong> </p>`); 8var root_5 = from_svg(`<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.5 8.5L11 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>`); 9var root_7 = from_html(`<span> </span>`); 10var root_8 = from_html(`<div></div>`); 11var root_4 = from_html(`<div class="step-item svelte-1xpzbgb"><button role="tab"><span class="step-number svelte-1xpzbgb"><!></span> <!></button></div> <!>`, 1); 12var root_1 = from_html(`<!> <div class="stepper-wrapper svelte-1xpzbgb"><div class="stepper-container svelte-1xpzbgb" role="tablist"></div></div>`, 1); 13var root = from_html(`<div><!> <!></div>`); 14 15function Walkthrough($$anchor, $$props) { 16 push($$props, false); 17 18 const $selected_tab = () => store_get(selected_tab, '$selected_tab', $$stores); 19 const $selected_tab_index = () => store_get(selected_tab_index, '$selected_tab_index', $$stores); 20 const [$$stores, $$cleanup] = setup_stores(); 21 const has_tabs = mutable_source(); 22 const tab_scale = mutable_source(); 23 let visible = prop($$props, 'visible', 12, true); 24 let elem_id = prop($$props, 'elem_id', 12, ""); 25 let elem_classes = prop($$props, 'elem_classes', 28, () => []); 26 let selected = prop($$props, 'selected', 12); 27 let initial_tabs = prop($$props, 'initial_tabs', 12); 28 let tabs = mutable_source([...initial_tabs()]); 29 let stepper_container = mutable_source(); 30 let show_labels_for_all = mutable_source(true); 31 let measurement_container = mutable_source(); 32 let step_buttons = mutable_source([]); 33 let step_labels = mutable_source([]); 34 let label_height = mutable_source(0); 35 let compact = mutable_source(false); 36 let recompute_overflow = true; 37 const selected_tab = writable(selected() || get(tabs)[0]?.id || false); 38 const selected_tab_index = writable(get(tabs).findIndex((t) => t?.id === selected()) || 0); 39 const dispatch = createEventDispatcher(); 40 41 async function check_overflow() { 42 if (!get(stepper_container) || !get(measurement_container) || !recompute_overflow) return; 43 44 recompute_overflow = false; 45 await tick(); 46 47 // First, show all labels to measure
48 set(show_labels_for_all, true); 49 50 await tick(); 51 52 const SEP_WIDTH = 50; 53 const button_width = get(step_buttons)[0].getBoundingClientRect().width * get(step_buttons).length + SEP_WIDTH * (get(step_buttons).length - 1); 54 const containerWidth = get(stepper_container).getBoundingClientRect().width; 55 const does_it_fit = button_width < containerWidth; 56 57 if (!does_it_fit) { 58 set(show_labels_for_all, false); 59 set(compact, true); 60 61 return; 62 } 63 64 let max_height = 0; 65 let is_overlapping = false; 66 let last_right = 0; 67 68 for (const label of get(step_labels)) { 69 const { height, width, left, right } = label.getBoundingClientRect(); 70 71 if (height > max_height) { 72 max_height = height; 73 } 74 75 if (last_right && left - 10 < last_right && !is_overlapping) { 76 is_overlapping = true; 77 } 78 79 last_right = right; 80 } 81 82 set(label_height, max_height); 83 84 if (is_overlapping) { 85 set(show_labels_for_all, false); 86 } 87 } 88 89 let last_width = 0; 90 91 onMount(() => { 92 check_overflow(); 93 94 const observer = new ResizeObserver((entries) => { 95 if (entries[0].contentRect.width === last_width) return; 96 97 last_width = entries[0].contentRect.width; 98 set(compact, false); 99 recompute_overflow = true; 100 check_overflow(); 101 }); 102 103 if (get(stepper_container)) { 104 observer.observe(get(stepper_container)); 105 } 106 107 return () => { 108 observer.disconnect(); 109 }; 110 }); 111 112 setContext(TABS, { 113 register_tab: (tab, order) => { 114 mutate(tabs, get(tabs)[order] = tab); 115 116 if ($selected_tab() === false && tab.visible && tab.interactive) { 117 store_set(selected_tab, tab.id); 118 store_set(selected_tab_index, order); 119 } 120 121 return order; 122 }, 123 124 unregister_tab: (tab, order) => { 125 if ($selected_tab() === tab.id) { 126 store_set(selected_tab, get(tabs)[0]?.id || false); 127 } 128 129 mutate(tabs, get(tabs)[order] = null); 130 }, 131 selected_tab, 132 selected_tab_index 133 }); 134 135 function change_tab(id, index) { 136 const tab_to_activate = get(tabs).find((t) => t?.id === id); 137 138 if (id !== undefined && tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab() !== tab_to_activate.id) { 139 selected(id); 140 store_set(selected_tab, id); 141 store_set(selected_tab_index, get(tabs).findIndex((t) => t?.id === id)); 142 dispatch("change"); 143 } 144 } 145 146 legacy_pre_effect(() => (get(tabs)), () => { 147 set(has_tabs, get(tabs).length > 0); 148 }); 149 150 legacy_pre_effect(() => (get(tabs), deep_read_state(selected())), () => { 151 ( 152 get(tabs), 153 selected() !== null && change_tab(selected(), get(tabs).findIndex((t) => t?.id === selected())) 154 ); 155 }); 156 157 legacy_pre_effect(() => (get(tabs)), () => { 158 (get(tabs), check_overflow()); 159 }); 160 161 legacy_pre_effect(() => ($selected_tab_index()), () => { 162 ($selected_tab_index(), check_overflow()); 163 }); 164 165 legacy_pre_effect(() => (get(tabs), $selected_tab_index()), () => { 166 set(tab_scale, get(tabs)[$selected_tab_index() >= 0 ? $selected_tab_index() : 0]?.scale); 167 }); 168 169 legacy_pre_effect_reset(); 170 171 var $$exports = { 172 get visible() { 173 return visible(); 174 }, 175 176 set visible($$value) { 177 visible($$value); 178 flushSync(); 179 }, 180 181 get elem_id() { 182 return elem_id(); 183 }, 184 185 set elem_id($$value) { 186 elem_id($$value); 187 flushSync(); 188 }, 189 190 get elem_classes() { 191 return elem_classes(); 192 }, 193 194 set elem_classes($$value) { 195 elem_classes($$value); 196 flushSync(); 197 }, 198 199 get selected() { 200 return selected(); 201 }, 202 203 set selected($$value) { 204 selected($$value); 205 flushSync(); 206 }, 207 208 get initial_tabs() { 209 return initial_tabs(); 210 }, 211 212 set initial_tabs($$value) { 213 initial_tabs($$value); 214 flushSync(); 215 } 216 }; 217 218 init(); 219 220 var div = root(); 221 222 event('resize', $window, check_overflow); 223 224 let classes; 225 let styles; 226 var node = child(div); 227 228 { 229 var consequent_5 = ($$anchor) => { 230 var fragment = root_1(); 231 var node_1 = first_child(fragment); 232 233 { 234 var consequent = ($$anchor) => { 235 var p = root_2(); 236 var strong = child(p); 237 var text = child(strong); 238 239 reset(strong); 240 241 var text_1 = sibling(strong); 242 243 reset(p); 244 245 template_effect(() => { 246 set_text(text, `Step ${($selected_tab_index() || 0) + 1}/${(get(tabs), untrack(() => get(tabs).length)) ?? ''}:`); 247 248 set_text(text_1, ` ${( 249 get(tabs), 250 $selected_tab_index(), 251 untrack(() => get(tabs)[$selected_tab_index()]?.label || "Walkthrough") 252 ) ?? ''}`); 253 }); 254 255 append($$anchor, p); 256 }; 257 258 if_block(node_1, ($$render) => { 259 if (get(compact)) $$render(consequent); 260 }); 261 } 262 263 var div_1 = sibling(node_1, 2); 264 let styles_1; 265 var div_2 = child(div_1); 266 267 each(div_2, 5, () => get(tabs), index, ($$anchor, t, i) => { 268 var fragment_1 = comment(); 269 var node_2 = first_child(fragment_1); 270 271 { 272 var consequent_4 = ($$anchor) => { 273 var fragment_2 = root_4(); 274 var div_3 = first_child(fragment_2); 275 var button = child(div_3);
276 let classes_1; 277 var span = child(button); 278 var node_3 = child(span); 279 280 { 281 var consequent_1 = ($$anchor) => { 282 var svg = root_5(); 283 284 append($$anchor, svg); 285 }; 286 287 var alternate = ($$anchor) => { 288 var text_2 = text(); 289 290 text_2.nodeValue = i + 1; 291 append($$anchor, text_2); 292 }; 293 294 if_block(node_3, ($$render) => { 295 if (( 296 get(t), 297 $selected_tab(), 298 untrack(() => get(t).id < $selected_tab()) 299 )) $$render(consequent_1); else $$render(alternate, false); 300 }); 301 } 302 303 reset(span); 304 305 var node_4 = sibling(span, 2); 306 307 { 308 var consequent_2 = ($$anchor) => { 309 var span_1 = root_7(); 310 let classes_2; 311 var text_3 = child(span_1, true); 312 313 reset(span_1); 314 bind_this(span_1, ($$value, i) => mutate(step_labels, get(step_labels)[i] = $$value), (i) => get(step_labels)?.[i], () => [i]); 315 316 template_effect(() => { 317 classes_2 = set_class(span_1, 1, 'step-label svelte-1xpzbgb', null, classes_2, { 318 visible: get(show_labels_for_all) || i === $selected_tab_index() 319 }); 320 321 set_text(text_3, ( 322 get(t), 323 untrack(() => get(t)?.label !== undefined ? get(t)?.label : "Step " + (i + 1)) 324 )); 325 }); 326 327 append($$anchor, span_1); 328 }; 329 330 if_block(node_4, ($$render) => { 331 if (!get(compact)) $$render(consequent_2); 332 }); 333 } 334 335 reset(button); 336 bind_this(button, ($$value, i) => mutate(step_buttons, get(step_buttons)[i] = $$value), (i) => get(step_buttons)?.[i], () => [i]); 337 reset(div_3); 338 339 var node_5 = sibling(div_3, 2); 340 341 { 342 var consequent_3 = ($$anchor) => { 343 var div_4 = root_8(); 344 let classes_3; 345 346 template_effect(() => classes_3 = set_class(div_4, 1, 'step-connector svelte-1xpzbgb', null, classes_3, { completed: i < $selected_tab_index() })); 347 append($$anchor, div_4); 348 }; 349 350 if_block(node_5, ($$render) => { 351 if (( 352 get(tabs), 353 get(compact), 354 untrack(() => i < get(tabs).length - 1 && !get(compact)) 355 )) $$render(consequent_3); 356 }); 357 } 358 359 template_effect(() => { 360 classes_1 = set_class(button, 1, 'step-button svelte-1xpzbgb', null, classes_1, { 361 active: get(t).id === $selected_tab(), 362 completed: get(t).id < $selected_tab(), 363 pending: get(t).id > $selected_tab() 364 }); 365 366 set_attribute(button, 'aria-selected', ( 367 get(t), 368 $selected_tab(), 369 untrack(() => get(t).id === $selected_tab()) 370 )); 371 372 set_attribute(button, 'aria-controls', (get(t), untrack(() => get(t).elem_id))); 373 374 button.disabled = ( 375 get(t), 376 $selected_tab_index(), 377 untrack(() => !get(t).interactive || i > $selected_tab_index()) 378 ); 379 380 set_attribute(button, 'aria-disabled', ( 381 get(t), 382 $selected_tab_index(), 383 untrack(() => !get(t).interactive || i > $selected_tab_index()) 384 )); 385 386 set_attribute(button, 'id', ( 387 get(t), 388 untrack(() => get(t).elem_id ? get(t).elem_id + "-button" : null) 389 )); 390 391 set_attribute(button, 'data-tab-id', (get(t), untrack(() => get(t).id))); 392 }); 393 394 event('click', button, () => { 395 if (i <= $selected_tab_index() && get(t).id !== $selected_tab()) { 396 change_tab(get(t).id); 397 dispatch("select", { value: get(t).label, index: i }); 398 } 399 }); 400 401 append($$anchor, fragment_2); 402 }; 403 404 if_block(node_2, ($$render) => { 405 if ((get(t), untrack(() => get(t)?.visible))) $$render(consequent_4); 406 }); 407 } 408 409 append($$anchor, fragment_1); 410 }); 411 412 reset(div_2); 413 bind_this(div_2, ($$value) => set(measurement_container, $$value), () => get(measurement_container)); 414 reset(div_1); 415 bind_this(div_1, ($$value) => set(stepper_container, $$value), () => get(stepper_container)); 416 template_effect(() => styles_1 = set_style(div_1, '', styles_1, { '--label-height': get(label_height) + "px" })); 417 append($$anchor, fragment); 418 }; 419 420 if_block(node, ($$render) => { 421 if (get(has_tabs)) $$render(consequent_5); 422 }); 423 } 424 425 var node_6 = sibling(node, 2); 426 427 slot(node_6, $$props, 'default', {}, null); 428 reset(div); 429 430 template_effect( 431 ($0) => { 432 classes = set_class(div, 1, `stepper ${$0 ?? ''}`, 'svelte-1xpzbgb', classes, { hide: !visible(), compact: get(compact) }); 433 set_attribute(div, 'id', elem_id()); 434 styles = set_style(div, '', styles, { 'flex-grow': get(tab_scale) }); 435 }, 436 [ 437 () => ( 438 deep_read_state(elem_classes()), 439 untrack(() => elem_classes().join(' ')) 440 ) 441 ] 442 ); 443 444 append($$anchor, div); 445 446 var $$pop = pop($$exports); 447 448 $$cleanup(); 449 450 return $$pop; 451} 452 453function Index($$anchor, $$props) { 454 push($$props, true); 455 456 let props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 457 const gradio = new Gradio(props); 458 459 user_effect(() => { 460 if (gradio.props.selected) { 461 untrack(() => { 462 const i = gradio.props.initial_tabs.findIndex((t) => t.id === gradio.props.selected); 463 464 gradio.dispatch("gradio_tab_select", { 465 value: gradio.props.initial_tabs[i].label, 466 index: i, 467 id: gradio.props.initial_tabs[i].id, 468 component_id: gradio.props.initial_tabs[i].component_id 469 }); 470 }); 471 } 472 }); 473 474 var fragment = comment(); 475 var node = first_child(fragment); 476 477 { 478 var consequent = ($$anchor) => { 479 Walkthrough($$anchor, { 480 get visible() { 481 return gradio.shared.visible; 482 }, 483 484 get elem_id() { 485 return gradio.shared.elem_id; 486 }, 487 488 get elem_classes() { 489 return gradio.shared.elem_classes; 490 }, 491 492 get initial_tabs() { 493 return gradio.props.initial_tabs; 494 }, 495 496 get selected() { 497 return gradio.props.selected; 498 }, 499 500 set selected($$value) { 501 gradio.props.selected = $$value; 502 }, 503 504 $$events: { 505 change: () => gradio.dispatch("change"), 506 select: (e) => { 507 gradio.dispatch("select", e.detail); 508 gradio.dispatch("gradio_tab_select", e.detail); 509 } 510 }, 511 512 children: ($$anchor, $$slotProps) => { 513 var fragment_2 = comment();
514 var node_1 = first_child(fragment_2); 515 516 slot(node_1, $$props, 'default', {}, null); 517 append($$anchor, fragment_2); 518 }, 519 $$slots: { default: true } 520 }); 521 }; 522 523 var alternate = ($$anchor) => { 524 Tabs($$anchor, { 525 get visible() { 526 return gradio.shared.visible; 527 }, 528 529 get elem_id() { 530 return gradio.shared.elem_id; 531 }, 532 533 get elem_classes() { 534 return gradio.shared.elem_classes; 535 }, 536 537 get initial_tabs() { 538 return gradio.props.initial_tabs; 539 }, 540 541 get selected() { 542 return gradio.props.selected; 543 }, 544 545 set selected($$value) { 546 gradio.props.selected = $$value; 547 }, 548 549 $$events: { 550 change: () => gradio.dispatch("change"), 551 select: (e) => { 552 gradio.dispatch("select", e.detail); 553 gradio.dispatch("gradio_tab_select", e.detail); 554 } 555 }, 556 557 children: ($$anchor, $$slotProps) => { 558 var fragment_4 = comment(); 559 var node_2 = first_child(fragment_4); 560 561 slot(node_2, $$props, 'default', {}, null); 562 append($$anchor, fragment_4); 563 }, 564 $$slots: { default: true } 565 }); 566 }; 567 568 if_block(node, ($$render) => { 569 if (gradio.props.name === "walkthrough") $$render(consequent); else $$render(alternate, false); 570 }); 571 } 572 573 append($$anchor, fragment); 574 pop(); 575} 576 577export { Tabs as BaseTabs, TABS, Index as default }; 578//# sourceMappingURL=Index-BPZgH1F4.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.