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