diff --git a/.gitignore b/.gitignore index 4d0258a..ae239dd 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,5 @@ node_modules/ dist/yarn-error.log .task/ .histoire/dist +dist +src/lib/components/__image_snapshots__/__diff_output__/ diff --git a/.histoire/dist/__sandbox.html b/.histoire/dist/__sandbox.html index 4c46836..d0b0be4 100644 --- a/.histoire/dist/__sandbox.html +++ b/.histoire/dist/__sandbox.html @@ -5,12 +5,12 @@ - +
- + \ No newline at end of file diff --git a/.histoire/dist/assets/BaseEmpty.vue-045cbb89.js b/.histoire/dist/assets/BaseEmpty.vue-045cbb89.js deleted file mode 100644 index 8334be9..0000000 --- a/.histoire/dist/assets/BaseEmpty.vue-045cbb89.js +++ /dev/null @@ -1,13 +0,0 @@ -import { _ as _export_sfc } from "./MobileOverlay.vue2-a3503848.js"; -import { o as openBlock, e as createElementBlock, aY as renderSlot } from "./vendor-3ab3e533.js"; -const _sfc_main = {}; -const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" }; -function _sfc_render(_ctx, _cache) { - return openBlock(), createElementBlock("div", _hoisted_1, [ - renderSlot(_ctx.$slots, "default", {}, void 0, true) - ]); -} -const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]); -export { - BaseEmpty as B -}; diff --git a/.histoire/dist/assets/GenericMountStory.vue2-2bb5633d.js b/.histoire/dist/assets/GenericMountStory.vue2-2bb5633d.js deleted file mode 100644 index 4f1e353..0000000 --- a/.histoire/dist/assets/GenericMountStory.vue2-2bb5633d.js +++ /dev/null @@ -1,2893 +0,0 @@ -import { Y as SvelteComponentDev, Z as init, $ as safe_not_equal, a0 as dispatch_dev, a1 as create_slot, a2 as validate_slots, a3 as base$1, a4 as tick, a5 as element, a6 as space, a7 as text, a8 as claim_element, a9 as children, aa as detach_dev, ab as claim_space, ac as claim_text, ad as attr_dev, ae as add_location, af as src_url_equal, ag as insert_hydration_dev, ah as append_hydration_dev, ai as update_slot_base, aj as get_all_dirty_from_scope, ak as get_slot_changes, al as set_data_dev, am as transition_in, an as transition_out, ao as binding_callbacks, ap as bind, aq as create_component, ar as claim_component, as as mount_component, at as destroy_component, au as add_flush_callback, av as noop, aw as bubble, ax as set_input_value, ay as listen_dev, az as run_all, aA as assign, aB as getContext, aC as get_spread_update, aD as get_spread_object, aE as to_number, aF as validate_each_argument, aG as validate_each_keys, aH as empty, aI as update_keyed_each, aJ as destroy_block, aK as logEvent, _ as __vitePreload, aL as createRouter, v as histoireConfig, aM as createWebHistory, aN as createWebHashHistory, aO as markRaw, K as reactive, d as defineComponent, r as ref, aP as watchEffect, o as openBlock, q as createBlock, aQ as mergeProps, aR as resolveDynamicComponent, h as createCommentVNode } from "./vendor-3ab3e533.js"; -const ShipItem_svelte_svelte_type_style_lang = ""; -const file$5 = "src/lib/components/ShipItem.svelte"; -function create_fragment$b(ctx) { - let div4; - let div0; - let t0; - let div3; - let div1; - let t1; - let t2; - let img; - let img_src_value; - let t3; - let div2; - let t4; - let current; - const default_slot_template = ( - /*#slots*/ - ctx[5].default - ); - const default_slot = create_slot( - default_slot_template, - ctx, - /*$$scope*/ - ctx[4], - null - ); - const block = { - c: function create() { - div4 = element("div"); - div0 = element("div"); - if (default_slot) - default_slot.c(); - t0 = space(); - div3 = element("div"); - div1 = element("div"); - t1 = text( - /*mass*/ - ctx[0] - ); - t2 = space(); - img = element("img"); - t3 = space(); - div2 = element("div"); - t4 = text( - /*cost*/ - ctx[1] - ); - this.h(); - }, - l: function claim(nodes) { - div4 = claim_element(nodes, "DIV", { class: true }); - var div4_nodes = children(div4); - div0 = claim_element(div4_nodes, "DIV", { class: true }); - var div0_nodes = children(div0); - if (default_slot) - default_slot.l(div0_nodes); - div0_nodes.forEach(detach_dev); - t0 = claim_space(div4_nodes); - div3 = claim_element(div4_nodes, "DIV", { class: true }); - var div3_nodes = children(div3); - div1 = claim_element(div3_nodes, "DIV", { class: true }); - var div1_nodes = children(div1); - t1 = claim_text( - div1_nodes, - /*mass*/ - ctx[0] - ); - t2 = claim_space(div1_nodes); - img = claim_element(div1_nodes, "IMG", { src: true, alt: true, class: true }); - div1_nodes.forEach(detach_dev); - t3 = claim_space(div3_nodes); - div2 = claim_element(div3_nodes, "DIV", { class: true }); - var div2_nodes = children(div2); - t4 = claim_text( - div2_nodes, - /*cost*/ - ctx[1] - ); - div2_nodes.forEach(detach_dev); - div3_nodes.forEach(detach_dev); - div4_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - attr_dev(div0, "class", "s-Z06Qyz0SWBsp"); - add_location(div0, file$5, 1, 2, 26); - if (!src_url_equal(img.src, img_src_value = base$1 + "/mass.svg")) - attr_dev(img, "src", img_src_value); - attr_dev(img, "alt", "mass"); - attr_dev(img, "class", "s-Z06Qyz0SWBsp"); - add_location(img, file$5, 5, 13, 124); - attr_dev(div1, "class", "mass s-Z06Qyz0SWBsp"); - add_location(div1, file$5, 4, 4, 72); - attr_dev(div2, "class", "cost s-Z06Qyz0SWBsp"); - add_location(div2, file$5, 7, 4, 180); - attr_dev(div3, "class", "reqs s-Z06Qyz0SWBsp"); - add_location(div3, file$5, 3, 2, 49); - attr_dev(div4, "class", "ship-item s-Z06Qyz0SWBsp"); - add_location(div4, file$5, 0, 0, 0); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, div4, anchor); - append_hydration_dev(div4, div0); - if (default_slot) { - default_slot.m(div0, null); - } - append_hydration_dev(div4, t0); - append_hydration_dev(div4, div3); - append_hydration_dev(div3, div1); - append_hydration_dev(div1, t1); - append_hydration_dev(div1, t2); - append_hydration_dev(div1, img); - ctx[6](div1); - append_hydration_dev(div3, t3); - append_hydration_dev(div3, div2); - append_hydration_dev(div2, t4); - ctx[7](div2); - current = true; - }, - p: function update(ctx2, [dirty]) { - if (default_slot) { - if (default_slot.p && (!current || dirty & /*$$scope*/ - 16)) { - update_slot_base( - default_slot, - default_slot_template, - ctx2, - /*$$scope*/ - ctx2[4], - !current ? get_all_dirty_from_scope( - /*$$scope*/ - ctx2[4] - ) : get_slot_changes( - default_slot_template, - /*$$scope*/ - ctx2[4], - dirty, - null - ), - null - ); - } - } - if (!current || dirty & /*mass*/ - 1) - set_data_dev( - t1, - /*mass*/ - ctx2[0] - ); - if (!current || dirty & /*cost*/ - 2) - set_data_dev( - t4, - /*cost*/ - ctx2[1] - ); - }, - i: function intro(local) { - if (current) - return; - transition_in(default_slot, local); - current = true; - }, - o: function outro(local) { - transition_out(default_slot, local); - current = false; - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(div4); - if (default_slot) - default_slot.d(detaching); - ctx[6](null); - ctx[7](null); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$b.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$b($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("ShipItem", slots, ["default"]); - let { mass } = $$props; - let { cost } = $$props; - let mass_el; - let cost_el; - const update_el = async (el) => { - if (!el) - return; - el.classList.remove("updated"); - void el.offsetWidth; - el.classList.add("updated"); - }; - $$self.$$.on_mount.push(function() { - if (mass === void 0 && !("mass" in $$props || $$self.$$.bound[$$self.$$.props["mass"]])) { - console.warn(" was created without expected prop 'mass'"); - } - if (cost === void 0 && !("cost" in $$props || $$self.$$.bound[$$self.$$.props["cost"]])) { - console.warn(" was created without expected prop 'cost'"); - } - }); - const writable_props = ["mass", "cost"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - function div1_binding($$value) { - binding_callbacks[$$value ? "unshift" : "push"](() => { - mass_el = $$value; - $$invalidate(2, mass_el); - }); - } - function div2_binding($$value) { - binding_callbacks[$$value ? "unshift" : "push"](() => { - cost_el = $$value; - $$invalidate(3, cost_el); - }); - } - $$self.$$set = ($$props2) => { - if ("mass" in $$props2) - $$invalidate(0, mass = $$props2.mass); - if ("cost" in $$props2) - $$invalidate(1, cost = $$props2.cost); - if ("$$scope" in $$props2) - $$invalidate(4, $$scope = $$props2.$$scope); - }; - $$self.$capture_state = () => ({ - base: base$1, - tick, - mass, - cost, - mass_el, - cost_el, - update_el - }); - $$self.$inject_state = ($$props2) => { - if ("mass" in $$props2) - $$invalidate(0, mass = $$props2.mass); - if ("cost" in $$props2) - $$invalidate(1, cost = $$props2.cost); - if ("mass_el" in $$props2) - $$invalidate(2, mass_el = $$props2.mass_el); - if ("cost_el" in $$props2) - $$invalidate(3, cost_el = $$props2.cost_el); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - $$self.$$.update = () => { - if ($$self.$$.dirty & /*mass_el, mass*/ - 5) { - update_el(mass_el); - } - if ($$self.$$.dirty & /*cost_el, cost*/ - 10) { - update_el(cost_el); - } - }; - return [mass, cost, mass_el, cost_el, $$scope, slots, div1_binding, div2_binding]; -} -class ShipItem extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$b, create_fragment$b, safe_not_equal, { mass: 0, cost: 1 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "ShipItem", - options, - id: create_fragment$b.name - }); - } - get mass() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set mass(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get cost() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set cost(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -function create_default_slot_1$2(ctx) { - let t; - const block = { - c: function create() { - t = text("Thingy"); - }, - l: function claim(nodes) { - t = claim_text(nodes, "Thingy"); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, t, anchor); - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(t); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot_1$2.name, - type: "slot", - source: "(2:2) ", - ctx - }); - return block; -} -function create_default_slot$7(ctx) { - let shipitem; - let current; - shipitem = new ShipItem({ - props: { - mass: ( - /*mass*/ - ctx[1] - ), - cost: ( - /*cost*/ - ctx[2] - ), - $$slots: { default: [create_default_slot_1$2] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(shipitem.$$.fragment); - }, - l: function claim(nodes) { - claim_component(shipitem.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(shipitem, target, anchor); - current = true; - }, - p: function update(ctx2, dirty) { - const shipitem_changes = {}; - if (dirty & /*mass*/ - 2) - shipitem_changes.mass = /*mass*/ - ctx2[1]; - if (dirty & /*cost*/ - 4) - shipitem_changes.cost = /*cost*/ - ctx2[2]; - if (dirty & /*$$scope*/ - 32) { - shipitem_changes.$$scope = { dirty, ctx: ctx2 }; - } - shipitem.$set(shipitem_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(shipitem.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(shipitem.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(shipitem, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$7.name, - type: "slot", - source: "(1:0) ", - ctx - }); - return block; -} -function create_controls_slot(ctx) { - let hst_number0; - let updating_value; - let t; - let hst_number1; - let updating_value_1; - let current; - function hst_number0_value_binding(value) { - ctx[3](value); - } - let hst_number0_props = { title: "Mass" }; - if ( - /*mass*/ - ctx[1] !== void 0 - ) { - hst_number0_props.value = /*mass*/ - ctx[1]; - } - hst_number0 = new /*Hst*/ - ctx[0].Number({ props: hst_number0_props, $$inline: true }); - binding_callbacks.push(() => bind(hst_number0, "value", hst_number0_value_binding)); - function hst_number1_value_binding(value) { - ctx[4](value); - } - let hst_number1_props = { title: "Cost" }; - if ( - /*cost*/ - ctx[2] !== void 0 - ) { - hst_number1_props.value = /*cost*/ - ctx[2]; - } - hst_number1 = new /*Hst*/ - ctx[0].Number({ props: hst_number1_props, $$inline: true }); - binding_callbacks.push(() => bind(hst_number1, "value", hst_number1_value_binding)); - const block = { - c: function create() { - create_component(hst_number0.$$.fragment); - t = space(); - create_component(hst_number1.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_number0.$$.fragment, nodes); - t = claim_space(nodes); - claim_component(hst_number1.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_number0, target, anchor); - insert_hydration_dev(target, t, anchor); - mount_component(hst_number1, target, anchor); - current = true; - }, - p: function update(ctx2, dirty) { - const hst_number0_changes = {}; - if (!updating_value && dirty & /*mass*/ - 2) { - updating_value = true; - hst_number0_changes.value = /*mass*/ - ctx2[1]; - add_flush_callback(() => updating_value = false); - } - hst_number0.$set(hst_number0_changes); - const hst_number1_changes = {}; - if (!updating_value_1 && dirty & /*cost*/ - 4) { - updating_value_1 = true; - hst_number1_changes.value = /*cost*/ - ctx2[2]; - add_flush_callback(() => updating_value_1 = false); - } - hst_number1.$set(hst_number1_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_number0.$$.fragment, local); - transition_in(hst_number1.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_number0.$$.fragment, local); - transition_out(hst_number1.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_number0, detaching); - if (detaching) - detach_dev(t); - destroy_component(hst_number1, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_controls_slot.name, - type: "slot", - source: '(3:2) ', - ctx - }); - return block; -} -function create_fragment$a(ctx) { - let hst_story; - let current; - hst_story = new /*Hst*/ - ctx[0].Story({ - props: { - $$slots: { - controls: [create_controls_slot], - default: [create_default_slot$7] - }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(hst_story.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_story.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_story, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const hst_story_changes = {}; - if (dirty & /*$$scope, cost, mass*/ - 38) { - hst_story_changes.$$scope = { dirty, ctx: ctx2 }; - } - hst_story.$set(hst_story_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_story.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_story.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_story, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$a.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$a($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("ShipItem_story", slots, []); - let { Hst } = $$props; - let mass = 1; - let cost = 3; - $$self.$$.on_mount.push(function() { - if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) { - console.warn(" was created without expected prop 'Hst'"); - } - }); - const writable_props = ["Hst"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - function hst_number0_value_binding(value) { - mass = value; - $$invalidate(1, mass); - } - function hst_number1_value_binding(value) { - cost = value; - $$invalidate(2, cost); - } - $$self.$$set = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - $$self.$capture_state = () => ({ Hst, ShipItem, mass, cost }); - $$self.$inject_state = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - if ("mass" in $$props2) - $$invalidate(1, mass = $$props2.mass); - if ("cost" in $$props2) - $$invalidate(2, cost = $$props2.cost); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [Hst, mass, cost, hst_number0_value_binding, hst_number1_value_binding]; -} -class ShipItem_story extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$a, create_fragment$a, safe_not_equal, { Hst: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "ShipItem_story", - options, - id: create_fragment$a.name - }); - } - get Hst() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set Hst(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const index_svelte_svelte_type_style_lang = ""; -const file$4 = "src/lib/components/CostMass/index.svelte"; -function create_fragment$9(ctx) { - let div0; - let t0; - let img; - let img_src_value; - let t1; - let div1; - let t2; - const block = { - c: function create() { - div0 = element("div"); - t0 = text( - /*mass*/ - ctx[0] - ); - img = element("img"); - t1 = space(); - div1 = element("div"); - t2 = text( - /*cost*/ - ctx[1] - ); - this.h(); - }, - l: function claim(nodes) { - div0 = claim_element(nodes, "DIV", { class: true }); - var div0_nodes = children(div0); - t0 = claim_text( - div0_nodes, - /*mass*/ - ctx[0] - ); - img = claim_element(div0_nodes, "IMG", { src: true, alt: true, class: true }); - div0_nodes.forEach(detach_dev); - t1 = claim_space(nodes); - div1 = claim_element(nodes, "DIV", { class: true }); - var div1_nodes = children(div1); - t2 = claim_text( - div1_nodes, - /*cost*/ - ctx[1] - ); - div1_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - if (!src_url_equal(img.src, img_src_value = base$1 + "/mass.svg")) - attr_dev(img, "src", img_src_value); - attr_dev(img, "alt", "mass"); - attr_dev(img, "class", "s-oaXyF42PwCjx"); - add_location(img, file$4, 0, 24, 24); - attr_dev(div0, "class", "mass s-oaXyF42PwCjx"); - add_location(div0, file$4, 0, 0, 0); - attr_dev(div1, "class", "cost s-oaXyF42PwCjx"); - add_location(div1, file$4, 1, 0, 71); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, div0, anchor); - append_hydration_dev(div0, t0); - append_hydration_dev(div0, img); - insert_hydration_dev(target, t1, anchor); - insert_hydration_dev(target, div1, anchor); - append_hydration_dev(div1, t2); - }, - p: function update(ctx2, [dirty]) { - if (dirty & /*mass*/ - 1) - set_data_dev( - t0, - /*mass*/ - ctx2[0] - ); - if (dirty & /*cost*/ - 2) - set_data_dev( - t2, - /*cost*/ - ctx2[1] - ); - }, - i: noop, - o: noop, - d: function destroy(detaching) { - if (detaching) - detach_dev(div0); - if (detaching) - detach_dev(t1); - if (detaching) - detach_dev(div1); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$9.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$9($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("CostMass", slots, []); - let { mass } = $$props; - let { cost } = $$props; - $$self.$$.on_mount.push(function() { - if (mass === void 0 && !("mass" in $$props || $$self.$$.bound[$$self.$$.props["mass"]])) { - console.warn(" was created without expected prop 'mass'"); - } - if (cost === void 0 && !("cost" in $$props || $$self.$$.bound[$$self.$$.props["cost"]])) { - console.warn(" was created without expected prop 'cost'"); - } - }); - const writable_props = ["mass", "cost"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("mass" in $$props2) - $$invalidate(0, mass = $$props2.mass); - if ("cost" in $$props2) - $$invalidate(1, cost = $$props2.cost); - }; - $$self.$capture_state = () => ({ base: base$1, mass, cost }); - $$self.$inject_state = ($$props2) => { - if ("mass" in $$props2) - $$invalidate(0, mass = $$props2.mass); - if ("cost" in $$props2) - $$invalidate(1, cost = $$props2.cost); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [mass, cost]; -} -class CostMass extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$9, create_fragment$9, safe_not_equal, { mass: 0, cost: 1 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "CostMass", - options, - id: create_fragment$9.name - }); - } - get mass() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set mass(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get cost() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set cost(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -function create_default_slot$6(ctx) { - let costmass; - let current; - costmass = new CostMass({ - props: { mass: 12, cost: 21 }, - $$inline: true - }); - const block = { - c: function create() { - create_component(costmass.$$.fragment); - }, - l: function claim(nodes) { - claim_component(costmass.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(costmass, target, anchor); - current = true; - }, - p: noop, - i: function intro(local) { - if (current) - return; - transition_in(costmass.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(costmass.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(costmass, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$6.name, - type: "slot", - source: '(1:0) ', - ctx - }); - return block; -} -function create_fragment$8(ctx) { - let hst_story; - let current; - hst_story = new /*Hst*/ - ctx[0].Story({ - props: { - title: "CostMass", - $$slots: { default: [create_default_slot$6] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(hst_story.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_story.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_story, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const hst_story_changes = {}; - if (dirty & /*$$scope*/ - 2) { - hst_story_changes.$$scope = { dirty, ctx: ctx2 }; - } - hst_story.$set(hst_story_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_story.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_story.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_story, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$8.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$8($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("CostMass", slots, []); - let { Hst } = $$props; - $$self.$$.on_mount.push(function() { - if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) { - console.warn(" was created without expected prop 'Hst'"); - } - }); - const writable_props = ["Hst"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - $$self.$capture_state = () => ({ Hst, CostMass }); - $$self.$inject_state = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [Hst]; -} -class CostMass_1 extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$8, create_fragment$8, safe_not_equal, { Hst: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "CostMass_1", - options, - id: create_fragment$8.name - }); - } - get Hst() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set Hst(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const Section_svelte_svelte_type_style_lang = ""; -const file$3 = "src/lib/components/Section.svelte"; -function create_fragment$7(ctx) { - let div; - let h2; - let t0; - let t1; - let hr; - let t2; - let current; - const default_slot_template = ( - /*#slots*/ - ctx[2].default - ); - const default_slot = create_slot( - default_slot_template, - ctx, - /*$$scope*/ - ctx[1], - null - ); - const block = { - c: function create() { - div = element("div"); - h2 = element("h2"); - t0 = text( - /*label*/ - ctx[0] - ); - t1 = space(); - hr = element("hr"); - t2 = space(); - if (default_slot) - default_slot.c(); - this.h(); - }, - l: function claim(nodes) { - div = claim_element(nodes, "DIV", { class: true }); - var div_nodes = children(div); - h2 = claim_element(div_nodes, "H2", { class: true }); - var h2_nodes = children(h2); - t0 = claim_text( - h2_nodes, - /*label*/ - ctx[0] - ); - h2_nodes.forEach(detach_dev); - t1 = claim_space(div_nodes); - hr = claim_element(div_nodes, "HR", { class: true }); - div_nodes.forEach(detach_dev); - t2 = claim_space(nodes); - if (default_slot) - default_slot.l(nodes); - this.h(); - }, - h: function hydrate() { - attr_dev(h2, "class", "s-8Wn_PeFn3mR4"); - add_location(h2, file$3, 1, 2, 8); - attr_dev(hr, "class", "s-8Wn_PeFn3mR4"); - add_location(hr, file$3, 2, 2, 27); - attr_dev(div, "class", "s-8Wn_PeFn3mR4"); - add_location(div, file$3, 0, 0, 0); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, div, anchor); - append_hydration_dev(div, h2); - append_hydration_dev(h2, t0); - append_hydration_dev(div, t1); - append_hydration_dev(div, hr); - insert_hydration_dev(target, t2, anchor); - if (default_slot) { - default_slot.m(target, anchor); - } - current = true; - }, - p: function update(ctx2, [dirty]) { - if (!current || dirty & /*label*/ - 1) - set_data_dev( - t0, - /*label*/ - ctx2[0] - ); - if (default_slot) { - if (default_slot.p && (!current || dirty & /*$$scope*/ - 2)) { - update_slot_base( - default_slot, - default_slot_template, - ctx2, - /*$$scope*/ - ctx2[1], - !current ? get_all_dirty_from_scope( - /*$$scope*/ - ctx2[1] - ) : get_slot_changes( - default_slot_template, - /*$$scope*/ - ctx2[1], - dirty, - null - ), - null - ); - } - } - }, - i: function intro(local) { - if (current) - return; - transition_in(default_slot, local); - current = true; - }, - o: function outro(local) { - transition_out(default_slot, local); - current = false; - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(div); - if (detaching) - detach_dev(t2); - if (default_slot) - default_slot.d(detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$7.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$7($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Section", slots, ["default"]); - let { label } = $$props; - $$self.$$.on_mount.push(function() { - if (label === void 0 && !("label" in $$props || $$self.$$.bound[$$self.$$.props["label"]])) { - console.warn("
was created without expected prop 'label'"); - } - }); - const writable_props = ["label"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(`
was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("label" in $$props2) - $$invalidate(0, label = $$props2.label); - if ("$$scope" in $$props2) - $$invalidate(1, $$scope = $$props2.$$scope); - }; - $$self.$capture_state = () => ({ label }); - $$self.$inject_state = ($$props2) => { - if ("label" in $$props2) - $$invalidate(0, label = $$props2.label); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [label, $$scope, slots]; -} -class Section extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$7, create_fragment$7, safe_not_equal, { label: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Section", - options, - id: create_fragment$7.name - }); - } - get label() { - throw new Error("
: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set label(value) { - throw new Error("
: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const Field_svelte_svelte_type_style_lang = ""; -const file$2 = "src/lib/components/Field.svelte"; -function create_if_block(ctx) { - let label_1; - let t; - const block = { - c: function create() { - label_1 = element("label"); - t = text( - /*label*/ - ctx[1] - ); - this.h(); - }, - l: function claim(nodes) { - label_1 = claim_element(nodes, "LABEL", { class: true }); - var label_1_nodes = children(label_1); - t = claim_text( - label_1_nodes, - /*label*/ - ctx[1] - ); - label_1_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - attr_dev(label_1, "class", "s-Q6iX6IPZr4w0"); - add_location(label_1, file$2, 2, 4, 24); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, label_1, anchor); - append_hydration_dev(label_1, t); - }, - p: function update(ctx2, dirty) { - if (dirty & /*label*/ - 2) - set_data_dev( - t, - /*label*/ - ctx2[1] - ); - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(label_1); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_if_block.name, - type: "if", - source: "(2:2) {#if label}", - ctx - }); - return block; -} -function fallback_block(ctx) { - let input; - let mounted; - let dispose; - const block = { - c: function create() { - input = element("input"); - this.h(); - }, - l: function claim(nodes) { - input = claim_element(nodes, "INPUT", { type: true, placeholder: true }); - this.h(); - }, - h: function hydrate() { - attr_dev(input, "type", "text"); - attr_dev( - input, - "placeholder", - /*placeholder*/ - ctx[2] - ); - add_location(input, file$2, 5, 4, 68); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, input, anchor); - set_input_value( - input, - /*value*/ - ctx[0] - ); - if (!mounted) { - dispose = [ - listen_dev( - input, - "input", - /*input_input_handler*/ - ctx[6] - ), - listen_dev( - input, - "change", - /*change_handler*/ - ctx[5], - false, - false, - false - ) - ]; - mounted = true; - } - }, - p: function update(ctx2, dirty) { - if (dirty & /*placeholder*/ - 4) { - attr_dev( - input, - "placeholder", - /*placeholder*/ - ctx2[2] - ); - } - if (dirty & /*value*/ - 1 && input.value !== /*value*/ - ctx2[0]) { - set_input_value( - input, - /*value*/ - ctx2[0] - ); - } - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(input); - mounted = false; - run_all(dispose); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: fallback_block.name, - type: "fallback", - source: "(5:8) ", - ctx - }); - return block; -} -function create_fragment$6(ctx) { - let div; - let t; - let current; - let if_block = ( - /*label*/ - ctx[1] && create_if_block(ctx) - ); - const default_slot_template = ( - /*#slots*/ - ctx[4].default - ); - const default_slot = create_slot( - default_slot_template, - ctx, - /*$$scope*/ - ctx[3], - null - ); - const default_slot_or_fallback = default_slot || fallback_block(ctx); - const block = { - c: function create() { - div = element("div"); - if (if_block) - if_block.c(); - t = space(); - if (default_slot_or_fallback) - default_slot_or_fallback.c(); - this.h(); - }, - l: function claim(nodes) { - div = claim_element(nodes, "DIV", { class: true }); - var div_nodes = children(div); - if (if_block) - if_block.l(div_nodes); - t = claim_space(div_nodes); - if (default_slot_or_fallback) - default_slot_or_fallback.l(div_nodes); - div_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - attr_dev(div, "class", "s-Q6iX6IPZr4w0"); - add_location(div, file$2, 0, 0, 0); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, div, anchor); - if (if_block) - if_block.m(div, null); - append_hydration_dev(div, t); - if (default_slot_or_fallback) { - default_slot_or_fallback.m(div, null); - } - current = true; - }, - p: function update(ctx2, [dirty]) { - if ( - /*label*/ - ctx2[1] - ) { - if (if_block) { - if_block.p(ctx2, dirty); - } else { - if_block = create_if_block(ctx2); - if_block.c(); - if_block.m(div, t); - } - } else if (if_block) { - if_block.d(1); - if_block = null; - } - if (default_slot) { - if (default_slot.p && (!current || dirty & /*$$scope*/ - 8)) { - update_slot_base( - default_slot, - default_slot_template, - ctx2, - /*$$scope*/ - ctx2[3], - !current ? get_all_dirty_from_scope( - /*$$scope*/ - ctx2[3] - ) : get_slot_changes( - default_slot_template, - /*$$scope*/ - ctx2[3], - dirty, - null - ), - null - ); - } - } else { - if (default_slot_or_fallback && default_slot_or_fallback.p && (!current || dirty & /*placeholder, value*/ - 5)) { - default_slot_or_fallback.p(ctx2, !current ? -1 : dirty); - } - } - }, - i: function intro(local) { - if (current) - return; - transition_in(default_slot_or_fallback, local); - current = true; - }, - o: function outro(local) { - transition_out(default_slot_or_fallback, local); - current = false; - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(div); - if (if_block) - if_block.d(); - if (default_slot_or_fallback) - default_slot_or_fallback.d(detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$6.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$6($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Field", slots, ["default"]); - let { label = "" } = $$props; - let { value = "" } = $$props; - let { placeholder = label } = $$props; - const writable_props = ["label", "value", "placeholder"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - function change_handler(event) { - bubble.call(this, $$self, event); - } - function input_input_handler() { - value = this.value; - $$invalidate(0, value); - } - $$self.$$set = ($$props2) => { - if ("label" in $$props2) - $$invalidate(1, label = $$props2.label); - if ("value" in $$props2) - $$invalidate(0, value = $$props2.value); - if ("placeholder" in $$props2) - $$invalidate(2, placeholder = $$props2.placeholder); - if ("$$scope" in $$props2) - $$invalidate(3, $$scope = $$props2.$$scope); - }; - $$self.$capture_state = () => ({ label, value, placeholder }); - $$self.$inject_state = ($$props2) => { - if ("label" in $$props2) - $$invalidate(1, label = $$props2.label); - if ("value" in $$props2) - $$invalidate(0, value = $$props2.value); - if ("placeholder" in $$props2) - $$invalidate(2, placeholder = $$props2.placeholder); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [value, label, placeholder, $$scope, slots, change_handler, input_input_handler]; -} -class Field extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$6, create_fragment$6, safe_not_equal, { label: 1, value: 0, placeholder: 2 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Field", - options, - id: create_fragment$6.name - }); - } - get label() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set label(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get value() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set value(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get placeholder() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set placeholder(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const Engine_svelte_svelte_type_style_lang = ""; -const file$1 = "src/lib/components/ShipEdit/Propulsion/Engine.svelte"; -function create_default_slot_1$1(ctx) { - let t; - let input; - let mounted; - let dispose; - const block = { - c: function create() { - t = text("Well then!\n "); - input = element("input"); - this.h(); - }, - l: function claim(nodes) { - t = claim_text(nodes, "Well then!\n "); - input = claim_element(nodes, "INPUT", { - class: true, - type: true, - min: true, - max: true, - step: true - }); - this.h(); - }, - h: function hydrate() { - attr_dev(input, "class", "short s-6wUMfpp2c9lR"); - attr_dev(input, "type", "number"); - attr_dev(input, "min", "0"); - attr_dev(input, "max", "20"); - attr_dev(input, "step", "1"); - add_location(input, file$1, 4, 6, 86); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, t, anchor); - insert_hydration_dev(target, input, anchor); - set_input_value( - input, - /*rating*/ - ctx[1] - ); - if (!mounted) { - dispose = listen_dev( - input, - "input", - /*input_input_handler*/ - ctx[4] - ); - mounted = true; - } - }, - p: function update(ctx2, dirty) { - if (dirty & /*rating*/ - 2 && to_number(input.value) !== /*rating*/ - ctx2[1]) { - set_input_value( - input, - /*rating*/ - ctx2[1] - ); - } - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(t); - if (detaching) - detach_dev(input); - mounted = false; - dispose(); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot_1$1.name, - type: "slot", - source: '(3:4) ', - ctx - }); - return block; -} -function create_default_slot$5(ctx) { - let div; - let field; - let t0; - let label; - let input; - let t1; - let current; - let mounted; - let dispose; - field = new Field({ - props: { - label: "thrust rating", - $$slots: { default: [create_default_slot_1$1] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - div = element("div"); - create_component(field.$$.fragment); - t0 = space(); - label = element("label"); - input = element("input"); - t1 = text(" advanced"); - this.h(); - }, - l: function claim(nodes) { - div = claim_element(nodes, "DIV", { class: true }); - var div_nodes = children(div); - claim_component(field.$$.fragment, div_nodes); - t0 = claim_space(div_nodes); - label = claim_element(div_nodes, "LABEL", { class: true }); - var label_nodes = children(label); - input = claim_element(label_nodes, "INPUT", { type: true, class: true }); - t1 = claim_text(label_nodes, " advanced"); - label_nodes.forEach(detach_dev); - div_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - attr_dev(input, "type", "checkbox"); - attr_dev(input, "class", "s-6wUMfpp2c9lR"); - add_location(input, file$1, 14, 11, 249); - attr_dev(label, "class", "s-6wUMfpp2c9lR"); - add_location(label, file$1, 14, 4, 242); - attr_dev(div, "class", "s-6wUMfpp2c9lR"); - add_location(div, file$1, 1, 2, 23); - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, div, anchor); - mount_component(field, div, null); - append_hydration_dev(div, t0); - append_hydration_dev(div, label); - append_hydration_dev(label, input); - input.checked = /*advanced*/ - ctx[0]; - append_hydration_dev(label, t1); - current = true; - if (!mounted) { - dispose = listen_dev( - input, - "change", - /*input_change_handler*/ - ctx[5] - ); - mounted = true; - } - }, - p: function update(ctx2, dirty) { - const field_changes = {}; - if (dirty & /*$$scope, rating*/ - 66) { - field_changes.$$scope = { dirty, ctx: ctx2 }; - } - field.$set(field_changes); - if (dirty & /*advanced*/ - 1) { - input.checked = /*advanced*/ - ctx2[0]; - } - }, - i: function intro(local) { - if (current) - return; - transition_in(field.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(field.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(div); - destroy_component(field); - mounted = false; - dispose(); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$5.name, - type: "slot", - source: "(1:0) ", - ctx - }); - return block; -} -function create_fragment$5(ctx) { - let shipitem; - let current; - const shipitem_spread_levels = [ - /*reqs*/ - ctx[2] - ]; - let shipitem_props = { - $$slots: { default: [create_default_slot$5] }, - $$scope: { ctx } - }; - for (let i = 0; i < shipitem_spread_levels.length; i += 1) { - shipitem_props = assign(shipitem_props, shipitem_spread_levels[i]); - } - shipitem = new ShipItem({ props: shipitem_props, $$inline: true }); - const block = { - c: function create() { - create_component(shipitem.$$.fragment); - }, - l: function claim(nodes) { - claim_component(shipitem.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(shipitem, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const shipitem_changes = dirty & /*reqs*/ - 4 ? get_spread_update(shipitem_spread_levels, [get_spread_object( - /*reqs*/ - ctx2[2] - )]) : {}; - if (dirty & /*$$scope, advanced, rating*/ - 67) { - shipitem_changes.$$scope = { dirty, ctx: ctx2 }; - } - shipitem.$set(shipitem_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(shipitem.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(shipitem.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(shipitem, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$5.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$5($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Engine", slots, []); - let { reqs = { cost: 0, mass: 0 } } = $$props; - let { advanced = false } = $$props; - let { rating = 0 } = $$props; - let { api = getContext("api") } = $$props; - const writable_props = ["reqs", "advanced", "rating", "api"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - function input_input_handler() { - rating = to_number(this.value); - $$invalidate(1, rating); - } - function input_change_handler() { - advanced = this.checked; - $$invalidate(0, advanced); - } - $$self.$$set = ($$props2) => { - if ("reqs" in $$props2) - $$invalidate(2, reqs = $$props2.reqs); - if ("advanced" in $$props2) - $$invalidate(0, advanced = $$props2.advanced); - if ("rating" in $$props2) - $$invalidate(1, rating = $$props2.rating); - if ("api" in $$props2) - $$invalidate(3, api = $$props2.api); - }; - $$self.$capture_state = () => ({ - getContext, - Field, - ShipItem, - reqs, - advanced, - rating, - api - }); - $$self.$inject_state = ($$props2) => { - if ("reqs" in $$props2) - $$invalidate(2, reqs = $$props2.reqs); - if ("advanced" in $$props2) - $$invalidate(0, advanced = $$props2.advanced); - if ("rating" in $$props2) - $$invalidate(1, rating = $$props2.rating); - if ("api" in $$props2) - $$invalidate(3, api = $$props2.api); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - $$self.$$.update = () => { - var _a; - if ($$self.$$.dirty & /*api, rating, advanced*/ - 11) { - (_a = api == null ? void 0 : api.dispatch) == null ? void 0 : _a.setEngine({ rating, advanced }); - } - }; - return [advanced, rating, reqs, api, input_input_handler, input_change_handler]; -} -class Engine extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$5, create_fragment$5, safe_not_equal, { reqs: 2, advanced: 0, rating: 1, api: 3 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Engine", - options, - id: create_fragment$5.name - }); - } - get reqs() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set reqs(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get advanced() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set advanced(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get rating() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set rating(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get api() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set api(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const Ftl_svelte_svelte_type_style_lang = ""; -const file = "src/lib/components/ShipEdit/Propulsion/Ftl.svelte"; -function get_each_context(ctx, list, i) { - const child_ctx = ctx.slice(); - child_ctx[6] = list[i]; - return child_ctx; -} -function create_each_block(key_1, ctx) { - let label; - let input; - let t0; - let t1_value = ( - /*t*/ - ctx[6] + "" - ); - let t1; - let t2; - let mounted; - let dispose; - const block = { - key: key_1, - first: null, - c: function create() { - label = element("label"); - input = element("input"); - t0 = space(); - t1 = text(t1_value); - t2 = space(); - this.h(); - }, - l: function claim(nodes) { - label = claim_element(nodes, "LABEL", { class: true }); - var label_nodes = children(label); - input = claim_element(label_nodes, "INPUT", { type: true }); - t0 = claim_space(label_nodes); - t1 = claim_text(label_nodes, t1_value); - t2 = claim_space(label_nodes); - label_nodes.forEach(detach_dev); - this.h(); - }, - h: function hydrate() { - attr_dev(input, "type", "radio"); - input.__value = /*t*/ - ctx[6]; - input.value = input.__value; - ctx[5][0].push(input); - add_location(input, file, 4, 9, 98); - attr_dev(label, "class", "s-bMEhkCgfZ263"); - add_location(label, file, 3, 6, 82); - this.first = label; - }, - m: function mount(target, anchor) { - insert_hydration_dev(target, label, anchor); - append_hydration_dev(label, input); - input.checked = input.__value === /*type*/ - ctx[0]; - append_hydration_dev(label, t0); - append_hydration_dev(label, t1); - append_hydration_dev(label, t2); - if (!mounted) { - dispose = listen_dev( - input, - "change", - /*input_change_handler*/ - ctx[4] - ); - mounted = true; - } - }, - p: function update(new_ctx, dirty) { - ctx = new_ctx; - if (dirty & /*type*/ - 1) { - input.checked = input.__value === /*type*/ - ctx[0]; - } - }, - d: function destroy(detaching) { - if (detaching) - detach_dev(label); - ctx[5][0].splice( - /*$$binding_groups*/ - ctx[5][0].indexOf(input), - 1 - ); - mounted = false; - dispose(); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_each_block.name, - type: "each", - source: "(3:4) {#each types as t (t)}", - ctx - }); - return block; -} -function create_default_slot_1(ctx) { - let each_blocks = []; - let each_1_lookup = /* @__PURE__ */ new Map(); - let each_1_anchor; - let each_value = ( - /*types*/ - ctx[2] - ); - validate_each_argument(each_value); - const get_key = (ctx2) => ( - /*t*/ - ctx2[6] - ); - validate_each_keys(ctx, each_value, get_each_context, get_key); - for (let i = 0; i < each_value.length; i += 1) { - let child_ctx = get_each_context(ctx, each_value, i); - let key = get_key(child_ctx); - each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); - } - const block = { - c: function create() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - each_1_anchor = empty(); - }, - l: function claim(nodes) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].l(nodes); - } - each_1_anchor = empty(); - }, - m: function mount(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } - insert_hydration_dev(target, each_1_anchor, anchor); - }, - p: function update(ctx2, dirty) { - if (dirty & /*types, type*/ - 5) { - each_value = /*types*/ - ctx2[2]; - validate_each_argument(each_value); - validate_each_keys(ctx2, each_value, get_each_context, get_key); - each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context); - } - }, - d: function destroy(detaching) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].d(detaching); - } - if (detaching) - detach_dev(each_1_anchor); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot_1.name, - type: "slot", - source: '(2:2) ', - ctx - }); - return block; -} -function create_default_slot$4(ctx) { - let field; - let current; - field = new Field({ - props: { - label: "FTL drive", - $$slots: { default: [create_default_slot_1] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(field.$$.fragment); - }, - l: function claim(nodes) { - claim_component(field.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(field, target, anchor); - current = true; - }, - p: function update(ctx2, dirty) { - const field_changes = {}; - if (dirty & /*$$scope, type*/ - 513) { - field_changes.$$scope = { dirty, ctx: ctx2 }; - } - field.$set(field_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(field.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(field.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(field, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$4.name, - type: "slot", - source: "(1:0) ", - ctx - }); - return block; -} -function create_fragment$4(ctx) { - let shipitem; - let current; - const shipitem_spread_levels = [ - /*reqs*/ - ctx[1] - ]; - let shipitem_props = { - $$slots: { default: [create_default_slot$4] }, - $$scope: { ctx } - }; - for (let i = 0; i < shipitem_spread_levels.length; i += 1) { - shipitem_props = assign(shipitem_props, shipitem_spread_levels[i]); - } - shipitem = new ShipItem({ props: shipitem_props, $$inline: true }); - const block = { - c: function create() { - create_component(shipitem.$$.fragment); - }, - l: function claim(nodes) { - claim_component(shipitem.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(shipitem, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const shipitem_changes = dirty & /*reqs*/ - 2 ? get_spread_update(shipitem_spread_levels, [get_spread_object( - /*reqs*/ - ctx2[1] - )]) : {}; - if (dirty & /*$$scope, type*/ - 513) { - shipitem_changes.$$scope = { dirty, ctx: ctx2 }; - } - shipitem.$set(shipitem_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(shipitem.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(shipitem.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(shipitem, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$4.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$4($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Ftl", slots, []); - let { type = "none" } = $$props; - let { reqs = { mass: 0, cost: 0 } } = $$props; - let { api = getContext("api") } = $$props; - const types = ["none", "standard", "advanced"]; - const writable_props = ["type", "reqs", "api"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - const $$binding_groups = [[]]; - function input_change_handler() { - type = this.__value; - $$invalidate(0, type); - } - $$self.$$set = ($$props2) => { - if ("type" in $$props2) - $$invalidate(0, type = $$props2.type); - if ("reqs" in $$props2) - $$invalidate(1, reqs = $$props2.reqs); - if ("api" in $$props2) - $$invalidate(3, api = $$props2.api); - }; - $$self.$capture_state = () => ({ - getContext, - ShipItem, - Field, - type, - reqs, - api, - types - }); - $$self.$inject_state = ($$props2) => { - if ("type" in $$props2) - $$invalidate(0, type = $$props2.type); - if ("reqs" in $$props2) - $$invalidate(1, reqs = $$props2.reqs); - if ("api" in $$props2) - $$invalidate(3, api = $$props2.api); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - $$self.$$.update = () => { - if ($$self.$$.dirty & /*api, type*/ - 9) { - api == null ? void 0 : api.dispatch.setFtl(type); - } - }; - return [type, reqs, types, api, input_change_handler, $$binding_groups]; -} -class Ftl extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$4, create_fragment$4, safe_not_equal, { type: 0, reqs: 1, api: 3 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Ftl", - options, - id: create_fragment$4.name - }); - } - get type() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set type(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get reqs() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set reqs(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - get api() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set api(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -function create_default_slot$3(ctx) { - let drive; - let t; - let ftl; - let current; - const drive_spread_levels = [ - /*propulsion*/ - ctx[0].drive - ]; - let drive_props = {}; - for (let i = 0; i < drive_spread_levels.length; i += 1) { - drive_props = assign(drive_props, drive_spread_levels[i]); - } - drive = new Engine({ props: drive_props, $$inline: true }); - const ftl_spread_levels = [ - /*propulsion*/ - ctx[0].ftl - ]; - let ftl_props = {}; - for (let i = 0; i < ftl_spread_levels.length; i += 1) { - ftl_props = assign(ftl_props, ftl_spread_levels[i]); - } - ftl = new Ftl({ props: ftl_props, $$inline: true }); - const block = { - c: function create() { - create_component(drive.$$.fragment); - t = space(); - create_component(ftl.$$.fragment); - }, - l: function claim(nodes) { - claim_component(drive.$$.fragment, nodes); - t = claim_space(nodes); - claim_component(ftl.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(drive, target, anchor); - insert_hydration_dev(target, t, anchor); - mount_component(ftl, target, anchor); - current = true; - }, - p: function update(ctx2, dirty) { - const drive_changes = dirty & /*propulsion*/ - 1 ? get_spread_update(drive_spread_levels, [get_spread_object( - /*propulsion*/ - ctx2[0].drive - )]) : {}; - drive.$set(drive_changes); - const ftl_changes = dirty & /*propulsion*/ - 1 ? get_spread_update(ftl_spread_levels, [get_spread_object( - /*propulsion*/ - ctx2[0].ftl - )]) : {}; - ftl.$set(ftl_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(drive.$$.fragment, local); - transition_in(ftl.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(drive.$$.fragment, local); - transition_out(ftl.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(drive, detaching); - if (detaching) - detach_dev(t); - destroy_component(ftl, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$3.name, - type: "slot", - source: '(1:0)
', - ctx - }); - return block; -} -function create_fragment$3(ctx) { - let section; - let current; - section = new Section({ - props: { - label: "propulsion", - $$slots: { default: [create_default_slot$3] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(section.$$.fragment); - }, - l: function claim(nodes) { - claim_component(section.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(section, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const section_changes = {}; - if (dirty & /*$$scope, propulsion*/ - 3) { - section_changes.$$scope = { dirty, ctx: ctx2 }; - } - section.$set(section_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(section.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(section.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(section, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$3.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$3($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Propulsion", slots, []); - let { propulsion = { drive: {}, ftl: {} } } = $$props; - const writable_props = ["propulsion"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("propulsion" in $$props2) - $$invalidate(0, propulsion = $$props2.propulsion); - }; - $$self.$capture_state = () => ({ Section, Drive: Engine, Ftl, propulsion }); - $$self.$inject_state = ($$props2) => { - if ("propulsion" in $$props2) - $$invalidate(0, propulsion = $$props2.propulsion); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [propulsion]; -} -class Propulsion extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$3, create_fragment$3, safe_not_equal, { propulsion: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Propulsion", - options, - id: create_fragment$3.name - }); - } - get propulsion() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set propulsion(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -function create_default_slot$2(ctx) { - let propulsion; - let current; - propulsion = new Propulsion({ $$inline: true }); - const block = { - c: function create() { - create_component(propulsion.$$.fragment); - }, - l: function claim(nodes) { - claim_component(propulsion.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(propulsion, target, anchor); - current = true; - }, - i: function intro(local) { - if (current) - return; - transition_in(propulsion.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(propulsion.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(propulsion, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$2.name, - type: "slot", - source: "(1:0) ", - ctx - }); - return block; -} -function create_fragment$2(ctx) { - let hst_story; - let current; - hst_story = new /*Hst*/ - ctx[0].Story({ - props: { - $$slots: { default: [create_default_slot$2] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(hst_story.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_story.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_story, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const hst_story_changes = {}; - if (dirty & /*$$scope*/ - 2) { - hst_story_changes.$$scope = { dirty, ctx: ctx2 }; - } - hst_story.$set(hst_story_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_story.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_story.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_story, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$2.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$2($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Propulsion_story", slots, []); - let { Hst } = $$props; - $$self.$$.on_mount.push(function() { - if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) { - console.warn(" was created without expected prop 'Hst'"); - } - }); - const writable_props = ["Hst"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - $$self.$capture_state = () => ({ Hst, Propulsion }); - $$self.$inject_state = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [Hst]; -} -class Propulsion_story extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$2, create_fragment$2, safe_not_equal, { Hst: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Propulsion_story", - options, - id: create_fragment$2.name - }); - } - get Hst() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set Hst(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -const GlobalStyle_svelte_svelte_type_style_lang = ""; -function create_default_slot$1(ctx) { - let engine; - let current; - engine = new Engine({ - props: { api: ( - /*api*/ - ctx[1] - ) }, - $$inline: true - }); - const block = { - c: function create() { - create_component(engine.$$.fragment); - }, - l: function claim(nodes) { - claim_component(engine.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(engine, target, anchor); - current = true; - }, - p: noop, - i: function intro(local) { - if (current) - return; - transition_in(engine.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(engine.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(engine, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot$1.name, - type: "slot", - source: '(1:0) ', - ctx - }); - return block; -} -function create_fragment$1(ctx) { - let hst_story; - let current; - hst_story = new /*Hst*/ - ctx[0].Story({ - props: { - title: "ShipEdit/Propulsion/Engine", - $$slots: { default: [create_default_slot$1] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(hst_story.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_story.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_story, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const hst_story_changes = {}; - if (dirty & /*$$scope*/ - 4) { - hst_story_changes.$$scope = { dirty, ctx: ctx2 }; - } - hst_story.$set(hst_story_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_story.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_story.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_story, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$1.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance$1($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Engine_story", slots, []); - let { Hst } = $$props; - const api = { - dispatch: { - setEngine: (engine) => logEvent("setEngine", { engine }) - } - }; - $$self.$$.on_mount.push(function() { - if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) { - console.warn(" was created without expected prop 'Hst'"); - } - }); - const writable_props = ["Hst"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - $$self.$capture_state = () => ({ Hst, logEvent, api, Engine }); - $$self.$inject_state = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [Hst, api]; -} -class Engine_story extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$1, create_fragment$1, safe_not_equal, { Hst: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Engine_story", - options, - id: create_fragment$1.name - }); - } - get Hst() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set Hst(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -function create_default_slot(ctx) { - let ftl; - let current; - ftl = new Ftl({ - props: { api: ( - /*api*/ - ctx[1] - ) }, - $$inline: true - }); - const block = { - c: function create() { - create_component(ftl.$$.fragment); - }, - l: function claim(nodes) { - claim_component(ftl.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(ftl, target, anchor); - current = true; - }, - p: noop, - i: function intro(local) { - if (current) - return; - transition_in(ftl.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(ftl.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(ftl, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_default_slot.name, - type: "slot", - source: '(1:0) ', - ctx - }); - return block; -} -function create_fragment(ctx) { - let hst_story; - let current; - hst_story = new /*Hst*/ - ctx[0].Story({ - props: { - title: "ShipEdit/Propulsion/Ftl", - $$slots: { default: [create_default_slot] }, - $$scope: { ctx } - }, - $$inline: true - }); - const block = { - c: function create() { - create_component(hst_story.$$.fragment); - }, - l: function claim(nodes) { - claim_component(hst_story.$$.fragment, nodes); - }, - m: function mount(target, anchor) { - mount_component(hst_story, target, anchor); - current = true; - }, - p: function update(ctx2, [dirty]) { - const hst_story_changes = {}; - if (dirty & /*$$scope*/ - 4) { - hst_story_changes.$$scope = { dirty, ctx: ctx2 }; - } - hst_story.$set(hst_story_changes); - }, - i: function intro(local) { - if (current) - return; - transition_in(hst_story.$$.fragment, local); - current = true; - }, - o: function outro(local) { - transition_out(hst_story.$$.fragment, local); - current = false; - }, - d: function destroy(detaching) { - destroy_component(hst_story, detaching); - } - }; - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment.name, - type: "component", - source: "", - ctx - }); - return block; -} -function instance($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots("Ftl_story", slots, []); - let { Hst } = $$props; - const api = { - dispatch: { - setFtl: (ftl) => logEvent("setFtl", { ftl }) - } - }; - $$self.$$.on_mount.push(function() { - if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) { - console.warn(" was created without expected prop 'Hst'"); - } - }); - const writable_props = ["Hst"]; - Object.keys($$props).forEach((key) => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") - console.warn(` was created with unknown prop '${key}'`); - }); - $$self.$$set = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - $$self.$capture_state = () => ({ Hst, logEvent, api, Ftl }); - $$self.$inject_state = ($$props2) => { - if ("Hst" in $$props2) - $$invalidate(0, Hst = $$props2.Hst); - }; - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - return [Hst, api]; -} -class Ftl_story extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance, create_fragment, safe_not_equal, { Hst: 0 }); - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "Ftl_story", - options, - id: create_fragment.name - }); - } - get Hst() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - set Hst(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } -} -let files = [ - { "id": "src-lib-components-shipitem-story-svelte", "path": ["ShipItem"], "filePath": "src/lib/components/ShipItem.story.svelte", "story": { "id": "src-lib-components-shipitem-story-svelte", "title": "ShipItem", "group": null, "layout": { "type": "single", "iframe": true }, "icon": null, "iconColor": null, "docsOnly": false, "variants": [{ "id": "_default", "title": "default" }] }, "supportPluginId": "svelte3", "index": 0, component: ShipItem_story, source: () => __vitePreload(() => import("./__resolved__virtual_story-source_src-lib-components-shipitem-story-svelte-ec4622fc.js"), true ? [] : void 0) }, - { "id": "src-lib-components-costmass-index-story-svelte", "path": ["CostMass"], "filePath": "src/lib/components/CostMass/index.story.svelte", "story": { "id": "src-lib-components-costmass-index-story-svelte", "title": "CostMass", "group": null, "layout": { "type": "single", "iframe": true }, "icon": null, "iconColor": null, "docsOnly": false, "variants": [{ "id": "_default", "title": "default" }] }, "supportPluginId": "svelte3", "index": 1, component: CostMass_1, source: () => __vitePreload(() => import("./__resolved__virtual_story-source_src-lib-components-costmass-index-story-svelte-fa9c29ac.js"), true ? [] : void 0) }, - { "id": "src-lib-components-shipedit-propulsion-story-svelte", "path": ["Propulsion"], "filePath": "src/lib/components/ShipEdit/Propulsion.story.svelte", "story": { "id": "src-lib-components-shipedit-propulsion-story-svelte", "title": "Propulsion", "group": null, "layout": { "type": "single", "iframe": true }, "icon": null, "iconColor": null, "docsOnly": false, "variants": [{ "id": "_default", "title": "default" }] }, "supportPluginId": "svelte3", "index": 2, component: Propulsion_story, source: () => __vitePreload(() => import("./__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-story-svelte-eabfe58a.js"), true ? [] : void 0) }, - { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte", "path": ["ShipEdit", "Propulsion", "Engine"], "filePath": "src/lib/components/ShipEdit/Propulsion/Engine.story.svelte", "story": { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte", "title": "Engine", "group": null, "layout": { "type": "single", "iframe": true }, "icon": null, "iconColor": null, "docsOnly": false, "variants": [{ "id": "_default", "title": "default" }] }, "supportPluginId": "svelte3", "index": 3, component: Engine_story, source: () => __vitePreload(() => import("./__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js"), true ? [] : void 0) }, - { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte", "path": ["ShipEdit", "Propulsion", "Ftl"], "filePath": "src/lib/components/ShipEdit/Propulsion/Ftl.story.svelte", "story": { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte", "title": "Ftl", "group": null, "layout": { "type": "single", "iframe": true }, "icon": null, "iconColor": null, "docsOnly": false, "variants": [{ "id": "_default", "title": "default" }] }, "supportPluginId": "svelte3", "index": 4, component: Ftl_story, source: () => __vitePreload(() => import("./__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-ftl-story-svelte-df90933e.js"), true ? [] : void 0) } -]; -let tree = [{ "title": "CostMass", "index": 1 }, { "title": "Propulsion", "index": 2 }, { "title": "ShipEdit", "children": [{ "title": "Propulsion", "children": [{ "title": "Engine", "index": 3 }, { "title": "Ftl", "index": 4 }] }] }, { "title": "ShipItem", "index": 0 }]; -const base = "/"; -function createRouterHistory() { - switch (histoireConfig.routerMode) { - case "hash": - return createWebHashHistory(base); - case "history": - default: - return createWebHistory(base); - } -} -const router = createRouter({ - history: createRouterHistory(), - routes: [ - { - path: "/", - name: "home", - component: () => __vitePreload(() => import("./HomeView.vue-2db017c5.js"), true ? ["assets/HomeView.vue-2db017c5.js","assets/vendor-3ab3e533.js"] : void 0) - }, - { - path: "/story/:storyId", - name: "story", - component: () => __vitePreload(() => import("./StoryView.vue-e7ab65e8.js"), true ? ["assets/StoryView.vue-e7ab65e8.js","assets/vendor-3ab3e533.js","assets/story-804dabc9.js","assets/MobileOverlay.vue2-a3503848.js","assets/BaseEmpty.vue-045cbb89.js","assets/state-4b1a79d2.js","assets/events-ae5cec59.js"] : void 0) - } - ] -}); -const copiedFromExistingVariant = [ - "state", - "slots", - "source", - "responsiveDisabled", - "autoPropsDisabled", - "setupApp", - "configReady", - "previewReady" -]; -function mapFile(file2, existingFile) { - let result; - if (existingFile) { - result = existingFile; - for (const key in file2) { - if (key === "story") { - result.story = { - ...result.story, - ...file2.story, - file: markRaw(result), - variants: file2.story.variants.map((v) => mapVariant(v, existingFile.story.variants.find((item) => item.id === v.id))) - }; - } else if (key !== "component") { - result[key] = file2[key]; - } - } - } else { - result = { - ...file2, - component: markRaw(file2.component), - story: { - ...file2.story, - title: file2.story.title, - file: markRaw(file2), - variants: file2.story.variants.map((v) => mapVariant(v)), - slots: () => ({}) - } - }; - } - return result; -} -function mapVariant(variant, existingVariant) { - let result; - if (existingVariant) { - result = existingVariant; - for (const key in variant) { - if (!copiedFromExistingVariant.includes(key)) { - result[key] = variant[key]; - } - } - } else { - result = { - ...variant, - state: reactive({ - _hPropState: {}, - _hPropDefs: {} - }), - setupApp: null, - slots: () => ({}), - previewReady: false - }; - } - return result; -} -const clientSupportPlugins = { - "vanilla": () => __vitePreload(() => import("./vendor-3ab3e533.js").then((n) => n.bl), true ? [] : void 0), - "svelte3": () => __vitePreload(() => import("./vendor-3ab3e533.js").then((n) => n.bm), true ? [] : void 0) -}; -const __default__ = { - inheritAttrs: false -}; -const _sfc_main = /* @__PURE__ */ defineComponent({ - ...__default__, - __name: "GenericMountStory", - props: { - story: null - }, - setup(__props) { - const props = __props; - const mountComponent = ref(null); - watchEffect(async () => { - var _a; - const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId]; - if (clientPlugin) { - const pluginModule = await clientPlugin(); - mountComponent.value = markRaw(pluginModule.MountStory); - } - }); - return (_ctx, _cache) => { - return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({ - key: 0, - class: "histoire-generic-mount-story", - story: __props.story - }, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true); - }; - } -}); -export { - _sfc_main as _, - base as b, - clientSupportPlugins as c, - files as f, - mapFile as m, - router as r, - tree as t -}; diff --git a/.histoire/dist/assets/HomeView.vue-2db017c5.js b/.histoire/dist/assets/HomeView.vue-2db017c5.js deleted file mode 100644 index 07b0f9d..0000000 --- a/.histoire/dist/assets/HomeView.vue-2db017c5.js +++ /dev/null @@ -1,25 +0,0 @@ -import { d as defineComponent, c as computed, e as createElementBlock, g as createBaseVNode, a as unref, o as openBlock, v as histoireConfig, x as customLogos } from "./vendor-3ab3e533.js"; -const HistoireLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjU7ZmlsbDojMzRkMzk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxLjAwMzc1IgogICAgICAgaWQ9InJlY3QxMzcyIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iLTI2LjU2NTA2MyIKICAgICAgIHk9IjEzNC43NTA3OSIKICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0yMy44MjEyNjIpIgogICAgICAgcnk9IjgiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzM0ZDM5OTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS4wMDM3NSIKICAgICAgIGlkPSJyZWN0ODUwIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iNzcuNTcxODM4IgogICAgICAgeT0iNzIuODA4NzA4IgogICAgICAgcnk9IjgiCiAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNC41NzQ0NTM0KSIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5ZXIzIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTctMyIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNiNGZhZTI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiNGZhZTI7c3Ryb2tlLXdpZHRoOjguMzQ5MjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMzU5LjM4OTQ3LDM1NS45NTEzNCAzMjAuNzI5MzUsMTc2LjUyOTQyIDIzOC4zNDYxMywyMzguOTQxMTggWiBNIDI3My42NDEyNCwyNzMuMDY2MDggMTUyLjU5Nzg4LDE1Ni4wNTU5MSAxOTEuMjU4MDQsMzM1LjQ3Nzg2IFoiIC8+CiAgPC9nPgogIDxnCiAgICAgaWQ9ImxheWVyMiIKICAgICBzdHlsZT0iZGlzcGxheTpub25lIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTciCiAgICAgICBzdHlsZT0iZmlsbDojYjRmYWUyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYjRmYWUyO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDI5NiwxMDMuOTgyNDIgLTEzNS41MzEyNSwxNzcuOTY2OCBoIDg4LjcwMTE3IHogTSAyNjIuODMwMDgsMjMwLjA1MDc4IDIxNiw0MDguMDE3NTggMzUxLjUzMTI1LDIzMC4wNTA3OCBaIgogICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTQuMTU2NTUzLDI1NiwyNTYuMDA2OTEpIiAvPgogIDwvZz4KPC9zdmc+Cg=="; -const _hoisted_1 = { class: "histoire-home-view htw-flex htw-items-center htw-justify-center htw-h-full" }; -const _hoisted_2 = ["src"]; -const _sfc_main = /* @__PURE__ */ defineComponent({ - __name: "HomeView", - setup(__props) { - const logoUrl = computed(() => { - var _a, _b; - return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo; - }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1, [ - createBaseVNode("img", { - src: unref(logoUrl), - alt: "Logo", - class: "htw-w-64 htw-h-64 htw-opacity-25" - }, null, 8, _hoisted_2) - ]); - }; - } -}); -export { - _sfc_main as default -}; diff --git a/.histoire/dist/assets/MobileOverlay.vue2-a3503848.js b/.histoire/dist/assets/MobileOverlay.vue2-a3503848.js deleted file mode 100644 index 5f48ba9..0000000 --- a/.histoire/dist/assets/MobileOverlay.vue2-a3503848.js +++ /dev/null @@ -1,307 +0,0 @@ -import { d as defineComponent, l as resolveComponent, o as openBlock, q as createBlock, w as withCtx, g as createBaseVNode, n as normalizeClass, m as withKeys, aY as renderSlot, aQ as mergeProps, k as watch, bg as scrollIntoView, N as onMounted, r as ref, c as computed, a_ as onUnmounted, e as createElementBlock, aX as withModifiers, L as normalizeStyle, a as unref, bh as useMediaQuery, t as toDisplayString, f as createVNode, I as Icon, h as createCommentVNode, T as Transition } from "./vendor-3ab3e533.js"; -const _sfc_main$2 = defineComponent({ - inheritAttrs: false, - props: { - isActive: { - type: Boolean, - default: void 0 - } - }, - emits: { - navigate: () => true - }, - setup(props, { emit }) { - function handleNavigate(event, navigate) { - emit("navigate"); - navigate(event); - } - return { - handleNavigate - }; - } -}); -const _export_sfc = (sfc, props) => { - const target = sfc.__vccOpts || sfc; - for (const [key, val] of props) { - target[key] = val; - } - return target; -}; -const _hoisted_1$2 = ["href", "onClick", "onKeyup"]; -function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { - const _component_RouterLink = resolveComponent("RouterLink"); - return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "histoire-base-list-item-link" }, _ctx.$attrs, { custom: "" }), { - default: withCtx(({ isActive: linkIsActive, href, navigate }) => [ - createBaseVNode("a", { - href, - class: normalizeClass(["htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [ - _ctx.$attrs.class, - (_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900" - ]]), - onClick: ($event) => _ctx.handleNavigate($event, navigate), - onKeyup: [ - withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]), - withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"]) - ] - }, [ - renderSlot(_ctx.$slots, "default", { - active: _ctx.isActive != null ? _ctx.isActive : linkIsActive - }) - ], 42, _hoisted_1$2) - ]), - _: 3 - }, 16); -} -const BaseListItemLink = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]); -function useScrollOnActive(active, el) { - watch(active, (value) => { - if (value) { - autoScroll(); - } - }); - function autoScroll() { - if (el.value) { - scrollIntoView(el.value, { - scrollMode: "if-needed", - block: "center", - inline: "nearest", - behavior: "smooth" - }); - } - } - onMounted(() => { - if (active.value) { - autoScroll(); - } - }); - return { - autoScroll - }; -} -const _hoisted_1$1 = ["onMousedown"]; -const _sfc_main$1 = /* @__PURE__ */ defineComponent({ - __name: "BaseSplitPane", - props: { - orientation: { - type: String, - default: "landscape", - validator: (value) => ["landscape", "portrait"].includes(value) - }, - defaultSplit: { - type: Number, - default: 50 - }, - split: { - type: Number, - default: void 0 - }, - min: { - type: Number, - default: 20 - }, - max: { - type: Number, - default: 80 - }, - draggerOffset: { - type: String, - default: "center", - validator: (value) => ["before", "center", "after"].includes(value) - }, - saveId: { - type: String, - default: null - }, - fixed: { - type: Boolean, - default: false - } - }, - emits: { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - "update:split": (value) => true - }, - setup(__props, { emit }) { - const props = __props; - const SAVE_PREFIX = "__histoire"; - const currentSplit = ref(props.defaultSplit); - watch(() => props.split, (value) => { - if (value !== void 0) { - currentSplit.value = value; - } - }, { - immediate: true - }); - if (props.saveId) { - const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`; - const savedValue = localStorage.getItem(storageKey); - if (savedValue != null) { - let parsedValue; - try { - parsedValue = JSON.parse(savedValue); - } catch (e) { - console.error(e); - } - if (typeof parsedValue === "number") { - currentSplit.value = parsedValue; - } - } - watch(currentSplit, (value) => { - localStorage.setItem(storageKey, JSON.stringify(value)); - }); - watch(currentSplit, (value) => { - if (value !== props.split) { - emit("update:split", value); - } - }, { - immediate: true - }); - } - const boundSplit = computed(() => { - if (currentSplit.value < props.min) { - return props.min; - } else if (currentSplit.value > props.max) { - return props.max; - } else { - return currentSplit.value; - } - }); - const leftStyle = computed(() => ({ - [props.orientation === "landscape" ? "width" : "height"]: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%` - })); - const rightStyle = computed(() => ({ - [props.orientation === "landscape" ? "width" : "height"]: props.fixed ? null : `${100 - boundSplit.value}%` - })); - const dragging = ref(false); - let startPosition = 0; - let startSplit = 0; - const el = ref(null); - function dragStart(e) { - dragging.value = true; - startPosition = props.orientation === "landscape" ? e.pageX : e.pageY; - startSplit = boundSplit.value; - window.addEventListener("mousemove", dragMove); - window.addEventListener("mouseup", dragEnd); - } - function dragMove(e) { - if (dragging.value) { - let position; - let totalSize; - if (props.orientation === "landscape") { - position = e.pageX; - totalSize = el.value.offsetWidth; - } else { - position = e.pageY; - totalSize = el.value.offsetHeight; - } - const dPosition = position - startPosition; - if (props.fixed) { - currentSplit.value = startSplit + dPosition; - } else { - currentSplit.value = startSplit + ~~(dPosition / totalSize * 200) / 2; - } - } - } - function dragEnd() { - dragging.value = false; - removeDragListeners(); - } - function removeDragListeners() { - window.removeEventListener("mousemove", dragMove); - window.removeEventListener("mouseup", dragEnd); - } - onUnmounted(() => { - removeDragListeners(); - }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - ref_key: "el", - ref: el, - class: normalizeClass(["histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto", { - "htw-flex-col": __props.orientation === "portrait", - "htw-cursor-ew-resize": dragging.value && __props.orientation === "landscape", - "htw-cursor-ns-resize": dragging.value && __props.orientation === "portrait", - [__props.orientation]: true - }]) - }, [ - createBaseVNode("div", { - class: normalizeClass(["htw-relative htw-top-0 htw-left-0 htw-z-20", { - "htw-pointer-events-none": dragging.value, - "htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "landscape", - "htw-flex-none": __props.fixed - }]), - style: normalizeStyle(unref(leftStyle)) - }, [ - renderSlot(_ctx.$slots, "first", {}, void 0, true), - createBaseVNode("div", { - class: normalizeClass(["dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150", { - "htw-top-0 htw-bottom-0 htw-cursor-ew-resize": __props.orientation === "landscape", - "htw-left-0 htw-right-0 htw-cursor-ns-resize": __props.orientation === "portrait", - [`dragger-offset-${__props.draggerOffset}`]: true, - "htw-bg-primary-500/25": dragging.value - }]), - onMousedown: withModifiers(dragStart, ["prevent"]) - }, null, 42, _hoisted_1$1) - ], 6), - createBaseVNode("div", { - class: normalizeClass(["htw-relative htw-bottom-0 htw-right-0", { - "htw-pointer-events-none": dragging.value, - "htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "portrait", - "htw-flex-1": __props.fixed - }]), - style: normalizeStyle(unref(rightStyle)) - }, [ - renderSlot(_ctx.$slots, "last", {}, void 0, true) - ], 6) - ], 2); - }; - } -}); -const BaseSplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ed925107"]]); -const isMobile = useMediaQuery("(max-width: 640px)"); -const _hoisted_1 = { - key: 0, - class: "histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col" -}; -const _hoisted_2 = { class: "htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between" }; -const _hoisted_3 = { class: "htw-text-gray-500" }; -const _sfc_main = /* @__PURE__ */ defineComponent({ - __name: "MobileOverlay", - props: { - title: null, - opened: { type: Boolean } - }, - emits: ["close"], - setup(__props, { emit: emits }) { - return (_ctx, _cache) => { - return openBlock(), createBlock(Transition, { name: "__histoire-fade-bottom" }, { - default: withCtx(() => [ - __props.opened ? (openBlock(), createElementBlock("div", _hoisted_1, [ - createBaseVNode("div", _hoisted_2, [ - createBaseVNode("span", _hoisted_3, toDisplayString(__props.title), 1), - createBaseVNode("a", { - class: "htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer", - onClick: _cache[0] || (_cache[0] = ($event) => emits("close")) - }, [ - createVNode(unref(Icon), { - icon: "carbon:close", - class: "htw-w-8 htw-h-8 htw-shrink-0" - }) - ]) - ]), - renderSlot(_ctx.$slots, "default") - ])) : createCommentVNode("", true) - ]), - _: 3 - }); - }; - } -}); -export { - BaseListItemLink as B, - _export_sfc as _, - _sfc_main as a, - BaseSplitPane as b, - isMobile as i, - useScrollOnActive as u -}; diff --git a/.histoire/dist/assets/SearchPane.vue-c31f94e5.js b/.histoire/dist/assets/SearchPane.vue-c31f94e5.js deleted file mode 100644 index 80ae8e3..0000000 --- a/.histoire/dist/assets/SearchPane.vue-c31f94e5.js +++ /dev/null @@ -1,545 +0,0 @@ -import { d as defineComponent, o as openBlock, e as createElementBlock, aY as renderSlot, n as normalizeClass, m as withKeys, c as computed, a as unref, q as createBlock, I as Icon, f as createVNode, g as createBaseVNode, D as createTextVNode, t as toDisplayString, F as Fragment, p as renderList, h as createCommentVNode, u as useCssVars, r as ref, aS as toRefs, aU as useRouter, w as withCtx, aO as markRaw, k as watch, bi as useFocus, bj as refDebounced, B as withDirectives, aZ as vModelText, aX as withModifiers, _ as __vitePreload, bk as flexsearch_bundleExports } from "./vendor-3ab3e533.js"; -import { u as useStoryStore } from "./story-804dabc9.js"; -import { B as BaseEmpty } from "./BaseEmpty.vue-045cbb89.js"; -import { o as onKeyboardShortcut, u as useCommandStore } from "./bundle-main-f9305308.js"; -import { _ as _export_sfc, u as useScrollOnActive, B as BaseListItemLink } from "./MobileOverlay.vue2-a3503848.js"; -import "./GenericMountStory.vue2-2bb5633d.js"; -function pipeline(a, b, c, d) { - if (a && (b && (a = replace(a, b)), this.matcher && (a = replace(a, this.matcher)), this.stemmer && 1 < a.length && (a = replace(a, this.stemmer)), d && 1 < a.length && (a = collapse(a)), c || "" === c)) { - const b2 = a.split(c); - return this.filter ? filter$1(b2, this.filter) : b2; - } - return a; -} -const regex_whitespace = /[\p{Z}\p{S}\p{P}\p{C}]+/u; -const regex_normalize = /[\u0300-\u036f]/g; -function normalize(a) { - return a.normalize && (a = a.normalize("NFD").replace(regex_normalize, "")), a; -} -function replace(a, b) { - for (let c = 0, d = b.length; c < d && (a = a.replace(b[c], b[c + 1]), !!a); c += 2) - ; - return a; -} -function regex(a) { - return new RegExp(a, "g"); -} -function collapse(a) { - let b = "", c = ""; - for (let d, e = 0, f = a.length; e < f; e++) - (d = a[e]) !== c && (b += c = d); - return b; -} -function filter$1(a, b) { - const c = a.length, d = []; - for (let e = 0, f = 0; e < c; e++) { - const c2 = a[e]; - c2 && !b[c2] && (d[f++] = c2); - } - return d; -} -const regex_a = regex("[àáâãäå]"), regex_e = regex("[èéêë]"), regex_i = regex("[ìíîï]"), regex_o = regex("[òóôõöő]"), regex_u = regex("[ùúûüű]"), regex_y = regex("[ýŷÿ]"), regex_n = regex("ñ"), regex_c = regex("[çc]"), regex_s = regex("ß"), regex_and = regex(" & "), pairs$1 = [regex_a, "a", regex_e, "e", regex_i, "i", regex_o, "o", regex_u, "u", regex_y, "y", regex_n, "n", regex_c, "k", regex_s, "s", regex_and, " and "]; -function encode$2(a) { - return a = "" + a, pipeline.call(this, normalize(a).toLowerCase(), !a.normalize && pairs$1, regex_whitespace, false); -} -const regex_strip = /[^a-z0-9]+/, soundex = { b: "p", v: "f", w: "f", z: "s", x: "s", ß: "s", d: "t", n: "m", c: "k", g: "k", j: "k", q: "k", i: "e", y: "e", u: "o" }; -function encode$1(a) { - a = encode$2.call(this, a).join(" "); - const b = []; - if (a) { - const c = a.split(regex_strip), d = c.length; - for (let e, f = 0, g = 0; f < d; f++) - if ((a = c[f]) && (!this.filter || !this.filter[a])) { - e = a[0]; - let c2 = soundex[e] || e, d2 = c2; - for (let b2 = 1; b2 < a.length; b2++) { - e = a[b2]; - const f2 = soundex[e] || e; - f2 && f2 !== d2 && (c2 += f2, d2 = f2); - } - b[g++] = c2; - } - } - return b; -} -const charset = { encode, rtl: false, tokenize: "" }; -const regex_ae = regex("ae"), regex_oe = regex("oe"), regex_sh = regex("sh"), regex_th = regex("th"), regex_ph = regex("ph"), regex_pf = regex("pf"), pairs = [regex_ae, "a", regex_oe, "o", regex_sh, "s", regex_th, "t", regex_ph, "f", regex_pf, "f", regex("(?![aeo])h(?![aeo])"), "", regex("(?!^[aeo])h(?!^[aeo])"), ""]; -function encode(a, b) { - return a && (a = encode$1.call(this, a).join(" "), 2 < a.length && (a = replace(a, pairs)), !b && (1 < a.length && (a = collapse(a)), a && (a = a.split(" ")))), a; -} -const filter = ["a", "about", "above", "after", "again", "against", "all", "also", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "both", "but", "by", "can", "cannot", "can't", "come", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "dont", "down", "during", "each", "even", "few", "first", "for", "from", "further", "get", "go", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "hed", "her", "here", "here's", "hers", "herself", "hes", "him", "himself", "his", "how", "how's", "i", "id", "if", "ill", "im", "in", "into", "is", "isn't", "it", "it's", "itself", "i've", "just", "know", "let's", "like", "make", "me", "more", "most", "mustn't", "my", "myself", "new", "no", "nor", "not", "now", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "our's", "ourselves", "out", "over", "own", "same", "say", "see", "shan't", "she", "she'd", "shell", "shes", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "time", "to", "too", "until", "up", "us", "very", "want", "was", "wasn't", "way", "we", "wed", "well", "were", "weren't", "we've", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "whom", "who's", "why", "why's", "will", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "your", "you're", "your's", "yourself", "yourselves", "you've"]; -const stemmer = { ational: "ate", iveness: "ive", fulness: "ful", ousness: "ous", ization: "ize", tional: "tion", biliti: "ble", icate: "ic", ative: "", alize: "al", iciti: "ic", entli: "ent", ousli: "ous", alism: "al", ation: "ate", aliti: "al", iviti: "ive", ement: "", enci: "ence", anci: "ance", izer: "ize", alli: "al", ator: "ate", logi: "log", ical: "ic", ance: "", ence: "", ness: "", able: "", ible: "", ment: "", eli: "e", bli: "ble", ful: "", ant: "", ent: "", ism: "", ate: "", iti: "", ous: "", ive: "", ize: "", al: "", ou: "", er: "", ic: "" }; -const matcher = {}; -const language = { filter, stemmer, matcher }; -const _sfc_main$4 = /* @__PURE__ */ defineComponent({ - __name: "BaseListItem", - props: { - isActive: { type: Boolean } - }, - emits: ["navigate"], - setup(__props, { emit }) { - function handleNavigate() { - emit("navigate"); - } - return (_ctx, _cache) => { - return openBlock(), createElementBlock("a", { - class: normalizeClass(["istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [ - _ctx.$attrs.class, - __props.isActive ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900" - ]]), - onClick: _cache[0] || (_cache[0] = ($event) => handleNavigate()), - onKeyup: [ - _cache[1] || (_cache[1] = withKeys(($event) => handleNavigate(), ["enter"])), - _cache[2] || (_cache[2] = withKeys(($event) => handleNavigate(), ["space"])) - ] - }, [ - renderSlot(_ctx.$slots, "default") - ], 34); - }; - } -}); -const _hoisted_1$3 = ["src", "alt"]; -const _sfc_main$3 = /* @__PURE__ */ defineComponent({ - __name: "BaseIcon", - props: { - icon: null - }, - setup(__props) { - const props = __props; - const isUrl = computed(() => props.icon.startsWith("http") || props.icon.startsWith("data:image") || props.icon.startsWith(".") || props.icon.startsWith("/")); - return (_ctx, _cache) => { - return unref(isUrl) ? (openBlock(), createElementBlock("img", { - key: 0, - src: __props.icon, - alt: __props.icon, - class: "histoire-base-icon" - }, null, 8, _hoisted_1$3)) : (openBlock(), createBlock(unref(Icon), { - key: 1, - icon: __props.icon, - class: "histoire-base-icon" - }, null, 8, ["icon"])); - }; - } -}); -const BaseIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-74182813"]]); -const _hoisted_1$2 = { class: "htw-flex-1" }; -const _hoisted_2 = { class: "htw-flex" }; -const _hoisted_3 = { class: "htw-ml-auto htw-opacity-40" }; -const _hoisted_4 = { - key: 0, - class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60" -}; -const _sfc_main$2 = /* @__PURE__ */ defineComponent({ - __name: "SearchItemContent", - props: { - result: null, - selected: { type: Boolean } - }, - setup(__props) { - const defaultIcons = { - story: "carbon:cube", - variant: "carbon:cube" - }; - const kindLabels = { - story: "Story", - variant: "Variant", - command: "Command" - }; - return (_ctx, _cache) => { - var _a; - return openBlock(), createElementBlock(Fragment, null, [ - createVNode(BaseIcon, { - icon: __props.result.icon ?? defaultIcons[__props.result.kind], - class: normalizeClass(["htw-w-4 htw-h-4", [ - !__props.selected ? [ - __props.result.iconColor ? "bind-icon-color" : { - "htw-text-primary-500": __props.result.kind === "story", - "htw-text-gray-500": __props.result.kind === "variant" - } - ] : [], - { - "colorize-black": __props.selected - } - ]]) - }, null, 8, ["icon", "class"]), - createBaseVNode("div", _hoisted_1$2, [ - createBaseVNode("div", _hoisted_2, [ - createTextVNode(toDisplayString(__props.result.title) + " ", 1), - createBaseVNode("span", _hoisted_3, toDisplayString(kindLabels[__props.result.kind]), 1) - ]), - ((_a = __props.result.path) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_4, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(__props.result.path, (p, index) => { - return openBlock(), createElementBlock("div", { - key: index, - class: "htw-flex htw-items-center htw-gap-0.5" - }, [ - index > 0 ? (openBlock(), createBlock(unref(Icon), { - key: 0, - icon: "carbon:chevron-right", - class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50" - })) : createCommentVNode("", true), - createBaseVNode("span", null, toDisplayString(p), 1) - ]); - }), 128)) - ])) : createCommentVNode("", true) - ]) - ], 64); - }; - } -}); -const _hoisted_1$1 = ["data-selected"]; -const _sfc_main$1 = /* @__PURE__ */ defineComponent({ - __name: "SearchItem", - props: { - result: { - type: Object, - required: true - }, - selected: { - type: Boolean, - default: false - } - }, - emits: { - close: () => true - }, - setup(__props, { emit }) { - const props = __props; - useCssVars((_ctx) => ({ - "a8c1277e": __props.result.iconColor - })); - const el = ref(); - const { selected } = toRefs(props); - useScrollOnActive(selected, el); - const router = useRouter(); - onKeyboardShortcut(["enter"], () => { - if (!props.selected) - return; - action(); - }); - function action(fromClick = false) { - if ("route" in props.result && !fromClick) { - router.push(props.result.route); - } - if ("onActivate" in props.result) { - props.result.onActivate(); - } - emit("close"); - } - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - ref_key: "el", - ref: el, - class: "histoire-search-item", - "data-test-id": "search-item", - "data-selected": unref(selected) ? "" : void 0 - }, [ - "route" in __props.result ? (openBlock(), createBlock(BaseListItemLink, { - key: 0, - to: __props.result.route, - "is-active": unref(selected), - class: "htw-px-6 htw-py-4 htw-gap-4", - onNavigate: _cache[0] || (_cache[0] = ($event) => action(true)) - }, { - default: withCtx(() => [ - createVNode(_sfc_main$2, { - result: __props.result, - selected: unref(selected) - }, null, 8, ["result", "selected"]) - ]), - _: 1 - }, 8, ["to", "is-active"])) : createCommentVNode("", true), - "onActivate" in __props.result ? (openBlock(), createBlock(_sfc_main$4, { - key: 1, - "is-active": unref(selected), - class: "htw-px-6 htw-py-4 htw-gap-4", - onNavigate: _cache[1] || (_cache[1] = ($event) => action(true)) - }, { - default: withCtx(() => [ - createVNode(_sfc_main$2, { - result: __props.result, - selected: unref(selected) - }, null, 8, ["result", "selected"]) - ]), - _: 1 - }, 8, ["is-active"])) : createCommentVNode("", true) - ], 8, _hoisted_1$1); - }; - } -}); -const SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6c8e9661"]]); -let searchData$1 = { "index": { "reg": '{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1}', "text.cfg": '{"doc":0,"opt":1}', "text.map": '[{"s":[0,1],"se":[0,1],"sep":[0,1],"k":[2,3],"ko":[2,3],"kos":[2,3],"kost":[2,3],"p":[4,5],"pr":[4,5],"pro":[4,5],"prop":[4,5],"propo":[4,5],"propol":[4,5],"propols":[4,5],"propolse":[4,5],"propolseo":[4,5],"propolseom":[4,5],"e":[6,7],"em":[6,7],"emk":[6,7],"emke":[6,7],"emkem":[6,7],"emkeme":[6,7],"f":[8,9],"ft":[8,9],"ftl":[8,9]},{"e":[0,1],"et":[0,1],"ete":[0,1],"etem":[0,1],"m":[2,3],"ma":[2,3],"mas":[2,3],"t":[5,7,9],"te":[5,7,9],"tef":[5,7,9],"tefa":[5,7,9],"tefao":[5,7,9],"tefaol":[5,7,9],"tefaolt":[5,7,9]},{"t":[1,3],"te":[1,3],"tef":[1,3],"tefa":[1,3],"tefao":[1,3],"tefaol":[1,3],"tefaolt":[1,3]},{},{},{},{},{},{}]', "text.ctx": "[{}]" }, "idMap": { "0": { "id": "src-lib-components-shipitem-story-svelte", "kind": "story" }, "1": { "id": "src-lib-components-shipitem-story-svelte:_default", "kind": "variant" }, "2": { "id": "src-lib-components-costmass-index-story-svelte", "kind": "story" }, "3": { "id": "src-lib-components-costmass-index-story-svelte:_default", "kind": "variant" }, "4": { "id": "src-lib-components-shipedit-propulsion-story-svelte", "kind": "story" }, "5": { "id": "src-lib-components-shipedit-propulsion-story-svelte:_default", "kind": "variant" }, "6": { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte", "kind": "story" }, "7": { "id": "src-lib-components-shipedit-propulsion-engine-story-svelte:_default", "kind": "variant" }, "8": { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte", "kind": "story" }, "9": { "id": "src-lib-components-shipedit-propulsion-ftl-story-svelte:_default", "kind": "variant" } } }; -const searchData = markRaw(searchData$1); -function useSelection(list) { - const selectedIndex = ref(0); - watch(list, () => { - selectedIndex.value = 0; - }); - function selectNext() { - selectedIndex.value++; - if (selectedIndex.value > list.value.length - 1) { - selectedIndex.value = 0; - } - } - function selectPrevious() { - selectedIndex.value--; - if (selectedIndex.value < 0) { - selectedIndex.value = list.value.length - 1; - } - } - return { - selectedIndex: computed(() => selectedIndex.value), - selectNext, - selectPrevious - }; -} -const _hoisted_1 = { - key: 1, - class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg" -}; -const _sfc_main = /* @__PURE__ */ defineComponent({ - __name: "SearchPane", - props: { - shown: { - type: Boolean, - default: false - } - }, - emits: { - close: () => true - }, - setup(__props, { emit }) { - const props = __props; - const DocSearchData = () => __vitePreload(() => import("./search-docs-data-9f078283.js"), true ? ["assets/search-docs-data-9f078283.js","assets/vendor-3ab3e533.js"] : void 0); - function close() { - emit("close"); - } - const input = ref(); - const { focused } = useFocus(input, { - initialValue: true - }); - watch(() => props.shown, (value) => { - if (value) { - requestAnimationFrame(() => { - focused.value = true; - input.value.select(); - }); - } - }); - const searchInputText = ref(""); - const rateLimitedSearch = refDebounced(searchInputText, 50); - const storyStore = useStoryStore(); - let titleSearchIndex; - let titleIdMap; - function createIndex() { - return new flexsearch_bundleExports.Document({ - preset: "match", - document: { - id: "id", - index: [ - "text" - ] - }, - worker: true, - charset, - language, - tokenize: "forward" - }); - } - async function loadSearchIndex(data) { - titleSearchIndex = createIndex(); - for (const key of Object.keys(data.index)) { - await titleSearchIndex.import(key, data.index[key]); - } - titleIdMap = data.idMap; - } - loadSearchIndex(searchData); - let docSearchIndex; - let docIdMap; - async function loadDocSearchIndex() { - async function load(data) { - docSearchIndex = createIndex(); - for (const key of Object.keys(data.index)) { - await docSearchIndex.import(key, data.index[key]); - } - docIdMap = data.idMap; - if (rateLimitedSearch.value) { - searchOnDocField(rateLimitedSearch.value); - } - } - const searchDataModule = await DocSearchData(); - load(searchDataModule.searchData); - searchDataModule.onUpdate((searchData2) => { - load(searchData2); - }); - } - loadDocSearchIndex(); - const titleResults = ref([]); - watch(rateLimitedSearch, async (value) => { - const list = []; - const raw = await titleSearchIndex.search(value); - let rank = 0; - for (const field of raw) { - for (const id of field.result) { - const idMapData = titleIdMap[id]; - if (!idMapData) - continue; - switch (idMapData.kind) { - case "story": { - list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank)); - rank++; - break; - } - case "variant": { - const [storyId] = idMapData.id.split(":"); - const story = storyStore.getStoryById(storyId); - const variant = storyStore.getVariantById(idMapData.id); - list.push(variantResultFactory(story, variant, rank)); - rank++; - break; - } - } - } - } - titleResults.value = list; - }); - const docsResults = ref([]); - async function searchOnDocField(query) { - if (docSearchIndex) { - const list = []; - const raw = await docSearchIndex.search(query); - let rank = 0; - for (const field of raw) { - for (const id of field.result) { - const idMapData = docIdMap[id]; - if (!idMapData) - continue; - switch (idMapData.kind) { - case "story": { - list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs")); - rank++; - break; - } - } - } - } - docsResults.value = list; - } - } - watch(rateLimitedSearch, searchOnDocField); - function storyResultFactory(story, rank, type = "title") { - return { - kind: "story", - rank, - id: `story:${story.id}`, - title: story.title, - route: { - name: "story", - params: { - storyId: story.id - }, - query: { - ...type === "docs" ? { tab: "docs" } : {} - } - }, - path: story.file.path.slice(0, -1), - icon: story.icon, - iconColor: story.iconColor - }; - } - function variantResultFactory(story, variant, rank, type = "title") { - return { - kind: "variant", - rank, - id: `variant:${story.id}:${variant.id}`, - title: variant.title, - route: { - name: "story", - params: { - storyId: story.id - }, - query: { - variantId: variant.id, - ...type === "docs" ? { tab: "docs" } : {} - } - }, - path: [...story.file.path ?? [], story.title], - icon: variant.icon, - iconColor: variant.iconColor - }; - } - const commandResults = computed(() => { - return []; - }); - useCommandStore(); - const results = computed(() => { - const list = [ - ...commandResults.value, - ...titleResults.value - ]; - const seen = {}; - for (const r of titleResults.value) { - seen[r.id] = true; - } - for (const r of docsResults.value) { - if (!seen[r.id]) { - list.push(r); - } - } - return list; - }); - const { - selectedIndex, - selectNext, - selectPrevious - } = useSelection(results); - return (_ctx, _cache) => { - return openBlock(), createElementBlock(Fragment, null, [ - createBaseVNode("div", { - class: "histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500", - onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true) - }, [ - createVNode(unref(Icon), { - icon: "carbon:search", - class: "flex-none htw-w-4 htw-h-4" - }), - withDirectives(createBaseVNode("input", { - ref_key: "input", - ref: input, - "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event), - placeholder: "Search for stories, variants...", - class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none", - onKeydown: [ - _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])), - _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])), - _cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"])) - ] - }, null, 544), [ - [vModelText, searchInputText.value] - ]) - ]), - unref(rateLimitedSearch) && !unref(results).length ? (openBlock(), createBlock(BaseEmpty, { - key: 0, - class: "no-animation" - }, { - default: withCtx(() => [ - createTextVNode(" No results ") - ]), - _: 1 - })) : unref(results).length ? (openBlock(), createElementBlock("div", _hoisted_1, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(results), (result, index) => { - return openBlock(), createBlock(SearchItem, { - key: result.id, - result, - selected: index === unref(selectedIndex), - onClose: _cache[5] || (_cache[5] = ($event) => close()) - }, null, 8, ["result", "selected"]); - }), 128)) - ])) : createCommentVNode("", true) - ], 64); - }; - } -}); -export { - _sfc_main as default -}; diff --git a/.histoire/dist/assets/StoryView.vue-e7ab65e8.js b/.histoire/dist/assets/StoryView.vue-e7ab65e8.js deleted file mode 100644 index 6bee380..0000000 --- a/.histoire/dist/assets/StoryView.vue-e7ab65e8.js +++ /dev/null @@ -1,2653 +0,0 @@ -import { b as useRoute, c as computed, d as defineComponent, u as useCssVars, a as unref, aS as toRefs, r as ref, o as openBlock, e as createElementBlock, f as createVNode, w as withCtx, I as Icon, n as normalizeClass, g as createBaseVNode, t as toDisplayString, i as defineStore, j as useStorage, aT as unindent, A as resolveDirective, B as withDirectives, aU as useRouter, aV as useResizeObserver, v as histoireConfig, l as resolveComponent, q as createBlock, aW as Xg, h as createCommentVNode, L as normalizeStyle, s as isDark, aX as withModifiers, E as pushScopeId, G as popScopeId, k as watch, aY as renderSlot, m as withKeys, D as createTextVNode, F as Fragment, p as renderList, N as onMounted, aZ as vModelText, a_ as onUnmounted, a$ as VTooltip, b0 as createStaticVNode, y as useEventListener, W as SANDBOX_READY, b1 as EVENT_SEND, S as STATE_SYNC, X as applyState, U as PREVIEW_SETTINGS_SYNC, b2 as toRaw, aQ as mergeProps, b3 as Dropdown, b4 as clone, b5 as omit, b6 as useTimeoutFn, b7 as onClickOutside, z as isRef, b8 as nextTick, b9 as Zg, ba as zg, bb as jg, bc as Wg, aR as resolveDynamicComponent, K as reactive, aP as watchEffect, aO as markRaw, bd as shallowRef, be as getHighlighter, T as Transition, V as h, bf as onBeforeUnmount } from "./vendor-3ab3e533.js"; -import { u as useStoryStore } from "./story-804dabc9.js"; -import { u as useScrollOnActive, B as BaseListItemLink, _ as _export_sfc, i as isMobile, b as BaseSplitPane, a as _sfc_main$y } from "./MobileOverlay.vue2-a3503848.js"; -import { B as BaseEmpty } from "./BaseEmpty.vue-045cbb89.js"; -import { g as getContrastColor, _ as _sfc_main$x, t as toRawDeep } from "./state-4b1a79d2.js"; -import { c as clientSupportPlugins, b as base } from "./GenericMountStory.vue2-2bb5633d.js"; -import { useEventsStore } from "./events-ae5cec59.js"; -function useCurrentVariantRoute(variant) { - const route = useRoute(); - const isActive = computed(() => route.query.variantId === variant.value.id); - const targetRoute = computed(() => ({ - ...route, - query: { - ...route.query, - variantId: variant.value.id - } - })); - return { - isActive, - targetRoute - }; -} -const _hoisted_1$s = { class: "htw-truncate" }; -const _sfc_main$w = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantListItem", - props: { - variant: { - type: Object, - required: true - } - }, - setup(__props) { - const props = __props; - useCssVars((_ctx) => ({ - "89126aaa": unref(variant).iconColor - })); - const { variant } = toRefs(props); - const { isActive, targetRoute } = useCurrentVariantRoute(variant); - const el = ref(); - useScrollOnActive(isActive, el); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - ref_key: "el", - ref: el, - class: "histoire-story-variant-list-item", - "data-test-id": "story-variant-list-item" - }, [ - createVNode(BaseListItemLink, { - to: unref(targetRoute), - "is-active": unref(isActive), - class: "htw-px-2 htw-py-2 md:htw-py-1.5 htw-m-1 htw-rounded-sm htw-flex htw-items-center htw-gap-2" - }, { - default: withCtx(({ active }) => [ - createVNode(unref(Icon), { - icon: unref(variant).icon ?? "carbon:cube", - class: normalizeClass(["htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none", { - "htw-text-gray-500": !active && !unref(variant).iconColor, - "bind-icon-color": !active && unref(variant).iconColor - }]) - }, null, 8, ["icon", "class"]), - createBaseVNode("span", _hoisted_1$s, toDisplayString(unref(variant).title), 1) - ]), - _: 1 - }, 8, ["to", "is-active"]) - ], 512); - }; - } -}); -const StoryVariantListItem = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-ab890d9c"]]); -const usePreviewSettingsStore = defineStore("preview-settings", () => { - const currentSettings = useStorage("_histoire-sandbox-settings-v3", { - responsiveWidth: 720, - responsiveHeight: null, - rotate: false, - backgroundColor: "transparent", - checkerboard: false, - textDirection: "ltr" - }); - return { - currentSettings - }; -}); -async function getSourceCode(story, variant) { - var _a, _b, _c, _d; - if (variant.source) { - return variant.source; - } else if ((_a = variant.slots) == null ? void 0 : _a.call(variant).source) { - const source = (_b = variant.slots) == null ? void 0 : _b.call(variant).source()[0].children; - if (source) { - return unindent(source); - } - } else { - const clientPlugin = clientSupportPlugins[(_c = story.file) == null ? void 0 : _c.supportPluginId]; - if (clientPlugin) { - const pluginModule = await clientPlugin(); - return pluginModule.generateSourceCode(variant); - } - } - const sourceLoader = (_d = story.file) == null ? void 0 : _d.source; - if (sourceLoader) { - return (await sourceLoader()).default; - } -} -function getSandboxUrl(story, variant) { - const url = new URLSearchParams(); - url.append("storyId", story.id); - url.append("variantId", variant.id); - return `${base}__sandbox.html?${url.toString()}`; -} -const _hoisted_1$r = ["href"]; -const _sfc_main$v = /* @__PURE__ */ defineComponent({ - __name: "ToolbarNewTab", - props: { - variant: null, - story: null - }, - setup(__props) { - const props = __props; - const sandboxUrl = computed(() => { - return getSandboxUrl(props.story, props.variant); - }); - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return withDirectives((openBlock(), createElementBlock("a", { - href: unref(sandboxUrl), - target: "_blank", - class: "histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100" - }, [ - createVNode(unref(Icon), { - icon: "carbon:launch", - class: "htw-w-4 htw-h-4" - }) - ], 8, _hoisted_1$r)), [ - [_directive_tooltip, "Open variant in new tab"] - ]); - }; - } -}); -const _sfc_main$u = {}; -const _hoisted_1$q = { fill: "none" }; -const _hoisted_2$i = /* @__PURE__ */ createBaseVNode("pattern", { - id: "checkerboard", - width: "64", - height: "64", - patternUnits: "userSpaceOnUse" -}, [ - /* @__PURE__ */ createBaseVNode("rect", { - x: "0", - y: "0", - width: "32", - height: "32", - fill: "currentColor" - }), - /* @__PURE__ */ createBaseVNode("rect", { - x: "32", - y: "32", - width: "32", - height: "32", - fill: "currentColor" - }) -], -1); -const _hoisted_3$e = /* @__PURE__ */ createBaseVNode("rect", { - x: "0", - y: "0", - width: "100%", - height: "100%", - fill: "url(#checkerboard)" -}, null, -1); -const _hoisted_4$a = [ - _hoisted_2$i, - _hoisted_3$e -]; -function _sfc_render$4(_ctx, _cache) { - return openBlock(), createElementBlock("svg", _hoisted_1$q, _hoisted_4$a); -} -const CheckerboardPattern = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$4]]); -const _withScopeId$2 = (n) => (pushScopeId("data-v-cf76cd68"), n = n(), popScopeId(), n); -const _hoisted_1$p = { class: "htw-flex-none htw-flex htw-items-center" }; -const _hoisted_2$h = { class: "htw-truncate htw-flex-1" }; -const _hoisted_3$d = { class: "htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center" }; -const _hoisted_4$9 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createBaseVNode("div", { - class: "htw-absolute htw-inset-0 htw-rounded bind-preview-bg", - "data-test-id": "responsive-preview-bg" -}, null, -1)); -const _sfc_main$t = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantGridItem", - props: { - variant: { - type: Object, - required: true - }, - story: { - type: Object, - required: true - } - }, - emits: { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - resize: (width, height) => true - }, - setup(__props, { emit }) { - const props = __props; - useCssVars((_ctx) => ({ - "29d8c174": unref(variant).iconColor, - "0eff7465": unref(settings).backgroundColor - })); - const { variant } = toRefs(props); - const { isActive, targetRoute } = useCurrentVariantRoute(variant); - Object.assign(props.variant, { - previewReady: false - }); - function onReady() { - Object.assign(props.variant, { - previewReady: true - }); - } - const router = useRouter(); - function selectVariant() { - router.push(targetRoute.value); - } - const el = ref(); - const { autoScroll } = useScrollOnActive(isActive, el); - useResizeObserver(el, () => { - if (props.variant.previewReady) { - emit("resize", el.value.clientWidth, el.value.clientHeight); - if (isActive.value) { - autoScroll(); - } - } - }); - const settings = usePreviewSettingsStore().currentSettings; - const contrastColor = computed(() => getContrastColor(settings)); - const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor); - return (_ctx, _cache) => { - const _component_RouterLink = resolveComponent("RouterLink"); - const _directive_tooltip = resolveDirective("tooltip"); - return openBlock(), createElementBlock("div", { - ref_key: "el", - ref: el, - class: "histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group" - }, [ - createBaseVNode("div", _hoisted_1$p, [ - withDirectives((openBlock(), createBlock(_component_RouterLink, { - to: unref(targetRoute), - class: normalizeClass(["htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink", { - "hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800": !unref(isActive), - "htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200": unref(isActive) - }]) - }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: unref(variant).icon ?? "carbon:cube", - class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", { - "htw-text-gray-500": !unref(isActive) && !unref(variant).iconColor, - "bind-icon-color": !unref(isActive) && unref(variant).iconColor - }]) - }, null, 8, ["icon", "class"]), - createBaseVNode("span", _hoisted_2$h, toDisplayString(unref(variant).title), 1) - ]), - _: 1 - }, 8, ["to", "class"])), [ - [_directive_tooltip, unref(variant).title] - ]), - createBaseVNode("div", _hoisted_3$d, [ - createVNode(unref(Xg), { - content: () => unref(getSourceCode)(__props.story, unref(variant)) - }, null, 8, ["content"]), - createVNode(_sfc_main$v, { - variant: unref(variant), - story: __props.story - }, null, 8, ["variant", "story"]) - ]) - ]), - createBaseVNode("div", { - class: normalizeClass(["htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative", { - "htw-border-gray-100 dark:htw-border-gray-800": !unref(isActive), - "htw-border-primary-200 dark:htw-border-primary-900": unref(isActive) - }]), - "data-test-id": "sandbox-render", - onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectVariant(), ["stop"])), - onKeyup: _cache[1] || (_cache[1] = ($event) => selectVariant()) - }, [ - _hoisted_4$9, - unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, { - key: 0, - class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20" - })) : createCommentVNode("", true), - createBaseVNode("div", { - class: "htw-relative htw-h-full", - style: normalizeStyle({ - "--histoire-contrast-color": unref(contrastColor), - color: unref(autoApplyContrastColor) ? unref(contrastColor) : void 0 - }) - }, [ - (openBlock(), createBlock(_sfc_main$x, { - key: `${__props.story.id}-${unref(variant).id}`, - variant: unref(variant), - story: __props.story, - dir: unref(settings).textDirection, - class: normalizeClass({ - [unref(histoireConfig).theme.darkClass]: unref(isDark) - }), - onReady - }, null, 8, ["variant", "story", "dir", "class"])) - ], 4) - ], 34) - ], 512); - }; - } -}); -const StoryVariantGridItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-cf76cd68"]]); -const _hoisted_1$o = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" }; -const _hoisted_2$g = { - width: "16", - height: "16", - viewBox: "0 0 24 24", - class: "htw-relative htw-z-10" -}; -const _hoisted_3$c = ["stroke-dasharray", "stroke-dashoffset"]; -const _sfc_main$s = /* @__PURE__ */ defineComponent({ - __name: "BaseCheckbox", - props: { - modelValue: { - type: Boolean, - default: false - } - }, - emits: { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - "update:modelValue": (newValue) => true - }, - setup(__props, { emit }) { - const props = __props; - function toggle() { - emit("update:modelValue", !props.modelValue); - animationEnabled.value = true; - } - const path = ref(); - const dasharray = ref(0); - const progress = computed(() => props.modelValue ? 1 : 0); - const dashoffset = computed(() => (1 - progress.value) * dasharray.value); - const animationEnabled = ref(false); - watch(path, () => { - var _a, _b; - dasharray.value = ((_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) ?? 21.21; - }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - role: "checkbox", - tabindex: "0", - class: "histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", - onClick: _cache[0] || (_cache[0] = ($event) => toggle()), - onKeydown: [ - _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])), - _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"])) - ] - }, [ - createBaseVNode("div", _hoisted_1$o, [ - createBaseVNode("div", { - class: normalizeClass(["htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [ - __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150" - ]]) - }, null, 2), - (openBlock(), createElementBlock("svg", _hoisted_2$g, [ - createBaseVNode("path", { - ref_key: "path", - ref: path, - d: "m 4 12 l 5 5 l 10 -10", - fill: "none", - class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [ - animationEnabled.value ? "htw-transition-all" : "htw-transition-none", - { - "htw-delay-150": __props.modelValue - } - ]]), - "stroke-dasharray": dasharray.value, - "stroke-dashoffset": unref(dashoffset) - }, null, 10, _hoisted_3$c) - ])) - ]), - renderSlot(_ctx.$slots, "default") - ], 32); - }; - } -}); -const _hoisted_1$n = { class: "htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group" }; -const _hoisted_2$f = { class: "bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs" }; -const _hoisted_3$b = { key: 0 }; -const _hoisted_4$8 = { - class: "htw-flex htw-flex-col htw-items-stretch", - "data-test-id": "background-popper" -}; -const _hoisted_5$5 = ["onClick"]; -const _hoisted_6$4 = { class: "htw-mr-auto" }; -const _hoisted_7$3 = { class: "htw-ml-auto htw-opacity-70" }; -const _hoisted_8$2 = { key: 0 }; -const _sfc_main$r = /* @__PURE__ */ defineComponent({ - __name: "ToolbarBackground", - setup(__props) { - useCssVars((_ctx) => ({ - "627bec82": unref(settings).backgroundColor, - "35068428": unref(contrastColor) - })); - const settings = usePreviewSettingsStore().currentSettings; - const contrastColor = computed(() => getContrastColor(settings)); - return (_ctx, _cache) => { - const _component_VDropdown = resolveComponent("VDropdown"); - const _directive_tooltip = resolveDirective("tooltip"); - return unref(histoireConfig).backgroundPresets.length ? (openBlock(), createBlock(_component_VDropdown, { - key: 0, - placement: "bottom-end", - skidding: 6, - class: "histoire-toolbar-background htw-h-full htw-flex-none", - "data-test-id": "toolbar-background" - }, { - popper: withCtx(({ hide }) => [ - createBaseVNode("div", _hoisted_4$8, [ - createVNode(_sfc_main$s, { - modelValue: unref(settings).checkerboard, - "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).checkerboard = $event) - }, { - default: withCtx(() => [ - createTextVNode(" Checkerboard ") - ]), - _: 1 - }, 8, ["modelValue"]), - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(histoireConfig).backgroundPresets, (option, index) => { - return openBlock(), createElementBlock("button", { - key: index, - class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4", [ - unref(settings).backgroundColor === option.color ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700" - ]]), - onClick: ($event) => { - unref(settings).backgroundColor = option.color; - hide(); - } - }, [ - createBaseVNode("span", _hoisted_6$4, toDisplayString(option.label), 1), - option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ - createBaseVNode("span", _hoisted_7$3, toDisplayString(option.color), 1), - createBaseVNode("div", { - class: "htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/20 dark:htw-border-white/20 htw-flex htw-items-center htw-justify-center htw-text-xs", - style: normalizeStyle({ - backgroundColor: option.color, - color: option.contrastColor - }) - }, [ - option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8$2, "a")) : createCommentVNode("", true) - ], 4) - ], 64)) : createCommentVNode("", true) - ], 10, _hoisted_5$5); - }), 128)) - ]) - ]), - default: withCtx(() => [ - withDirectives((openBlock(), createElementBlock("div", _hoisted_1$n, [ - createBaseVNode("div", _hoisted_2$f, [ - unref(contrastColor) ? (openBlock(), createElementBlock("span", _hoisted_3$b, "a")) : createCommentVNode("", true) - ]), - createVNode(unref(Icon), { - icon: "carbon:caret-down", - class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100" - }) - ])), [ - [_directive_tooltip, "Background color"] - ]) - ]), - _: 1 - })) : createCommentVNode("", true); - }; - } -}); -const ToolbarBackground = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-c48fb2b2"]]); -const _sfc_main$q = /* @__PURE__ */ defineComponent({ - __name: "ToolbarTextDirection", - setup(__props) { - const settings = usePreviewSettingsStore().currentSettings; - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return withDirectives((openBlock(), createElementBlock("a", { - class: "histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", - onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr") - }, [ - createVNode(unref(Icon), { - icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular", - class: "htw-w-4 htw-h-4" - }, null, 8, ["icon"]) - ])), [ - [_directive_tooltip, `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}`] - ]); - }; - } -}); -const _hoisted_1$m = { class: "histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right" }; -const _hoisted_2$e = { - key: 0, - class: "htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1" -}; -const _hoisted_3$a = { class: "htw-flex htw-w-0 htw-flex-1 htw-mx-4" }; -const _sfc_main$p = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantGrid", - setup(__props) { - const storyStore = useStoryStore(); - const gridTemplateWidth = computed(() => { - if (storyStore.currentStory.layout.type !== "grid") { - return; - } - const layoutWidth = storyStore.currentStory.layout.width; - if (!layoutWidth) { - return "200px"; - } - if (typeof layoutWidth === "number") { - return layoutWidth + "px"; - } - return layoutWidth; - }); - const margin = 16; - const gap = 16; - const itemWidth = ref(16); - const maxItemHeight = ref(0); - const maxCount = ref(10); - const countPerRow = ref(0); - const visibleRows = ref(0); - const el = ref(null); - useResizeObserver(el, () => { - updateMaxCount(); - updateSize(); - }); - function updateMaxCount() { - if (!maxItemHeight.value) - return; - const width = el.value.clientWidth - margin * 2; - const height = el.value.clientHeight; - const scrollTop = el.value.scrollTop; - countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap)); - visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap)); - const newMaxCount = countPerRow.value * visibleRows.value; - if (maxCount.value < newMaxCount) { - maxCount.value = newMaxCount; - } - if (storyStore.currentVariant) { - const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant); - if (index + 1 > maxCount.value) { - maxCount.value = index + 1; - } - } - } - function onItemResize(w, h2) { - itemWidth.value = w; - if (maxItemHeight.value < h2) { - maxItemHeight.value = h2; - updateMaxCount(); - } - } - watch(() => storyStore.currentVariant, () => { - maxItemHeight.value = 0; - updateMaxCount(); - }); - const gridEl = ref(null); - const gridColumnWidth = ref(1); - const viewWidth = ref(1); - function updateSize() { - if (!el.value) - return; - viewWidth.value = el.value.clientWidth; - if (!gridEl.value) - return; - if (gridTemplateWidth.value.endsWith("%")) { - gridColumnWidth.value = viewWidth.value * parseInt(gridTemplateWidth.value) / 100 - gap; - } else { - gridColumnWidth.value = parseInt(gridTemplateWidth.value); - } - } - onMounted(() => { - updateSize(); - }); - useResizeObserver(gridEl, () => { - updateSize(); - }); - const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap)))); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$m, [ - !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$e, [ - createVNode(ToolbarBackground), - createVNode(_sfc_main$q), - createCommentVNode("", true) - ])) : createCommentVNode("", true), - createBaseVNode("div", { - ref_key: "el", - ref: el, - class: "htw-overflow-y-auto htw-flex htw-flex-1", - onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount()) - }, [ - createBaseVNode("div", _hoisted_3$a, [ - createBaseVNode("div", { - class: "htw-m-auto", - style: normalizeStyle({ - minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px` - }) - }, [ - createBaseVNode("div", { - ref_key: "gridEl", - ref: gridEl, - class: "htw-grid htw-gap-4 htw-my-4", - style: normalizeStyle({ - gridTemplateColumns: `repeat(${unref(columnCount)}, ${gridColumnWidth.value}px)` - }) - }, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants.slice(0, maxCount.value), (variant, index) => { - return openBlock(), createBlock(StoryVariantGridItem, { - key: index, - variant, - story: unref(storyStore).currentStory, - onResize: onItemResize - }, null, 8, ["variant", "story"]); - }), 128)) - ], 4) - ], 4) - ]) - ], 544) - ]); - }; - } -}); -const _hoisted_1$l = { class: "histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0" }; -const _sfc_main$o = /* @__PURE__ */ defineComponent({ - __name: "ToolbarTitle", - props: { - variant: null - }, - setup(__props) { - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$l, [ - createVNode(unref(Icon), { - icon: __props.variant.icon ?? "carbon:cube", - class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", [ - __props.variant.iconColor ? "bind-icon-color" : "htw-text-gray-500" - ]]) - }, null, 8, ["icon", "class"]), - createBaseVNode("span", null, toDisplayString(__props.variant.title), 1) - ]); - }; - } -}); -const _hoisted_1$k = { class: "htw-flex htw-flex-col htw-items-stretch" }; -const _hoisted_2$d = { class: "htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3" }; -const _hoisted_3$9 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-50" }, "×", -1); -const _hoisted_4$7 = ["onClick"]; -const _hoisted_5$4 = { class: "htw-ml-auto htw-opacity-70 htw-flex htw-gap-1" }; -const _hoisted_6$3 = { key: 0 }; -const _hoisted_7$2 = { key: 0 }; -const _hoisted_8$1 = { key: 1 }; -const _hoisted_9$1 = { key: 2 }; -const _hoisted_10 = { key: 0 }; -const _sfc_main$n = /* @__PURE__ */ defineComponent({ - __name: "ToolbarResponsiveSize", - setup(__props) { - const settings = usePreviewSettingsStore().currentSettings; - return (_ctx, _cache) => { - var _a; - const _component_VDropdown = resolveComponent("VDropdown"); - const _directive_tooltip = resolveDirective("tooltip"); - return openBlock(), createBlock(_component_VDropdown, { - placement: "bottom-end", - skidding: 6, - disabled: !((_a = unref(histoireConfig).responsivePresets) == null ? void 0 : _a.length), - class: "histoire-toolbar-responsive-size htw-h-full htw-flex-none" - }, { - popper: withCtx(({ hide }) => [ - createBaseVNode("div", _hoisted_1$k, [ - createVNode(_sfc_main$s, { - modelValue: unref(settings).rotate, - "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event) - }, { - default: withCtx(() => [ - createTextVNode(" Rotate ") - ]), - _: 1 - }, 8, ["modelValue"]), - createBaseVNode("div", _hoisted_2$d, [ - withDirectives(createBaseVNode("input", { - "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event), - type: "number", - class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0", - step: "16", - placeholder: "Auto" - }, null, 512), [ - [ - vModelText, - unref(settings).responsiveWidth, - void 0, - { number: true } - ], - [_directive_tooltip, "Responsive width (px)"] - ]), - _hoisted_3$9, - withDirectives(createBaseVNode("input", { - "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event), - type: "number", - class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0", - step: "16", - placeholder: "Auto" - }, null, 512), [ - [ - vModelText, - unref(settings).responsiveHeight, - void 0, - { number: true } - ], - [_directive_tooltip, "Responsive height (px)"] - ]) - ]), - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(histoireConfig).responsivePresets, (preset, index) => { - return openBlock(), createElementBlock("button", { - key: index, - class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4", [ - unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700" - ]]), - onClick: ($event) => { - unref(settings).responsiveWidth = preset.width; - unref(settings).responsiveHeight = preset.height; - hide(); - } - }, [ - createTextVNode(toDisplayString(preset.label) + " ", 1), - createBaseVNode("span", _hoisted_5$4, [ - preset.width ? (openBlock(), createElementBlock("span", _hoisted_6$3, [ - createTextVNode(toDisplayString(preset.width), 1), - !preset.height ? (openBlock(), createElementBlock("span", _hoisted_7$2, "px")) : createCommentVNode("", true) - ])) : createCommentVNode("", true), - preset.width && preset.height ? (openBlock(), createElementBlock("span", _hoisted_8$1, "x")) : createCommentVNode("", true), - preset.height ? (openBlock(), createElementBlock("span", _hoisted_9$1, [ - createTextVNode(toDisplayString(preset.height), 1), - !preset.width ? (openBlock(), createElementBlock("span", _hoisted_10, "px")) : createCommentVNode("", true) - ])) : createCommentVNode("", true) - ]) - ], 10, _hoisted_4$7); - }), 128)) - ]) - ]), - default: withCtx(() => { - var _a2; - return [ - withDirectives((openBlock(), createElementBlock("div", { - class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group", { - "htw-cursor-pointer hover:htw-text-primary-500": (_a2 = unref(histoireConfig).responsivePresets) == null ? void 0 : _a2.length - }]) - }, [ - createVNode(unref(Icon), { - icon: "carbon:devices", - class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100" - }), - createVNode(unref(Icon), { - icon: "carbon:caret-down", - class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100" - }) - ], 2)), [ - [_directive_tooltip, "Responsive sizes"] - ]) - ]; - }), - _: 1 - }, 8, ["disabled"]); - }; - } -}); -const _sfc_main$m = {}; -const _hoisted_1$j = { class: "__histoire-hatched-pattern" }; -function _sfc_render$3(_ctx, _cache) { - return openBlock(), createElementBlock("div", _hoisted_1$j); -} -const HatchedPattern = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$3], ["__scopeId", "data-v-91561117"]]); -const _withScopeId$1 = (n) => (pushScopeId("data-v-a83b1911"), n = n(), popScopeId(), n); -const _hoisted_1$i = { class: "histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden" }; -const _hoisted_2$c = { - key: 0, - class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden" -}; -const _hoisted_3$8 = { - class: "bind-preview-bg htw-rounded-lg htw-h-full", - "data-test-id": "responsive-preview-bg" -}; -const _hoisted_4$6 = { class: "htw-p-8 htw-h-full htw-relative" }; -const _hoisted_5$3 = { class: "htw-w-full htw-h-full htw-relative" }; -const _hoisted_6$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-absolute htw-inset-0" }, null, -1)); -const _hoisted_7$1 = /* @__PURE__ */ createStaticVNode('
', 8); -const _sfc_main$l = /* @__PURE__ */ defineComponent({ - __name: "StoryResponsivePreview", - props: { - variant: null - }, - setup(__props) { - const props = __props; - useCssVars((_ctx) => ({ - "03d1950e": unref(settings).backgroundColor - })); - const settings = usePreviewSettingsStore().currentSettings; - const resizing = ref(false); - const onUnmountedCleanupFns = []; - onUnmounted(() => { - onUnmountedCleanupFns.forEach((fn) => fn()); - }); - function addWindowListener(event, listener) { - window.addEventListener(event, listener); - const removeListener = () => window.removeEventListener(event, listener); - onUnmountedCleanupFns.push(removeListener); - return () => { - removeListener(); - onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1); - }; - } - function useDragger(el, value, min, max, axis) { - function onMouseDown(event) { - event.preventDefault(); - event.stopPropagation(); - const start = axis === "x" ? event.clientX : event.clientY; - const startValue = value.value ?? (axis === "x" ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70); - resizing.value = true; - const removeListeners = [ - addWindowListener("mousemove", onMouseMove), - addWindowListener("mouseup", onMouseUp) - ]; - function onMouseMove(event2) { - const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight; - const delta = (axis === "x" ? event2.clientX : event2.clientY) - start; - value.value = Math.max(min, Math.min(max, startValue + delta)); - if (Math.abs(value.value - (snapTarget - 67)) < 16) { - value.value = null; - } - } - function onMouseUp() { - removeListeners.forEach((fn) => fn()); - resizing.value = false; - } - } - useEventListener(el, "mousedown", onMouseDown); - function onTouchStart(event) { - event.preventDefault(); - event.stopPropagation(); - const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY; - const startValue = value.value; - resizing.value = true; - const removeListeners = [ - addWindowListener("touchmove", onTouchMove), - addWindowListener("touchend", onTouchEnd), - addWindowListener("touchcancel", onTouchEnd) - ]; - function onTouchMove(event2) { - const delta = (axis === "x" ? event2.touches[0].clientX : event2.touches[0].clientY) - start; - value.value = Math.max(min, Math.min(max, startValue + delta)); - } - function onTouchEnd() { - removeListeners.forEach((fn) => fn()); - resizing.value = false; - } - } - useEventListener(el, "touchstart", onTouchStart); - } - const responsiveWidth = computed({ - get: () => settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"], - set: (value) => { - settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"] = value; - } - }); - const responsiveHeight = computed({ - get: () => settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"], - set: (value) => { - settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"] = value; - } - }); - const horizontalDragger = ref(); - const verticalDragger = ref(); - const cornerDragger = ref(); - const previewWrapper = ref(); - useDragger(horizontalDragger, responsiveWidth, 32, 2e4, "x"); - useDragger(verticalDragger, responsiveHeight, 32, 2e4, "y"); - useDragger(cornerDragger, responsiveWidth, 32, 2e4, "x"); - useDragger(cornerDragger, responsiveHeight, 32, 2e4, "y"); - const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth); - const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight); - const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled); - const sizeTooltip = computed(() => (responsiveWidth.value ?? "Auto") + " × " + (responsiveHeight.value ?? "Auto")); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$i, [ - unref(isResponsiveEnabled) ? (openBlock(), createElementBlock("div", _hoisted_2$c, [ - createVNode(HatchedPattern, { class: "htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]" }) - ])) : createCommentVNode("", true), - createBaseVNode("div", { - ref_key: "previewWrapper", - ref: previewWrapper, - class: "htw-h-full htw-overflow-auto htw-relative" - }, [ - createBaseVNode("div", { - class: normalizeClass(["htw-h-full htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative", unref(isResponsiveEnabled) ? { - "htw-w-fit": !!unref(finalWidth), - "htw-h-fit": !!unref(finalHeight) - } : void 0]) - }, [ - createBaseVNode("div", _hoisted_3$8, [ - unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, { - key: 0, - class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20" - })) : createCommentVNode("", true), - createBaseVNode("div", _hoisted_4$6, [ - createBaseVNode("div", _hoisted_5$3, [ - _hoisted_6$2, - renderSlot(_ctx.$slots, "default", { - isResponsiveEnabled: unref(isResponsiveEnabled), - finalWidth: unref(finalWidth), - finalHeight: unref(finalHeight), - resizing: resizing.value - }, void 0, true) - ]), - _hoisted_7$1 - ]), - unref(isResponsiveEnabled) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [ - withDirectives((openBlock(), createElementBlock("div", { - ref_key: "horizontalDragger", - ref: horizontalDragger, - class: "htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500" - }, [ - createVNode(unref(Icon), { - icon: "mdi:drag-vertical-variant", - class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90" - }) - ])), [ - [ - unref(VTooltip), - unref(sizeTooltip), - void 0, - { right: true } - ] - ]), - withDirectives((openBlock(), createElementBlock("div", { - ref_key: "verticalDragger", - ref: verticalDragger, - class: "htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500" - }, [ - createVNode(unref(Icon), { - icon: "mdi:drag-horizontal-variant", - class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90" - }) - ])), [ - [ - unref(VTooltip), - unref(sizeTooltip), - void 0, - { bottom: true } - ] - ]), - withDirectives(createBaseVNode("div", { - ref_key: "cornerDragger", - ref: cornerDragger, - class: "htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500" - }, null, 512), [ - [ - unref(VTooltip), - unref(sizeTooltip), - void 0, - { bottom: true } - ] - ]) - ], 64)) : createCommentVNode("", true) - ]) - ], 2) - ], 512) - ]); - }; - } -}); -const StoryResponsivePreview = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-a83b1911"]]); -const _sfc_main$k = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantSinglePreviewNative", - props: { - story: null, - variant: null - }, - setup(__props) { - const props = __props; - Object.assign(props.variant, { - previewReady: false - }); - function onReady() { - Object.assign(props.variant, { - previewReady: true - }); - } - const settings = usePreviewSettingsStore().currentSettings; - const contrastColor = computed(() => getContrastColor(settings)); - const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor); - return (_ctx, _cache) => { - return openBlock(), createBlock(StoryResponsivePreview, { - class: "histoire-story-variant-single-preview-native", - variant: __props.variant - }, { - default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight }) => [ - createBaseVNode("div", { - style: normalizeStyle([ - isResponsiveEnabled ? { - width: finalWidth ? `${finalWidth}px` : "100%", - height: finalHeight ? `${finalHeight}px` : "100%" - } : { width: "100%", height: "100%" }, - { - "--histoire-contrast-color": unref(contrastColor), - color: unref(autoApplyContrastColor) ? unref(contrastColor) : void 0 - } - ]), - class: "htw-relative", - "data-test-id": "sandbox-render" - }, [ - (openBlock(), createBlock(_sfc_main$x, { - key: `${__props.story.id}-${__props.variant.id}`, - variant: __props.variant, - story: __props.story, - class: normalizeClass(["htw-h-full", { - [unref(histoireConfig).sandboxDarkClass]: unref(isDark), - // @TODO remove - [unref(histoireConfig).theme.darkClass]: unref(isDark) - }]), - dir: unref(settings).textDirection, - onReady - }, null, 8, ["variant", "story", "class", "dir"])) - ], 4) - ]), - _: 1 - }, 8, ["variant"]); - }; - } -}); -const _hoisted_1$h = ["src"]; -const _sfc_main$j = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantSinglePreviewRemote", - props: { - story: null, - variant: null - }, - setup(__props) { - const props = __props; - const settings = usePreviewSettingsStore().currentSettings; - const iframe = ref(); - function syncState() { - if (iframe.value && props.variant.previewReady) { - iframe.value.contentWindow.postMessage({ - type: STATE_SYNC, - state: toRawDeep(props.variant.state, true) - }); - } - } - let synced = false; - watch(() => props.variant.state, () => { - if (synced) { - synced = false; - return; - } - syncState(); - }, { - deep: true, - immediate: true - }); - Object.assign(props.variant, { - previewReady: false - }); - useEventListener(window, "message", (event) => { - switch (event.data.type) { - case STATE_SYNC: - updateVariantState(event.data.state); - break; - case EVENT_SEND: - logEvent(event.data.event); - break; - case SANDBOX_READY: - setPreviewReady(); - break; - } - }); - function updateVariantState(state) { - synced = true; - applyState(props.variant.state, state); - } - function logEvent(event) { - const eventsStore = useEventsStore(); - eventsStore.addEvent(event); - } - function setPreviewReady() { - Object.assign(props.variant, { - previewReady: true - }); - } - const sandboxUrl = computed(() => { - return getSandboxUrl(props.story, props.variant); - }); - const isIframeLoaded = ref(false); - watch(sandboxUrl, () => { - isIframeLoaded.value = false; - Object.assign(props.variant, { - previewReady: false - }); - }); - function syncSettings() { - if (iframe.value) { - iframe.value.contentWindow.postMessage({ - type: PREVIEW_SETTINGS_SYNC, - settings: toRaw(settings) - }); - } - } - watch(() => settings, () => { - syncSettings(); - }, { - deep: true, - immediate: true - }); - function onIframeLoad() { - isIframeLoaded.value = true; - syncState(); - syncSettings(); - } - return (_ctx, _cache) => { - return openBlock(), createBlock(StoryResponsivePreview, { - class: "histoire-story-variant-single-preview-remote", - variant: __props.variant - }, { - default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [ - createBaseVNode("iframe", { - ref_key: "iframe", - ref: iframe, - src: unref(sandboxUrl), - class: normalizeClass(["htw-w-full htw-h-full htw-relative", { - "htw-invisible": !isIframeLoaded.value, - "htw-pointer-events-none": resizing - }]), - style: normalizeStyle(isResponsiveEnabled ? { - width: finalWidth ? `${finalWidth}px` : null, - height: finalHeight ? `${finalHeight}px` : null - } : void 0), - "data-test-id": "preview-iframe", - onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad()) - }, null, 46, _hoisted_1$h) - ]), - _: 1 - }, 8, ["variant"]); - }; - } -}); -const _hoisted_1$g = { - class: "histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col", - "data-test-id": "story-variant-single-view" -}; -const _hoisted_2$b = { - key: 0, - class: "htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1" -}; -const _sfc_main$i = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantSingleView", - props: { - variant: null, - story: null - }, - setup(__props) { - return (_ctx, _cache) => { - var _b; - return openBlock(), createElementBlock("div", _hoisted_1$g, [ - !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$b, [ - createVNode(_sfc_main$o, { variant: __props.variant }, null, 8, ["variant"]), - !__props.variant.responsiveDisabled ? (openBlock(), createBlock(_sfc_main$n, { key: 0 })) : createCommentVNode("", true), - createVNode(ToolbarBackground), - createVNode(_sfc_main$q), - createVNode(_sfc_main$v, { - variant: __props.variant, - story: __props.story - }, null, 8, ["variant", "story"]), - createCommentVNode("", true) - ])) : createCommentVNode("", true), - ((_b = __props.story.layout) == null ? void 0 : _b.iframe) === false ? (openBlock(), createBlock(_sfc_main$k, { - key: 1, - story: __props.story, - variant: __props.variant - }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$j, { - key: 2, - story: __props.story, - variant: __props.variant - }, null, 8, ["story", "variant"])) - ]); - }; - } -}); -const _hoisted_1$f = { - key: 0, - class: "histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right" -}; -const _hoisted_2$a = { - key: 0, - class: "htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800 htw-h-full htw-flex htw-flex-col" -}; -const _hoisted_3$7 = { - key: 0, - class: "htw-p-2 htw-h-full" -}; -const _hoisted_4$5 = { class: "htw-h-full htw-overflow-y-auto" }; -const _hoisted_5$2 = { - key: 0, - class: "htw-p-2 htw-h-full __histoire-pane-shadow-from-right" -}; -const _sfc_main$h = /* @__PURE__ */ defineComponent({ - __name: "StoryVariantSingle", - emits: { - "open-variant-menu": () => true - }, - setup(__props) { - useCssVars((_ctx) => { - var _a; - return { - "4d25d048": (_a = unref(variant)) == null ? void 0 : _a.iconColor - }; - }); - const storyStore = useStoryStore(); - const hasSingleVariant = computed(() => { - var _a; - return ((_a = storyStore.currentStory) == null ? void 0 : _a.variants.length) === 1; - }); - const variant = computed(() => storyStore.currentVariant); - return (_ctx, _cache) => { - return unref(hasSingleVariant) && unref(variant) ? (openBlock(), createElementBlock("div", _hoisted_1$f, [ - createVNode(_sfc_main$i, { - variant: unref(variant), - story: unref(storyStore).currentStory - }, null, 8, ["variant", "story"]) - ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [ - unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$a, [ - createBaseVNode("a", { - class: "htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center htw-flex-none", - onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("open-variant-menu")) - }, [ - unref(variant) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ - createVNode(unref(Icon), { - icon: unref(variant).icon ?? "carbon:cube", - class: normalizeClass(["htw-w-5 htw-h-5 htw-flex-none", { - "htw-text-gray-500": !unref(variant).iconColor, - "bind-icon-color": unref(variant).iconColor - }]) - }, null, 8, ["icon", "class"]), - createTextVNode(" " + toDisplayString(unref(variant).title), 1) - ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [ - createTextVNode(" Select a variant... ") - ], 64)), - createVNode(unref(Icon), { - icon: "carbon:chevron-sort", - class: "htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto" - }) - ]), - unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_3$7, [ - createVNode(_sfc_main$i, { - variant: unref(storyStore).currentVariant, - story: unref(storyStore).currentStory - }, null, 8, ["variant", "story"]) - ])) : createCommentVNode("", true) - ])) : (openBlock(), createBlock(BaseSplitPane, { - key: 1, - "save-id": "story-single-main-split", - min: 5, - max: 40, - "default-split": 17 - }, { - first: withCtx(() => [ - createBaseVNode("div", _hoisted_4$5, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => { - return openBlock(), createBlock(StoryVariantListItem, { - key: index, - variant: v - }, null, 8, ["variant"]); - }), 128)) - ]) - ]), - last: withCtx(() => [ - unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_5$2, [ - createVNode(_sfc_main$i, { - variant: unref(storyStore).currentVariant, - story: unref(storyStore).currentStory - }, null, 8, ["variant", "story"]) - ])) : createCommentVNode("", true) - ]), - _: 1 - })) - ], 64)); - }; - } -}); -const StoryVariantSingle = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ddfc5b4f"]]); -const _hoisted_1$e = { class: "histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750" }; -const _sfc_main$g = /* @__PURE__ */ defineComponent({ - __name: "StoryViewer", - setup(__props) { - useCssVars((_ctx) => { - var _a; - return { - "663732b6": (_a = unref(variant)) == null ? void 0 : _a.iconColor - }; - }); - const storyStore = useStoryStore(); - const variant = computed(() => storyStore.currentVariant); - const isMenuOpened = ref(false); - function closeMenu() { - isMenuOpened.value = false; - } - watch(variant, () => { - isMenuOpened.value = false; - }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock(Fragment, null, [ - createBaseVNode("div", _hoisted_1$e, [ - unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(_sfc_main$p, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle, { - key: 1, - onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true) - })) : createCommentVNode("", true) - ]), - createVNode(_sfc_main$y, { - title: "Select a variant", - opened: isMenuOpened.value, - onClose: closeMenu - }, { - default: withCtx(() => [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => { - return openBlock(), createBlock(StoryVariantListItem, { - key: index, - variant: v - }, null, 8, ["variant"]); - }), 128)) - ]), - _: 1 - }, 8, ["opened"]) - ], 64); - }; - } -}); -const StoryViewer = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6046525f"]]); -const _hoisted_1$d = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" }; -const _hoisted_2$9 = { class: "htw-flex-1 htw-truncate" }; -const _hoisted_3$6 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" }; -const _hoisted_4$4 = ["onClick"]; -const _sfc_main$f = /* @__PURE__ */ defineComponent({ - __name: "BaseSelect", - props: { - modelValue: null, - options: null - }, - emits: ["update:modelValue", "select"], - setup(__props, { emit: emits }) { - const props = __props; - const formattedOptions = computed(() => { - if (Array.isArray(props.options)) { - return Object.fromEntries(props.options.map((value) => [value, value])); - } - return props.options; - }); - const selectedLabel = computed(() => formattedOptions.value[props.modelValue]); - function selectValue(value, hide) { - emits("update:modelValue", value); - emits("select", value); - hide(); - } - return (_ctx, _cache) => { - return openBlock(), createBlock(unref(Dropdown), { - class: "histoire-base-select", - "auto-size": "", - "auto-boundary-max-size": "" - }, { - popper: withCtx(({ hide }) => [ - createBaseVNode("div", _hoisted_3$6, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => { - return openBlock(), createElementBlock("div", mergeProps({ ..._ctx.$attrs, class: null, style: null }, { - key: label, - class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", { - "htw-bg-primary-200 dark:htw-bg-primary-800": props.modelValue === value - }], - onClick: ($event) => selectValue(value, hide) - }), [ - renderSlot(_ctx.$slots, "option", { - label, - value - }, () => [ - createTextVNode(toDisplayString(label), 1) - ]) - ], 16, _hoisted_4$4); - }), 128)) - ]) - ]), - default: withCtx(() => [ - createBaseVNode("div", _hoisted_1$d, [ - createBaseVNode("div", _hoisted_2$9, [ - renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [ - createTextVNode(toDisplayString(unref(selectedLabel)), 1) - ]) - ]), - createVNode(unref(Icon), { - icon: "carbon:chevron-sort", - class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto" - }) - ]) - ]), - _: 3 - }); - }; - } -}); -const _hoisted_1$c = { class: "histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center" }; -const _hoisted_2$8 = ["onUpdate:modelValue"]; -const _hoisted_3$5 = { - key: 1, - class: "htw-flex htw-items-center htw-gap-2" -}; -const _hoisted_4$3 = { class: "htw-flex-1 htw-truncate" }; -const _hoisted_5$1 = { class: "htw-flex htw-gap-2 htw-items-center" }; -const _hoisted_6$1 = { class: "htw-flex-1 htw-truncate" }; -const _sfc_main$e = /* @__PURE__ */ defineComponent({ - __name: "StatePresets", - props: { - story: null, - variant: null - }, - setup(__props) { - const props = __props; - const DEFAULT_ID = "default"; - const saveId = computed(() => `${props.story.id}:${props.variant.id}`); - const omitKeys = ["_hPropDefs"]; - const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys)); - const selectedOption = useStorage( - `_histoire-presets/${saveId.value}/selected`, - DEFAULT_ID - ); - const presetStates = useStorage( - `_histoire-presets/${saveId.value}/states`, - /* @__PURE__ */ new Map() - ); - const presetsOptions = computed(() => { - const options = { [DEFAULT_ID]: "Initial state" }; - presetStates.value.forEach((value, key) => { - options[key] = value.label; - }); - return options; - }); - function resetState() { - selectedOption.value = DEFAULT_ID; - applyState(props.variant.state, clone(defaultState)); - } - function applyPreset(id) { - if (id === DEFAULT_ID) { - resetState(); - } else if (presetStates.value.has(id)) { - applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state))); - } - } - onMounted(() => { - if (selectedOption.value !== DEFAULT_ID) { - applyPreset(selectedOption.value); - } - }); - const input = ref(); - const select = ref(); - const canEdit = computed(() => selectedOption.value !== DEFAULT_ID); - const isEditing = ref(false); - async function createPreset() { - const id = new Date().getTime().toString(); - presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: "New preset" }); - selectedOption.value = id; - isEditing.value = true; - await nextTick(); - input.value.select(); - } - const savedNotif = ref(false); - const savedTimeout = useTimeoutFn(() => { - savedNotif.value = false; - }, 1e3); - async function savePreset() { - if (!canEdit.value) - return; - const preset = presetStates.value.get(selectedOption.value); - preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys)); - savedNotif.value = true; - savedTimeout.start(); - } - function deletePreset(id) { - if (!confirm("Are you sure you want to delete this preset?")) { - return; - } - if (selectedOption.value === id) { - resetState(); - } - presetStates.value.delete(id); - } - async function startEditing() { - if (!canEdit.value) { - return; - } - isEditing.value = true; - await nextTick(); - input.value.select(); - } - function stopEditing() { - isEditing.value = false; - } - onClickOutside(select, stopEditing); - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return openBlock(), createElementBlock("div", _hoisted_1$c, [ - createBaseVNode("div", { - ref_key: "select", - ref: select, - class: "htw-flex-1 htw-min-w-0" - }, [ - createVNode(_sfc_main$f, { - modelValue: unref(selectedOption), - "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null), - options: unref(presetsOptions), - onDblclick: _cache[3] || (_cache[3] = ($event) => startEditing()), - onKeydown: [ - _cache[4] || (_cache[4] = withKeys(($event) => stopEditing(), ["enter"])), - _cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["escape"])) - ], - onSelect: _cache[6] || (_cache[6] = (id) => applyPreset(id)) - }, { - default: withCtx(({ label }) => [ - isEditing.value ? withDirectives((openBlock(), createElementBlock("input", { - key: 0, - ref_key: "input", - ref: input, - "onUpdate:modelValue": ($event) => unref(presetStates).get(unref(selectedOption)).label = $event, - type: "text", - class: "htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none", - onClick: _cache[0] || (_cache[0] = withModifiers(() => { - }, ["stop", "prevent"])) - }, null, 8, _hoisted_2$8)), [ - [vModelText, unref(presetStates).get(unref(selectedOption)).label] - ]) : (openBlock(), createElementBlock("div", _hoisted_3$5, [ - createBaseVNode("span", _hoisted_4$3, toDisplayString(label), 1), - unref(canEdit) ? withDirectives((openBlock(), createBlock(unref(Icon), { - key: 0, - icon: "carbon:edit", - class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", - onClick: _cache[1] || (_cache[1] = withModifiers(($event) => startEditing(), ["stop"])) - }, null, 512)), [ - [_directive_tooltip, "Rename this preset"] - ]) : createCommentVNode("", true) - ])) - ]), - option: withCtx(({ label, value }) => [ - createBaseVNode("div", _hoisted_5$1, [ - createBaseVNode("span", _hoisted_6$1, toDisplayString(label), 1), - value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), { - key: 0, - icon: "carbon:trash-can", - class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", - onClick: withModifiers(($event) => deletePreset(value), ["stop"]) - }, null, 8, ["onClick"])), [ - [_directive_tooltip, "Delete this preset"] - ]) : createCommentVNode("", true) - ]) - ]), - _: 1 - }, 8, ["modelValue", "options"]) - ], 512), - withDirectives(createVNode(unref(Icon), { - icon: savedNotif.value ? "carbon:checkmark" : "carbon:save", - class: normalizeClass(["htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", [ - unref(canEdit) ? "htw-opacity-50 hover:htw-opacity-100" : "htw-opacity-25 htw-pointer-events-none" - ]]), - onClick: _cache[7] || (_cache[7] = ($event) => savePreset()) - }, null, 8, ["icon", "class"]), [ - [_directive_tooltip, savedNotif.value ? "Saved!" : unref(canEdit) ? "Save to preset" : null] - ]), - withDirectives(createVNode(unref(Icon), { - icon: "carbon:add-alt", - class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", - onClick: _cache[8] || (_cache[8] = ($event) => createPreset()) - }, null, 512), [ - [_directive_tooltip, "Create new preset"] - ]), - withDirectives(createVNode(unref(Icon), { - icon: "carbon:reset", - class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", - onClick: _cache[9] || (_cache[9] = ($event) => resetState()) - }, null, 512), [ - [_directive_tooltip, "Reset to initial state"] - ]) - ]); - }; - } -}); -const _sfc_main$d = /* @__PURE__ */ defineComponent({ - __name: "ControlsComponentPropItem", - props: { - variant: null, - component: null, - definition: null - }, - setup(__props) { - const props = __props; - const comp = computed(() => { - var _a; - switch ((_a = props.definition.types) == null ? void 0 : _a[0]) { - case "string": - return Wg; - case "number": - return jg; - case "boolean": - return zg; - case "object": - default: - return Zg; - } - }); - const model = computed({ - get: () => { - var _a; - return (_a = props.variant.state._hPropState[props.component.index]) == null ? void 0 : _a[props.definition.name]; - }, - set: (value) => { - if (!props.variant.state._hPropState[props.component.index]) { - props.variant.state._hPropState[props.component.index] = {}; - } - props.variant.state._hPropState[props.component.index][props.definition.name] = value; - } - }); - function reset() { - if (props.variant.state._hPropState[props.component.index]) { - delete props.variant.state._hPropState[props.component.index][props.definition.name]; - } - } - const canReset = computed(() => { - var _a, _b; - return ((_b = (_a = props.variant.state) == null ? void 0 : _a._hPropState) == null ? void 0 : _b[props.component.index]) && props.definition.name in props.variant.state._hPropState[props.component.index]; - }); - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return unref(comp) ? (openBlock(), createBlock(resolveDynamicComponent(unref(comp)), { - key: 0, - modelValue: unref(model), - "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(model) ? model.value = $event : null), - class: "histoire-controls-component-prop-item", - title: `${__props.definition.name}${unref(canReset) ? " *" : ""}` - }, { - actions: withCtx(() => [ - withDirectives(createVNode(unref(Icon), { - icon: "carbon:erase", - class: normalizeClass(["htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", [ - unref(canReset) ? "htw-opacity-50 hover:htw-opacity-100" : "htw-opacity-25 htw-pointer-events-none" - ]]), - onClick: _cache[0] || (_cache[0] = withModifiers(($event) => reset(), ["stop"])) - }, null, 8, ["class"]), [ - [_directive_tooltip, "Remove override"] - ]) - ]), - _: 1 - }, 8, ["modelValue", "title"])) : createCommentVNode("", true); - }; - } -}); -const _hoisted_1$b = { class: "histoire-controls-component-props" }; -const _hoisted_2$7 = { class: "htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1" }; -const _hoisted_3$4 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, "<", -1); -const _hoisted_4$2 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, ">", -1); -const _sfc_main$c = /* @__PURE__ */ defineComponent({ - __name: "ControlsComponentProps", - props: { - variant: null, - definition: null - }, - setup(__props) { - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return openBlock(), createElementBlock("div", _hoisted_1$b, [ - createBaseVNode("div", _hoisted_2$7, [ - withDirectives(createVNode(unref(Icon), { - icon: "carbon:flash", - class: "htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none" - }, null, 512), [ - [_directive_tooltip, "Auto-detected props"] - ]), - createBaseVNode("div", null, [ - _hoisted_3$4, - createTextVNode(toDisplayString(__props.definition.name), 1), - _hoisted_4$2 - ]) - ]), - (openBlock(true), createElementBlock(Fragment, null, renderList(__props.definition.props, (prop) => { - return openBlock(), createBlock(_sfc_main$d, { - key: prop.name, - variant: __props.variant, - component: __props.definition, - definition: prop - }, null, 8, ["variant", "component", "definition"]); - }), 128)) - ]); - }; - } -}); -const _hoisted_1$a = { - "data-test-id": "story-controls", - class: "histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750" -}; -const _hoisted_2$6 = { class: "htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center" }; -const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("span", null, "No controls available for this story", -1); -const _hoisted_4$1 = { key: 2 }; -const _sfc_main$b = /* @__PURE__ */ defineComponent({ - __name: "StoryControls", - props: { - variant: { - type: Object, - required: true - }, - story: { - type: Object, - required: true - } - }, - setup(__props) { - const props = __props; - const ready = ref(false); - watch(() => props.variant, () => { - ready.value = false; - }); - const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls); - return (_ctx, _cache) => { - var _a, _b, _c, _d; - return openBlock(), createElementBlock("div", _hoisted_1$a, [ - createBaseVNode("div", _hoisted_2$6, [ - ready.value || !unref(hasCustomControls) ? (openBlock(), createBlock(_sfc_main$e, { - key: 0, - story: __props.story, - variant: __props.variant - }, null, 8, ["story", "variant"])) : createCommentVNode("", true) - ]), - unref(hasCustomControls) ? (openBlock(), createBlock(_sfc_main$x, { - key: `${__props.story.id}-${__props.variant.id}`, - "slot-name": "controls", - variant: __props.variant, - story: __props.story, - class: "__histoire-render-custom-controls htw-flex-none", - onReady: _cache[0] || (_cache[0] = ($event) => ready.value = true) - }, null, 8, ["variant", "story"])) : !((_b = (_a = __props.variant.state) == null ? void 0 : _a._hPropDefs) == null ? void 0 : _b.length) ? (openBlock(), createBlock(BaseEmpty, { key: 1 }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: "carbon:audio-console", - class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6" - }), - _hoisted_3$3 - ]), - _: 1 - })) : createCommentVNode("", true), - ((_d = (_c = __props.variant.state) == null ? void 0 : _c._hPropDefs) == null ? void 0 : _d.length) ? (openBlock(), createElementBlock("div", _hoisted_4$1, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(__props.variant.state._hPropDefs, (def, index) => { - return openBlock(), createBlock(_sfc_main$c, { - key: index, - variant: __props.variant, - definition: def, - class: "htw-flex-none htw-my-2" - }, null, 8, ["variant", "definition"]); - }), 128)) - ])) : createCommentVNode("", true) - ]); - }; - } -}); -const markdownFiles = reactive({}); -const _hoisted_1$9 = ["innerHTML"]; -function useStoryDoc(story) { - const renderedDoc = ref(""); - watchEffect(async () => { - var _a; - const mdKey = story.value.file.filePath.replace(/\.(\w*?)$/, ".md"); - if (markdownFiles[mdKey]) { - const md = await markdownFiles[mdKey](); - renderedDoc.value = md.html; - return; - } - let comp = (_a = story.value.file) == null ? void 0 : _a.component; - if (comp) { - if (comp.__asyncResolved) { - comp = comp.__asyncResolved; - } else if (comp.__asyncLoader) { - comp = await comp.__asyncLoader(); - } else if (typeof comp === "function") { - try { - comp = await comp(); - } catch (e) { - } - } - if (comp == null ? void 0 : comp.default) { - comp = comp.default; - } - renderedDoc.value = comp.doc; - } - }); - return { - renderedDoc - }; -} -const _sfc_main$a = /* @__PURE__ */ defineComponent({ - __name: "StoryDocs", - props: { - story: { - type: Object, - required: true - }, - standalone: { - type: Boolean, - default: false - } - }, - emits: ["scroll-top"], - setup(__props, { emit }) { - const props = __props; - const { story } = toRefs(props); - const { renderedDoc } = useStoryDoc(story); - const router = useRouter(); - const fakeHost = `http://a.com`; - function onClick(e) { - const link = e.target.closest("a"); - if (link && link.getAttribute("data-route") && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && link.target !== `_blank`) { - e.preventDefault(); - const url = new URL(link.href, fakeHost); - const targetHref = url.pathname + url.search + url.hash; - router.push(targetHref); - } - } - function getHash() { - const hash = location.hash; - if (histoireConfig.routerMode === "hash") { - const index = hash.indexOf("#", 1); - if (index !== -1) { - return hash.slice(index); - } else { - return void 0; - } - } - return hash; - } - async function scrollToAnchor() { - await nextTick(); - const hash = getHash(); - if (hash) { - const anchor = document.querySelector(decodeURIComponent(hash)); - if (anchor) { - anchor.scrollIntoView(); - return; - } - } - emit("scroll-top"); - } - watch(renderedDoc, () => { - scrollToAnchor(); - }, { - immediate: true - }); - const renderedEl = ref(); - const route = useRoute(); - async function patchAnchorLinks() { - await nextTick(); - if (histoireConfig.routerMode === "hash" && renderedEl.value) { - const links = renderedEl.value.querySelectorAll("a.header-anchor"); - for (const link of links) { - const href = link.getAttribute("href"); - if (href) { - link.setAttribute("href", `#${route.path + href}`); - } - } - } - } - watch(renderedDoc, () => { - patchAnchorLinks(); - }, { - immediate: true - }); - computed(() => { - var _a, _b; - return ((_a = story.value.file) == null ? void 0 : _a.docsFilePath) ?? (props.standalone && ((_b = story.value.file) == null ? void 0 : _b.filePath)); - }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - class: "histoire-story-docs", - onClickCapture: onClick - }, [ - createCommentVNode("", true), - !unref(renderedDoc) ? (openBlock(), createBlock(BaseEmpty, { key: 1 }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: "carbon:document-unknown", - class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6" - }), - createTextVNode(" No documentation available ") - ]), - _: 1 - })) : (openBlock(), createElementBlock("div", { - key: 2, - ref_key: "renderedEl", - ref: renderedEl, - class: "htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none", - "data-test-id": "story-docs", - innerHTML: unref(renderedDoc) - }, null, 8, _hoisted_1$9)) - ], 32); - }; - } -}); -const _hoisted_1$8 = { - key: 0, - class: "htw-text-xs htw-opacity-50 htw-truncate" -}; -const _hoisted_2$5 = { class: "htw-overflow-auto htw-max-w-[400px] htw-max-h-[400px]" }; -const _hoisted_3$2 = { class: "htw-p-4" }; -const _sfc_main$9 = /* @__PURE__ */ defineComponent({ - __name: "StoryEvent", - props: { - event: null - }, - setup(__props) { - const props = __props; - const formattedArgument = computed(() => { - switch (typeof props.event.argument) { - case "string": - return `"${props.event.argument}"`; - case "object": - return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`; - default: - return props.event.argument; - } - }); - return (_ctx, _cache) => { - const _component_VDropdown = resolveComponent("VDropdown"); - return openBlock(), createBlock(_component_VDropdown, { - class: "histoire-story-event htw-group", - placement: "right", - "data-test-id": "event-item" - }, { - default: withCtx(({ shown }) => [ - createBaseVNode("div", { - class: normalizeClass(["group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal", [ - shown ? "htw-bg-primary-50 dark:htw-bg-primary-600" : "group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40" - ]]) - }, [ - createBaseVNode("span", { - class: normalizeClass({ - "htw-text-primary-500": shown - }) - }, toDisplayString(__props.event.name), 3), - __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString(unref(formattedArgument)), 1)) : createCommentVNode("", true) - ], 2) - ]), - popper: withCtx(() => [ - createBaseVNode("div", _hoisted_2$5, [ - createBaseVNode("pre", _hoisted_3$2, toDisplayString(__props.event.argument), 1) - ]) - ]), - _: 1 - }); - }; - } -}); -const _hoisted_1$7 = { key: 1 }; -const _sfc_main$8 = /* @__PURE__ */ defineComponent({ - __name: "StoryEvents", - setup(__props) { - const eventsStore = useEventsStore(); - const hasEvents = computed(() => eventsStore.events.length); - onMounted(resetUnseen); - watch(() => eventsStore.unseen, resetUnseen); - async function resetUnseen() { - if (eventsStore.unseen > 0) { - eventsStore.unseen = 0; - } - await nextTick(); - eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight }); - } - const eventsElement = ref(); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", { - ref_key: "eventsElement", - ref: eventsElement, - class: "histoire-story-events" - }, [ - !unref(hasEvents) ? (openBlock(), createBlock(BaseEmpty, { key: 0 }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: "carbon:event-schedule", - class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6" - }), - createTextVNode(" No event fired ") - ]), - _: 1 - })) : (openBlock(), createElementBlock("div", _hoisted_1$7, [ - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(eventsStore).events, (event, key) => { - return openBlock(), createBlock(_sfc_main$9, { - key, - event - }, null, 8, ["event"]); - }), 128)) - ])) - ], 512); - }; - } -}); -const _withScopeId = (n) => (pushScopeId("data-v-1bdf9905"), n = n(), popScopeId(), n); -const _hoisted_1$6 = { class: "histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col" }; -const _hoisted_2$4 = { - key: 0, - class: "htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-500/5 htw-px-4 htw-flex htw-items-center htw-gap-2" -}; -const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-text-gray-900 dark:htw-text-gray-100" }, " Source ", -1)); -const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-flex-1" }, null, -1)); -const _hoisted_5 = { class: "htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2" }; -const _hoisted_6 = { - key: 1, - class: "htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm" -}; -const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("span", null, "Not available", -1)); -const _hoisted_8 = ["value"]; -const _hoisted_9 = ["innerHTML"]; -const _sfc_main$7 = /* @__PURE__ */ defineComponent({ - __name: "StorySourceCode", - props: { - story: null, - variant: null - }, - setup(__props) { - const props = __props; - const generateSourceCodeFn = ref(null); - watchEffect(async () => { - var _a; - const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId]; - if (clientPlugin) { - const pluginModule = await clientPlugin(); - generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode); - } - }); - const highlighter = shallowRef(); - const dynamicSourceCode = ref(""); - const error = ref(null); - watch(() => [props.variant, generateSourceCodeFn.value], async () => { - var _a, _b, _c, _d; - if (!generateSourceCodeFn.value) - return; - error.value = null; - dynamicSourceCode.value = ""; - try { - if (props.variant.source) { - dynamicSourceCode.value = props.variant.source; - } else if ((_b = (_a = props.variant).slots) == null ? void 0 : _b.call(_a).source) { - const source = (_d = (_c = props.variant).slots) == null ? void 0 : _d.call(_c).source()[0].children; - if (source) { - dynamicSourceCode.value = await unindent(source); - } - } else { - dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant); - } - } catch (e) { - console.error(e); - error.value = e.message; - } - if (!dynamicSourceCode.value) { - displayedSource.value = "static"; - } - }, { - deep: true, - immediate: true - }); - const staticSourceCode = ref(""); - watch(() => { - var _a, _b; - return [props.story, (_b = (_a = props.story) == null ? void 0 : _a.file) == null ? void 0 : _b.source]; - }, async () => { - var _a; - staticSourceCode.value = ""; - const sourceLoader = (_a = props.story.file) == null ? void 0 : _a.source; - if (sourceLoader) { - staticSourceCode.value = (await sourceLoader()).default; - } - }, { - immediate: true - }); - const displayedSource = ref("dynamic"); - const displayedSourceCode = computed(() => { - if (displayedSource.value === "dynamic") { - return dynamicSourceCode.value; - } - return staticSourceCode.value; - }); - onMounted(async () => { - highlighter.value = await getHighlighter({ - langs: [ - "html", - "jsx" - ], - themes: [ - "github-light", - "github-dark" - ] - }); - }); - const sourceHtml = computed(() => { - var _a; - return displayedSourceCode.value ? (_a = highlighter.value) == null ? void 0 : _a.codeToHtml(displayedSourceCode.value, { - lang: "html", - theme: isDark.value ? "github-dark" : "github-light" - }) : ""; - }); - let lastScroll = 0; - watch(() => props.variant, () => { - lastScroll = 0; - }); - const scroller = ref(); - function onScroll(event) { - if (sourceHtml.value) { - lastScroll = event.target.scrollTop; - } - } - watch(sourceHtml, async () => { - await nextTick(); - if (scroller.value) { - scroller.value.scrollTop = lastScroll; - } - }); - return (_ctx, _cache) => { - const _directive_tooltip = resolveDirective("tooltip"); - return openBlock(), createElementBlock("div", _hoisted_1$6, [ - !error.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [ - _hoisted_3$1, - _hoisted_4, - createBaseVNode("div", _hoisted_5, [ - withDirectives((openBlock(), createElementBlock("button", { - class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [ - displayedSource.value !== "dynamic" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400", - dynamicSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50" - ]]), - onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic")) - }, [ - createVNode(unref(Icon), { - icon: "carbon:flash", - class: "htw-w-4 htw-h-4 htw-flex-none" - }), - createBaseVNode("span", { - class: normalizeClass(["transition-opacity duration-300", { - "opacity-0": displayedSource.value !== "dynamic" - }]) - }, " Dynamic ", 2) - ], 2)), [ - [_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null] - ]), - withDirectives((openBlock(), createElementBlock("button", { - class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [ - displayedSource.value !== "static" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400", - staticSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50" - ]]), - onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static")) - }, [ - createVNode(unref(Icon), { - icon: "carbon:document", - class: "htw-w-4 htw-h-4 htw-flex-none" - }), - createBaseVNode("span", { - class: normalizeClass(["transition-opacity duration-300", { - "opacity-0": displayedSource.value !== "static" - }]) - }, " Static ", 2) - ], 2)), [ - [_directive_tooltip, !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null] - ]) - ]), - createVNode(unref(Xg), { - content: unref(displayedSourceCode), - class: "htw-flex-none" - }, null, 8, ["content"]) - ])) : createCommentVNode("", true), - error.value ? (openBlock(), createElementBlock("div", _hoisted_6, " Error: " + toDisplayString(error.value), 1)) : !unref(displayedSourceCode) ? (openBlock(), createBlock(BaseEmpty, { key: 2 }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: "carbon:code-hide", - class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6" - }), - _hoisted_7 - ]), - _: 1 - })) : !unref(sourceHtml) ? (openBlock(), createElementBlock("textarea", { - key: 3, - ref_key: "scroller", - ref: scroller, - class: "__histoire-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0", - value: unref(displayedSourceCode), - readonly: "", - "data-test-id": "story-source-code", - onScroll - }, null, 40, _hoisted_8)) : (openBlock(), createElementBlock("div", { - key: 4, - ref_key: "scroller", - ref: scroller, - class: "htw-w-full htw-h-full htw-overflow-auto", - "data-test-id": "story-source-code", - onScroll - }, [ - createBaseVNode("div", { - class: "__histoire-code htw-p-4 htw-w-fit", - innerHTML: unref(sourceHtml) - }, null, 8, _hoisted_9) - ], 544)) - ]); - }; - } -}); -const StorySourceCode = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-1bdf9905"]]); -const _sfc_main$6 = defineComponent({ - inheritAttrs: false, - props: { - exact: { - type: Boolean, - default: false - }, - matched: { - type: Boolean, - default: null - } - } -}); -const _hoisted_1$5 = ["href", "onClick"]; -const _hoisted_2$3 = { - key: 0, - class: "htw-absolute htw-bottom-0 htw-left-0 htw-w-full htw-h-[2px] htw-bg-primary-500 dark:htw-bg-primary-400" -}; -function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { - const _component_router_link = resolveComponent("router-link"); - return openBlock(), createBlock(_component_router_link, mergeProps({ class: "histoire-base-tab" }, _ctx.$attrs, { custom: "" }), { - default: withCtx(({ isActive, isExactActive, href, navigate }) => [ - createBaseVNode("a", mergeProps(_ctx.$attrs, { - href, - class: ["htw-px-4 htw-h-full htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", { - "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive - }], - onClick: navigate - }), [ - renderSlot(_ctx.$slots, "default"), - createVNode(Transition, { name: "__histoire-scale-x" }, { - default: withCtx(() => [ - (_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2$3)) : createCommentVNode("", true) - ]), - _: 2 - }, 1024) - ], 16, _hoisted_1$5) - ]), - _: 3 - }, 16); -} -const BaseTab = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$2]]); -const _hoisted_1$4 = { - role: "button", - class: "htw-cursor-pointer hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-w-8 htw-h-full htw-flex htw-items-center htw-justify-center htw-absolute htw-top-0 htw-right-0" -}; -const _hoisted_2$2 = { class: "htw-flex htw-flex-col htw-items-stretch" }; -const _sfc_main$5 = /* @__PURE__ */ defineComponent({ - __name: "BaseOverflowMenu", - setup(__props) { - const overflowButtonWidth = 32; - const el = ref(); - const availableWidth = ref(0); - useResizeObserver(el, (entries) => { - const containerWidth = entries[0].contentRect.width; - availableWidth.value = containerWidth - overflowButtonWidth; - }); - const children = ref(/* @__PURE__ */ new Map()); - const visibleChildrenCount = computed(() => { - let width = 0; - const c = [...children.value.values()].sort((a, b) => a.index - b.index); - for (let i = 0; i < c.length; i++) { - width += c[i].width; - if (width > availableWidth.value) { - return i; - } - } - return c.length; - }); - const ChildWrapper = { - name: "ChildWrapper", - props: ["index"], - setup(props, { slots }) { - const el2 = ref(); - const state = reactive({ width: 0, index: props.index }); - useResizeObserver(el2, (entries) => { - const width = entries[0].contentRect.width; - if (!children.value.has(el2.value)) { - children.value.set(el2.value, state); - } - state.width = width; - }); - onBeforeUnmount(() => { - children.value.delete(el2.value); - }); - const visible = computed(() => visibleChildrenCount.value > state.index); - return () => h("div", { ref: el2, style: { visibility: visible.value ? "visible" : "hidden" } }, slots.default()); - } - }; - const ChildrenRender = (props, { slots }) => { - const [fragment] = slots.default(); - return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode])); - }; - const ChildrenSlice = (props, { slots }) => { - const [fragment] = slots.default(); - return fragment.children.slice(props.start, props.end); - }; - return (_ctx, _cache) => { - const _component_VDropdown = resolveComponent("VDropdown"); - return openBlock(), createElementBlock("div", { - ref_key: "el", - ref: el, - class: "histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative" - }, [ - createVNode(ChildrenRender, null, { - default: withCtx(() => [ - renderSlot(_ctx.$slots, "default") - ]), - _: 3 - }), - unref(visibleChildrenCount) < children.value.size ? (openBlock(), createBlock(_component_VDropdown, { key: 0 }, { - popper: withCtx(() => [ - createBaseVNode("div", _hoisted_2$2, [ - createVNode(ChildrenSlice, { start: unref(visibleChildrenCount) }, { - default: withCtx(() => [ - renderSlot(_ctx.$slots, "overflow") - ]), - _: 3 - }, 8, ["start"]) - ]) - ]), - default: withCtx(() => [ - createBaseVNode("div", _hoisted_1$4, [ - createVNode(unref(Icon), { - icon: "carbon:caret-down", - class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100" - }) - ]) - ]), - _: 3 - })) : createCommentVNode("", true) - ], 512); - }; - } -}); -const _sfc_main$4 = defineComponent({ - inheritAttrs: false, - props: { - exact: { - type: Boolean, - default: false - }, - matched: { - type: Boolean, - default: null - } - } -}); -const _hoisted_1$3 = ["href", "onClick"]; -const _hoisted_2$1 = { - key: 0, - class: "htw-absolute htw-top-0 htw-left-0 htw-h-full htw-w-[2px] htw-bg-primary-500 dark:htw-bg-primary-400" -}; -function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { - const _component_router_link = resolveComponent("router-link"); - return openBlock(), createBlock(_component_router_link, mergeProps({ class: "histoire-base-overflow-tab" }, _ctx.$attrs, { custom: "" }), { - default: withCtx(({ isActive, isExactActive, href, navigate }) => [ - createBaseVNode("a", mergeProps(_ctx.$attrs, { - href, - class: ["htw-px-4 htw-h-10 htw-min-w-[150px] htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", { - "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive - }], - onClick: navigate - }), [ - renderSlot(_ctx.$slots, "default"), - createVNode(Transition, { name: "__histoire-scale-y" }, { - default: withCtx(() => [ - (_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("", true) - ]), - _: 2 - }, 1024) - ], 16, _hoisted_1$3) - ]), - _: 3 - }, 16); -} -const BaseOverflowTab = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]); -const _sfc_main$3 = {}; -const _hoisted_1$2 = { class: "histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black" }; -function _sfc_render(_ctx, _cache) { - return openBlock(), createElementBlock("span", _hoisted_1$2, [ - renderSlot(_ctx.$slots, "default") - ]); -} -const BaseTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]); -const _sfc_main$2 = /* @__PURE__ */ defineComponent({ - __name: "PaneTabs", - props: { - story: null, - variant: null - }, - setup(__props) { - const props = __props; - const { story } = toRefs(props); - const { renderedDoc } = useStoryDoc(story); - const eventsStore = useEventsStore(); - const hasEvents = computed(() => eventsStore.events.length); - return (_ctx, _cache) => { - return openBlock(), createBlock(_sfc_main$5, { class: "histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750" }, { - overflow: withCtx(() => [ - createVNode(BaseOverflowTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } }, - matched: !_ctx.$route.query.tab - }, { - default: withCtx(() => [ - createTextVNode(" Controls ") - ]), - _: 1 - }, 8, ["to", "matched"]), - createVNode(BaseOverflowTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } }, - matched: _ctx.$route.query.tab === "docs", - class: normalizeClass({ - "opacity-50": !unref(renderedDoc) - }) - }, { - default: withCtx(() => [ - createTextVNode(" Docs ") - ]), - _: 1 - }, 8, ["to", "matched", "class"]), - createVNode(BaseOverflowTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } }, - matched: _ctx.$route.query.tab === "events", - class: normalizeClass({ - "htw-opacity-50": !unref(hasEvents) - }) - }, { - default: withCtx(() => [ - createTextVNode(" Events "), - unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, { - default: withCtx(() => [ - createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1) - ]), - _: 1 - })) : createCommentVNode("", true) - ]), - _: 1 - }, 8, ["to", "matched", "class"]) - ]), - default: withCtx(() => [ - createVNode(BaseTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } }, - matched: !_ctx.$route.query.tab - }, { - default: withCtx(() => [ - createTextVNode(" Controls ") - ]), - _: 1 - }, 8, ["to", "matched"]), - createVNode(BaseTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } }, - matched: _ctx.$route.query.tab === "docs", - class: normalizeClass({ - "htw-opacity-50": !unref(renderedDoc) - }) - }, { - default: withCtx(() => [ - createTextVNode(" Docs ") - ]), - _: 1 - }, 8, ["to", "matched", "class"]), - createVNode(BaseTab, { - to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } }, - matched: _ctx.$route.query.tab === "events", - class: normalizeClass({ - "htw-opacity-50": !unref(hasEvents) - }) - }, { - default: withCtx(() => [ - createTextVNode(" Events "), - unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, { - default: withCtx(() => [ - createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1) - ]), - _: 1 - })) : createCommentVNode("", true) - ]), - _: 1 - }, 8, ["to", "matched", "class"]) - ]), - _: 1 - }); - }; - } -}); -const _hoisted_1$1 = /* @__PURE__ */ createBaseVNode("span", null, "Select a variant", -1); -const _hoisted_2 = /* @__PURE__ */ createBaseVNode("span", null, "Loading...", -1); -const _hoisted_3 = { class: "htw-flex htw-flex-col htw-h-full" }; -const _sfc_main$1 = /* @__PURE__ */ defineComponent({ - __name: "StorySidePanel", - setup(__props) { - const storyStore = useStoryStore(); - const route = useRoute(); - const panelContentComponent = computed(() => { - switch (route.query.tab) { - case "docs": - return _sfc_main$a; - case "events": - return _sfc_main$8; - default: - return _sfc_main$b; - } - }); - return (_ctx, _cache) => { - return !unref(storyStore).currentVariant ? (openBlock(), createBlock(BaseEmpty, { - key: 0, - class: "histoire-story-side-panel histoire-selection" - }, { - default: withCtx(() => [ - _hoisted_1$1 - ]), - _: 1 - })) : !unref(storyStore).currentVariant.configReady || !unref(storyStore).currentVariant.previewReady ? (openBlock(), createBlock(BaseEmpty, { - key: 1, - class: "histoire-story-side-panel histoire-loading" - }, { - default: withCtx(() => [ - _hoisted_2 - ]), - _: 1 - })) : (openBlock(), createBlock(BaseSplitPane, { - key: 2, - "save-id": "story-sidepane", - orientation: "portrait", - class: "histoire-story-side-panel histoire-loaded htw-h-full", - "data-test-id": "story-side-panel" - }, { - first: withCtx(() => [ - createBaseVNode("div", _hoisted_3, [ - createVNode(_sfc_main$2, { - story: unref(storyStore).currentStory, - variant: unref(storyStore).currentVariant - }, null, 8, ["story", "variant"]), - (openBlock(), createBlock(resolveDynamicComponent(unref(panelContentComponent)), { - story: unref(storyStore).currentStory, - variant: unref(storyStore).currentVariant, - class: "htw-h-full htw-overflow-auto" - }, null, 8, ["story", "variant"])) - ]) - ]), - last: withCtx(() => [ - createVNode(StorySourceCode, { - story: unref(storyStore).currentStory, - variant: unref(storyStore).currentVariant, - class: "htw-h-full" - }, null, 8, ["story", "variant"]) - ]), - _: 1 - })); - }; - } -}); -const _hoisted_1 = { - key: 1, - class: "histoire-story-view histoire-with-story htw-h-full" -}; -const _sfc_main = /* @__PURE__ */ defineComponent({ - __name: "StoryView", - setup(__props) { - const storyStore = useStoryStore(); - const router = useRouter(); - const route = useRoute(); - watch(() => storyStore.currentVariant, (value) => { - if (value) { - storyStore.currentStory.lastSelectedVariant = value; - } - }, { - immediate: true - }); - watch(() => [storyStore.currentStory, storyStore.currentVariant], () => { - var _a, _b; - if (!storyStore.currentVariant) { - if ((_a = storyStore.currentStory) == null ? void 0 : _a.lastSelectedVariant) { - setVariant(storyStore.currentStory.lastSelectedVariant.id); - return; - } - if (((_b = storyStore.currentStory) == null ? void 0 : _b.variants.length) === 1) { - setVariant(storyStore.currentStory.variants[0].id); - } - } - }, { - immediate: true - }); - function setVariant(variantId) { - router.replace({ - ...route, - query: { - ...route.query, - variantId - } - }); - } - const docsOnlyScroller = ref(null); - function scrollDocsToTop() { - var _a; - (_a = docsOnlyScroller.value) == null ? void 0 : _a.scrollTo(0, 0); - } - return (_ctx, _cache) => { - return !unref(storyStore).currentStory ? (openBlock(), createBlock(BaseEmpty, { - key: 0, - class: "histoire-story-view histoire-no-story" - }, { - default: withCtx(() => [ - createVNode(unref(Icon), { - icon: "carbon:software-resource-resource", - class: "htw-w-16 htw-h-16 htw-opacity-50" - }) - ]), - _: 1 - })) : (openBlock(), createElementBlock("div", _hoisted_1, [ - unref(storyStore).currentStory.docsOnly ? (openBlock(), createElementBlock("div", { - key: 0, - ref_key: "docsOnlyScroller", - ref: docsOnlyScroller, - class: "htw-h-full htw-overflow-auto" - }, [ - createVNode(_sfc_main$a, { - story: unref(storyStore).currentStory, - standalone: "", - class: "md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]", - onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop()) - }, null, 8, ["story"]) - ], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer, { key: 1 })) : (openBlock(), createBlock(BaseSplitPane, { - key: 2, - "save-id": "story-main", - min: 30, - max: 95, - "default-split": 75, - class: "htw-h-full" - }, { - first: withCtx(() => [ - createVNode(StoryViewer) - ]), - last: withCtx(() => [ - createVNode(_sfc_main$1) - ]), - _: 1 - })) - ])); - }; - } -}); -export { - _sfc_main as default -}; diff --git a/.histoire/dist/assets/__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js b/.histoire/dist/assets/__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js deleted file mode 100644 index 4bb3de4..0000000 --- a/.histoire/dist/assets/__resolved__virtual_story-source_src-lib-components-shipedit-propulsion-engine-story-svelte-42e8b729.js +++ /dev/null @@ -1,4 +0,0 @@ -const __resolved__virtual_storySource_srcLibComponentsShipeditPropulsionEngineStorySvelte = '\n \n\n\n + \ No newline at end of file diff --git a/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png index e55a852..1773dfc 100644 Binary files a/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-costmass-index-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-carrier-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-carrier-story-svelte-_default-1280x800.png new file mode 100644 index 0000000..bb30599 Binary files /dev/null and b/.histoire/screenshots/src-lib-components-shipedit-carrier-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-identification-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-identification-story-svelte-_default-1280x800.png new file mode 100644 index 0000000..bbee9c6 Binary files /dev/null and b/.histoire/screenshots/src-lib-components-shipedit-identification-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png index 027ca78..0b8cf6a 100644 Binary files a/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png index 1bb20db..e303a6b 100644 Binary files a/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipedit-propulsion-ftl-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png index 1e97d83..2647d0e 100644 Binary files a/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-story-svelte-_default-1280x800.png new file mode 100644 index 0000000..719a58e Binary files /dev/null and b/.histoire/screenshots/src-lib-components-shipedit-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-weaponry-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-weaponry-story-svelte-_default-1280x800.png new file mode 100644 index 0000000..f40d652 Binary files /dev/null and b/.histoire/screenshots/src-lib-components-shipedit-weaponry-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte-_default-1280x800.png new file mode 100644 index 0000000..8f3e036 Binary files /dev/null and b/.histoire/screenshots/src-lib-components-shipedit-weaponry-weapon-arcs-story-svelte-_default-1280x800.png differ diff --git a/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png index dda89fa..e85c75b 100644 Binary files a/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipitem-story-svelte-_default-1280x800.png differ diff --git a/package.json b/package.json index 13371ea..1fef999 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@reduxjs/toolkit": "^1.9.3", "@sveltejs/adapter-node": "^1.0.0-next.0", "@yanick/updeep-remeda": "^2.1.1", + "beercss": "^3.1.0", "chota": "^0.8.0", "effector": "^22.5.2", "histoire": "^0.15.9", diff --git a/src/histoire.setup.js b/src/histoire.setup.js index 51426a1..88a3b0f 100644 --- a/src/histoire.setup.js +++ b/src/histoire.setup.js @@ -1,3 +1,2 @@ //import "./lib/style/index.js"; -import "@picocss/pico"; -import "../static/global.css"; +import "./lib/style/index.js"; diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png index e55a852..1773dfc 100644 Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-1-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-10-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-10-snap.png new file mode 100644 index 0000000..e85c75b Binary files /dev/null and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-10-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png index 027ca78..bb30599 100644 Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-2-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png index 1bb20db..bbee9c6 100644 Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-3-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png index 1e97d83..0b8cf6a 100644 Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png index dda89fa..e303a6b 100644 Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-5-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png new file mode 100644 index 0000000..2647d0e Binary files /dev/null and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-7-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-7-snap.png new file mode 100644 index 0000000..719a58e Binary files /dev/null and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-7-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-8-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-8-snap.png new file mode 100644 index 0000000..f40d652 Binary files /dev/null and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-8-snap.png differ diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-9-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-9-snap.png new file mode 100644 index 0000000..8f3e036 Binary files /dev/null and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-9-snap.png differ diff --git a/src/lib/style/index.css b/src/lib/style/index.css index 75866d1..b6ead55 100644 --- a/src/lib/style/index.css +++ b/src/lib/style/index.css @@ -1,17 +1,115 @@ -:root { - --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +@import "/fonts/faktos.css"; +@import "/fonts/dosis/dosis.css"; - --font-scale-9: 0.75rem; - --font-scale-10: 1em; - --font-scale-11: 1.333rem; - --font-scale-12: 1.777rem; - --font-scale-13: 2.369rem; - --font-scale-14: 3.157rem; - --font-scale-15: 4.209rem; + @font-face { + font-family: "Faktos"; + font-style: normal; + src: url(/fonts/Faktos.ttf) format("truetype"); + } + @font-face { + font-family: "Dosis"; + src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype"); + } + +:root { + --font: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", + + --font-scale-9: 0.75rem; + --font-scale-10: 1rem; + --font-scale-11: 1.25rem; + --font-scale-12: 1.5rem; + --font-scale-13: 1.75rem; + --font-scale-14: 2.3125rem; + --font-scale-15: 3.0625rem; + + --oxford-blue: hsla(226, 60%, 10%, 1); + --royal-blue-dark: hsla(218, 100%, 16%, 1); + --indigo-dye: hsla(209, 95%, 24%, 1); + --cg-blue: hsla(193, 80%, 35%, 1); + --white: hsla(20, 60%, 99%, 1); + + --main-width: 60em; } input.short { - width: 5em !important; + width: 5em !important; } + + body { + position: relative; + width: 100%; + height: 100%; + background-color: var(--white); + color: #333; + margin: 0; + padding: 8px; + box-sizing: border-box; + } + + a { + color: rgb(0, 100, 200); + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + a:visited { + color: rgb(0, 80, 160); + } + + label { + display: block; + } + + input, + button, + select, + textarea { + font-family: inherit; + font-size: inherit; + padding: 0.4em; + margin: 0 0 0.5em 0; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 2px; + } + + input:disabled { + color: #ccc; + } + + input[type="range"] { + height: 0; + } + + /* input, */ + /* select { */ + /* border: 0px; */ + /* border-bottom: 1px solid var(--indigo-dye); */ + /* } */ + + input:focus, + select:focus { + border: 1px solid var(--indigo-dye); + } + + input:not([type="checkbox"]):not([type="radio"]) { + border: 0px; + border-bottom: 1px solid var(--indigo-dye); + border-radius: 0px; + height: calc( + 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1 + ); + padding: 0 0.5rem; + text-align: center; + } + +h1 { font-size: var(--font-scale-15); } +h2 { font-size: var(--font-scale-14); } +h3 { font-size: var(--font-scale-13); } +h4 { font-size: var(--font-scale-12); } diff --git a/src/lib/style/index.js b/src/lib/style/index.js index 68f9730..c1f59d1 100644 --- a/src/lib/style/index.js +++ b/src/lib/style/index.js @@ -1,5 +1,10 @@ -import "../../../static/fonts/faktos.css"; -import "../../../static/fonts/dosis/dosis.css"; -import "../../../static/global.css"; -import "@picocss/pico/css/pico.css"; +import "beercss/dist/cdn/beer.min.css"; +import "beercss/dist/cdn/material-symbols-outlined.woff2"; +import "beercss/dist/cdn/roboto-flex-cyrillic-ext.woff2"; +import "beercss/dist/cdn/roboto-flex-cyrillic.woff2"; +import "beercss/dist/cdn/roboto-flex-greek.woff2"; +import "beercss/dist/cdn/roboto-flex-latin-ext.woff2"; +import "beercss/dist/cdn/roboto-flex-latin.woff2"; +import "beercss/dist/cdn/roboto-flex-vietnamese.woff2"; + import "./index.css"; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..643ceee --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,88 @@ +
+ +
+
+ +

Welcome to the docks!

+ + + +

+ The Docks is a ship builder for the game + Full Thrust, with construction rules following the + + Cross Dimensions rules + + as closely as possible. +

+ +

+ The app is mostly developed for Firefox. I also check as much as I can that + I don't mess things too badly on Chrome. For the other browsers... caveat + emptor. +

+ +

+ Written by + + Yanick Champoux + . Code available on + + Github. +

+
+ + + + diff --git a/static/global.css b/static/global.css deleted file mode 100644 index 2d9a4fb..0000000 --- a/static/global.css +++ /dev/null @@ -1,123 +0,0 @@ - @font-face { - font-family: "Faktos"; - font-style: normal; - src: url(/fonts/Faktos.ttf) format("truetype"); - } - @font-face { - font-family: "Dosis"; - src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype"); - } - - :root { - --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - --font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - - --font-scale-9: 0.75rem; - --font-scale-10: 1em; - --font-scale-11: 1.333rem; - --font-scale-12: 1.777rem; - --font-scale-13: 2.369rem; - --font-scale-14: 3.157rem; - --font-scale-15: 4.209rem; - - --oxford-blue: hsla(226, 60%, 10%, 1); - --royal-blue-dark: hsla(218, 100%, 16%, 1); - --indigo-dye: hsla(209, 95%, 24%, 1); - --cg-blue: hsla(193, 80%, 35%, 1); - --white: hsla(20, 60%, 99%, 1); - - --main-width: 60em; - } - - input.short { - width: 5em !important; - } - - small { - font-size: var(--font-scale-9); - } - - h1 { - margin: 0px; - padding: 0px; - font-size: var(--font-scale-14); - } - - h2 { - font-size: var(--font-scale-12); - } - - body { - position: relative; - width: 100%; - height: 100%; - background-color: var(--white); - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - } - - a { - color: rgb(0, 100, 200); - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - a:visited { - color: rgb(0, 80, 160); - } - - label { - display: block; - } - - input, - button, - select, - textarea { - font-family: inherit; - font-size: inherit; - padding: 0.4em; - margin: 0 0 0.5em 0; - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; - } - - input:disabled { - color: #ccc; - } - - input[type="range"] { - height: 0; - } - - /* input, */ - /* select { */ - /* border: 0px; */ - /* border-bottom: 1px solid var(--indigo-dye); */ - /* } */ - - input:focus, - select:focus { - border: 1px solid var(--indigo-dye); - } - - input:not([type="checkbox"]):not([type="radio"]) { - border: 0px; - border-bottom: 1px solid var(--indigo-dye); - border-radius: 0px; - height: calc( - 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1 - ); - padding: 0 0.5rem; - text-align: center; - }