UNPKG

svelte-inline-edit

Version:
915 lines (840 loc) 25.9 kB
function noop() { } function assign(tar, src) { // @ts-ignore for (const k in src) tar[k] = src[k]; return tar; } function run(fn) { return fn(); } function blank_object() { return Object.create(null); } function run_all(fns) { fns.forEach(run); } function is_function(thing) { return typeof thing === 'function'; } function safe_not_equal(a, b) { return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); } function create_slot(definition, ctx, $$scope, fn) { if (definition) { const slot_ctx = get_slot_context(definition, ctx, $$scope, fn); return definition[0](slot_ctx); } } function get_slot_context(definition, ctx, $$scope, fn) { return definition[1] && fn ? assign($$scope.ctx.slice(), definition[1](fn(ctx))) : $$scope.ctx; } function get_slot_changes(definition, $$scope, dirty, fn) { if (definition[2] && fn) { const lets = definition[2](fn(dirty)); if (typeof $$scope.dirty === 'object') { const merged = []; const len = Math.max($$scope.dirty.length, lets.length); for (let i = 0; i < len; i += 1) { merged[i] = $$scope.dirty[i] | lets[i]; } return merged; } return $$scope.dirty | lets; } return $$scope.dirty; } function exclude_internal_props(props) { const result = {}; for (const k in props) if (k[0] !== '$') result[k] = props[k]; return result; } function append(target, node) { target.appendChild(node); } function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } function detach(node) { node.parentNode.removeChild(node); } function destroy_each(iterations, detaching) { for (let i = 0; i < iterations.length; i += 1) { if (iterations[i]) iterations[i].d(detaching); } } function element(name) { return document.createElement(name); } function text(data) { return document.createTextNode(data); } function space() { return text(' '); } function listen(node, event, handler, options) { node.addEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options); } function stop_propagation(fn) { return function (event) { event.stopPropagation(); // @ts-ignore return fn.call(this, event); }; } function self(fn) { return function (event) { // @ts-ignore if (event.target === this) fn.call(this, event); }; } function attr(node, attribute, value) { if (value == null) node.removeAttribute(attribute); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } function set_attributes(node, attributes) { // @ts-ignore const descriptors = Object.getOwnPropertyDescriptors(node.__proto__); for (const key in attributes) { if (attributes[key] == null) { node.removeAttribute(key); } else if (key === 'style') { node.style.cssText = attributes[key]; } else if (descriptors[key] && descriptors[key].set) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]); } } } function children(element) { return Array.from(element.childNodes); } function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } function custom_event(type, detail) { const e = document.createEvent('CustomEvent'); e.initCustomEvent(type, false, false, detail); return e; } let current_component; function set_current_component(component) { current_component = component; } function get_current_component() { if (!current_component) throw new Error(`Function called outside component initialization`); return current_component; } function createEventDispatcher() { const component = get_current_component(); return (type, detail) => { const callbacks = component.$$.callbacks[type]; if (callbacks) { // TODO are there situations where events could be dispatched // in a server (non-DOM) environment? const event = custom_event(type, detail); callbacks.slice().forEach(fn => { fn.call(component, event); }); } }; } const dirty_components = []; const binding_callbacks = []; const render_callbacks = []; const flush_callbacks = []; const resolved_promise = Promise.resolve(); let update_scheduled = false; function schedule_update() { if (!update_scheduled) { update_scheduled = true; resolved_promise.then(flush); } } function add_render_callback(fn) { render_callbacks.push(fn); } const seen_callbacks = new Set(); function flush() { do { // first, call beforeUpdate functions // and update components while (dirty_components.length) { const component = dirty_components.shift(); set_current_component(component); update(component.$$); } while (binding_callbacks.length) binding_callbacks.pop()(); // then, once components are updated, call // afterUpdate functions. This may cause // subsequent updates... for (let i = 0; i < render_callbacks.length; i += 1) { const callback = render_callbacks[i]; if (!seen_callbacks.has(callback)) { // ...so guard against infinite loops seen_callbacks.add(callback); callback(); } } render_callbacks.length = 0; } while (dirty_components.length); while (flush_callbacks.length) { flush_callbacks.pop()(); } update_scheduled = false; seen_callbacks.clear(); } function update($$) { if ($$.fragment !== null) { $$.update(); run_all($$.before_update); const dirty = $$.dirty; $$.dirty = [-1]; $$.fragment && $$.fragment.p($$.ctx, dirty); $$.after_update.forEach(add_render_callback); } } const outroing = new Set(); let outros; function group_outros() { outros = { r: 0, c: [], p: outros // parent group }; } function check_outros() { if (!outros.r) { run_all(outros.c); } outros = outros.p; } function transition_in(block, local) { if (block && block.i) { outroing.delete(block); block.i(local); } } function transition_out(block, local, detach, callback) { if (block && block.o) { if (outroing.has(block)) return; outroing.add(block); outros.c.push(() => { outroing.delete(block); if (callback) { if (detach) block.d(1); callback(); } }); block.o(local); } } function get_spread_update(levels, updates) { const update = {}; const to_null_out = {}; const accounted_for = { $$scope: 1 }; let i = levels.length; while (i--) { const o = levels[i]; const n = updates[i]; if (n) { for (const key in o) { if (!(key in n)) to_null_out[key] = 1; } for (const key in n) { if (!accounted_for[key]) { update[key] = n[key]; accounted_for[key] = 1; } } levels[i] = n; } else { for (const key in o) { accounted_for[key] = 1; } } } for (const key in to_null_out) { if (!(key in update)) update[key] = undefined; } return update; } function mount_component(component, target, anchor) { const { fragment, on_mount, on_destroy, after_update } = component.$$; fragment && fragment.m(target, anchor); // onMount happens before the initial afterUpdate add_render_callback(() => { const new_on_destroy = on_mount.map(run).filter(is_function); if (on_destroy) { on_destroy.push(...new_on_destroy); } else { // Edge case - component was destroyed immediately, // most likely as a result of a binding initialising run_all(new_on_destroy); } component.$$.on_mount = []; }); after_update.forEach(add_render_callback); } function destroy_component(component, detaching) { const $$ = component.$$; if ($$.fragment !== null) { run_all($$.on_destroy); $$.fragment && $$.fragment.d(detaching); // TODO null out other refs, including component.$$ (but need to // preserve final state?) $$.on_destroy = $$.fragment = null; $$.ctx = []; } } function make_dirty(component, i) { if (component.$$.dirty[0] === -1) { dirty_components.push(component); schedule_update(); component.$$.dirty.fill(0); } component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31)); } function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) { const parent_component = current_component; set_current_component(component); const prop_values = options.props || {}; const $$ = component.$$ = { fragment: null, ctx: null, // state props, update: noop, not_equal, bound: blank_object(), // lifecycle on_mount: [], on_destroy: [], before_update: [], after_update: [], context: new Map(parent_component ? parent_component.$$.context : []), // everything else callbacks: blank_object(), dirty }; let ready = false; $$.ctx = instance ? instance(component, prop_values, (i, ret, ...rest) => { const value = rest.length ? rest[0] : ret; if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) { if ($$.bound[i]) $$.bound[i](value); if (ready) make_dirty(component, i); } return ret; }) : []; $$.update(); ready = true; run_all($$.before_update); // `false` as a special case of no DOM component $$.fragment = create_fragment ? create_fragment($$.ctx) : false; if (options.target) { if (options.hydrate) { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.l(children(options.target)); } else { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.c(); } if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor); flush(); } set_current_component(parent_component); } class SvelteComponent { $destroy() { destroy_component(this, 1); this.$destroy = noop; } $on(type, callback) { const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = [])); callbacks.push(callback); return () => { const index = callbacks.indexOf(callback); if (index !== -1) callbacks.splice(index, 1); }; } $set() { // overridden by instance, if it has props } } /* src/InlineEdit.svelte generated by Svelte v3.18.0 */ function add_css() { var style = element("style"); style.id = "svelte-ox6l56-style"; style.textContent = "[class^=\"editable-\"].svelte-ox6l56.svelte-ox6l56{position:relative;display:inline-block;overflow:visible}[class^=\"editable-\"].svelte-ox6l56 div.svelte-ox6l56{position:absolute;overflow:visible}input.svelte-ox6l56.svelte-ox6l56,textarea.svelte-ox6l56.svelte-ox6l56,button.svelte-ox6l56.svelte-ox6l56{margin:0;resize:none}[readonly].svelte-ox6l56.svelte-ox6l56,button.svelte-ox6l56.svelte-ox6l56{border:none;background:transparent}button.svelte-ox6l56.svelte-ox6l56:hover{cursor:pointer}[readonly].svelte-ox6l56.svelte-ox6l56:hover{background:ghostwhite;cursor:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB60lEQVR42mNkIAHw8fFxycnJ9b1//37a06dPL4HEGEkxQEZGxkVERGQnkPnvz58/s1+8eFFHtAGamppFrKysIv/+/dvLzMzczMjIaAkUfkqUAeLi4kqSkpJXgUwmIH779+/fqv/////9/fs3D1EG6OrqrmNiYhID+tsd6IVSDg6OMqABl+/fv+9M0ABgoDkJCQntevPmjfmTJ0/OgsT09fXXAyml27dvG+E1gIuLi1lVVfU80Mmnr1y5kgwSk5aWNhYVFT0JjAm3hw8f7sNrgJqaWhbQkHagzWpAF7yE2n4E6PyXly5dCsYbjUBnCwKdf+vHjx/dN27c6AKJKSsrR/Ly8s4DRp82EN/Da4C2tvZEYLR53b17V/vz58+/QIlISUnpxq9fv5Zcu3atCqYOqwHAKNMCRt2Fjx8/hgNDej00HTSws7OnPnjwQP3Dhw9f8BoAjLYlwMQSDYzn6c+fP69kYWHhl5KSuv7ly5esO3fuLERWi9UALS2tuWxsbElQ7isgfgsMuM+3bt2y+P79+3+CBgADqxIYWG1IQv/evn1r/fjx4xPoahmBGcQPSDPDBIA2XODk5DQGprjVQO5fYNrfDQyLKcA434rNMkZgaIMUssAEgCE+++vXrzeABiS9e/duzuvXrx/gSysAfu/VCjmyfS4AAAAASUVORK5CYII=\"),\n text}[readonly].svelte-ox6l56.svelte-ox6l56:focus{outline:none}[class*=\"left\"].svelte-ox6l56 .svelte-ox6l56:not(:read-only){padding-left:60px}[class*=\"right\"].svelte-ox6l56 .svelte-ox6l56:not(:read-only){padding-right:60px}[class*=\"top\"].svelte-ox6l56 .svelte-ox6l56:not(:read-only){padding-top:30px}[class*=\"bottom\"].svelte-ox6l56 .svelte-ox6l56:not(:read-only){padding-bottom:30px}[class*=\"left\"].svelte-ox6l56 div.svelte-ox6l56{left:0}[class*=\"right\"].svelte-ox6l56 div.svelte-ox6l56{right:0}[class*=\"top\"].svelte-ox6l56 div.svelte-ox6l56{top:0}[class*=\"bottom\"].svelte-ox6l56 div.svelte-ox6l56{bottom:0}"; append(document.head, style); } const get_cancel_slot_changes = dirty => ({}); const get_cancel_slot_context = ctx => ({}); const get_save_slot_changes = dirty => ({}); const get_save_slot_context = ctx => ({}); function get_each_context(ctx, list, i) { const child_ctx = ctx.slice(); child_ctx[0] = list[i]; return child_ctx; } // (114:2) {:else} function create_else_block(ctx) { let input_1; let dispose; let input_1_levels = [ /*attrs*/ ctx[6], { readOnly: /*readonly*/ ctx[4] }, { value: /*value*/ ctx[0] }, { list: /*list*/ ctx[7] } ]; let input_1_data = {}; for (let i = 0; i < input_1_levels.length; i += 1) { input_1_data = assign(input_1_data, input_1_levels[i]); } return { c() { input_1 = element("input"); set_attributes(input_1, input_1_data); toggle_class(input_1, "svelte-ox6l56", true); }, m(target, anchor) { insert(target, input_1, anchor); /*input_1_binding*/ ctx[16](input_1); dispose = listen(input_1, "click", self(stop_propagation(/*edit*/ ctx[8]))); }, p(ctx, dirty) { set_attributes(input_1, get_spread_update(input_1_levels, [ dirty & /*attrs*/ 64 && /*attrs*/ ctx[6], dirty & /*readonly*/ 16 && { readOnly: /*readonly*/ ctx[4] }, dirty & /*value*/ 1 && { value: /*value*/ ctx[0] }, dirty & /*list*/ 128 && { list: /*list*/ ctx[7] } ])); toggle_class(input_1, "svelte-ox6l56", true); }, d(detaching) { if (detaching) detach(input_1); /*input_1_binding*/ ctx[16](null); dispose(); } }; } // (105:2) {#if rows > 1} function create_if_block_2(ctx) { let textarea; let dispose; let textarea_levels = [ /*attrs*/ ctx[6], { readOnly: /*readonly*/ ctx[4] }, { value: /*value*/ ctx[0] }, { rows: /*rows*/ ctx[3] }, { list: /*list*/ ctx[7] } ]; let textarea_data = {}; for (let i = 0; i < textarea_levels.length; i += 1) { textarea_data = assign(textarea_data, textarea_levels[i]); } return { c() { textarea = element("textarea"); set_attributes(textarea, textarea_data); toggle_class(textarea, "svelte-ox6l56", true); }, m(target, anchor) { insert(target, textarea, anchor); /*textarea_binding*/ ctx[15](textarea); dispose = listen(textarea, "click", self(stop_propagation(/*edit*/ ctx[8]))); }, p(ctx, dirty) { set_attributes(textarea, get_spread_update(textarea_levels, [ dirty & /*attrs*/ 64 && /*attrs*/ ctx[6], dirty & /*readonly*/ 16 && { readOnly: /*readonly*/ ctx[4] }, dirty & /*value*/ 1 && { value: /*value*/ ctx[0] }, dirty & /*rows*/ 8 && { rows: /*rows*/ ctx[3] }, dirty & /*list*/ 128 && { list: /*list*/ ctx[7] } ])); toggle_class(textarea, "svelte-ox6l56", true); }, d(detaching) { if (detaching) detach(textarea); /*textarea_binding*/ ctx[15](null); dispose(); } }; } // (124:2) {#if options.length} function create_if_block_1(ctx) { let datalist; let each_value = /*options*/ ctx[2]; let each_blocks = []; for (let i = 0; i < each_value.length; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c() { datalist = element("datalist"); for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } attr(datalist, "id", /*list*/ ctx[7]); attr(datalist, "class", "svelte-ox6l56"); }, m(target, anchor) { insert(target, datalist, anchor); for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(datalist, null); } }, p(ctx, dirty) { if (dirty & /*options*/ 4) { each_value = /*options*/ ctx[2]; let i; for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { each_blocks[i].p(child_ctx, dirty); } else { each_blocks[i] = create_each_block(child_ctx); each_blocks[i].c(); each_blocks[i].m(datalist, null); } } for (; i < each_blocks.length; i += 1) { each_blocks[i].d(1); } each_blocks.length = each_value.length; } if (dirty & /*list*/ 128) { attr(datalist, "id", /*list*/ ctx[7]); } }, d(detaching) { if (detaching) detach(datalist); destroy_each(each_blocks, detaching); } }; } // (126:6) {#each options as value} function create_each_block(ctx) { let option; let option_value_value; return { c() { option = element("option"); option.__value = option_value_value = /*value*/ ctx[0]; option.value = option.__value; attr(option, "class", "svelte-ox6l56"); }, m(target, anchor) { insert(target, option, anchor); }, p(ctx, dirty) { if (dirty & /*options*/ 4 && option_value_value !== (option_value_value = /*value*/ ctx[0])) { option.__value = option_value_value; } option.value = option.__value; }, d(detaching) { if (detaching) detach(option); } }; } // (132:2) {#if !readonly} function create_if_block(ctx) { let div; let button0; let t0; let t1; let button1; let t2; let current; let dispose; const save_slot_template = /*$$slots*/ ctx[14].save; const save_slot = create_slot(save_slot_template, ctx, /*$$scope*/ ctx[13], get_save_slot_context); const cancel_slot_template = /*$$slots*/ ctx[14].cancel; const cancel_slot = create_slot(cancel_slot_template, ctx, /*$$scope*/ ctx[13], get_cancel_slot_context); return { c() { div = element("div"); button0 = element("button"); if (!save_slot) { t0 = text("✓"); } if (save_slot) save_slot.c(); t1 = space(); button1 = element("button"); if (!cancel_slot) { t2 = text("✗"); } if (cancel_slot) cancel_slot.c(); attr(button0, "type", "button"); attr(button0, "class", "svelte-ox6l56"); attr(button1, "type", "button"); attr(button1, "class", "svelte-ox6l56"); attr(div, "class", "svelte-ox6l56"); }, m(target, anchor) { insert(target, div, anchor); append(div, button0); if (!save_slot) { append(button0, t0); } if (save_slot) { save_slot.m(button0, null); } append(div, t1); append(div, button1); if (!cancel_slot) { append(button1, t2); } if (cancel_slot) { cancel_slot.m(button1, null); } current = true; dispose = [ listen(button0, "click", /*save*/ ctx[10]), listen(button1, "click", /*cancel*/ ctx[9]) ]; }, p(ctx, dirty) { if (save_slot && save_slot.p && dirty & /*$$scope*/ 8192) { save_slot.p(get_slot_context(save_slot_template, ctx, /*$$scope*/ ctx[13], get_save_slot_context), get_slot_changes(save_slot_template, /*$$scope*/ ctx[13], dirty, get_save_slot_changes)); } if (cancel_slot && cancel_slot.p && dirty & /*$$scope*/ 8192) { cancel_slot.p(get_slot_context(cancel_slot_template, ctx, /*$$scope*/ ctx[13], get_cancel_slot_context), get_slot_changes(cancel_slot_template, /*$$scope*/ ctx[13], dirty, get_cancel_slot_changes)); } }, i(local) { if (current) return; transition_in(save_slot, local); transition_in(cancel_slot, local); current = true; }, o(local) { transition_out(save_slot, local); transition_out(cancel_slot, local); current = false; }, d(detaching) { if (detaching) detach(div); if (save_slot) save_slot.d(detaching); if (cancel_slot) cancel_slot.d(detaching); run_all(dispose); } }; } function create_fragment(ctx) { let t0; let div; let t1; let t2; let div_class_value; let current; let dispose; function select_block_type(ctx, dirty) { if (/*rows*/ ctx[3] > 1) return create_if_block_2; return create_else_block; } let current_block_type = select_block_type(ctx); let if_block0 = current_block_type(ctx); let if_block1 = /*options*/ ctx[2].length && create_if_block_1(ctx); let if_block2 = !/*readonly*/ ctx[4] && create_if_block(ctx); return { c() { t0 = space(); div = element("div"); if_block0.c(); t1 = space(); if (if_block1) if_block1.c(); t2 = space(); if (if_block2) if_block2.c(); attr(div, "class", div_class_value = "editable-" + /*position*/ ctx[1] + " svelte-ox6l56"); }, m(target, anchor) { insert(target, t0, anchor); insert(target, div, anchor); if_block0.m(div, null); append(div, t1); if (if_block1) if_block1.m(div, null); append(div, t2); if (if_block2) if_block2.m(div, null); current = true; dispose = listen(document.body, "click", /*cancel*/ ctx[9]); }, p(ctx, [dirty]) { if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) { if_block0.p(ctx, dirty); } else { if_block0.d(1); if_block0 = current_block_type(ctx); if (if_block0) { if_block0.c(); if_block0.m(div, t1); } } if (/*options*/ ctx[2].length) { if (if_block1) { if_block1.p(ctx, dirty); } else { if_block1 = create_if_block_1(ctx); if_block1.c(); if_block1.m(div, t2); } } else if (if_block1) { if_block1.d(1); if_block1 = null; } if (!/*readonly*/ ctx[4]) { if (if_block2) { if_block2.p(ctx, dirty); transition_in(if_block2, 1); } else { if_block2 = create_if_block(ctx); if_block2.c(); transition_in(if_block2, 1); if_block2.m(div, null); } } else if (if_block2) { group_outros(); transition_out(if_block2, 1, 1, () => { if_block2 = null; }); check_outros(); } if (!current || dirty & /*position*/ 2 && div_class_value !== (div_class_value = "editable-" + /*position*/ ctx[1] + " svelte-ox6l56")) { attr(div, "class", div_class_value); } }, i(local) { if (current) return; transition_in(if_block2); current = true; }, o(local) { transition_out(if_block2); current = false; }, d(detaching) { if (detaching) detach(t0); if (detaching) detach(div); if_block0.d(); if (if_block1) if_block1.d(); if (if_block2) if_block2.d(); dispose(); } }; } function instance($$self, $$props, $$invalidate) { const dispatch = createEventDispatcher(); let { position = "right" } = $$props, readonly = true, { options = [] } = $$props, { value = "" } = $$props, { rows = 1 } = $$props, input, attrs, list; // left, right, top-left, top-right, bottom-left, bottom-right function edit() { readonly && $$invalidate(4, readonly = false); dispatch("edit", input); } function cancel() { $$invalidate(5, input.value = value, input); $$invalidate(4, readonly = true); dispatch("cancel", input); } function save() { $$invalidate(0, value = input.value); $$invalidate(4, readonly = true); dispatch("save", input); } let { $$slots = {}, $$scope } = $$props; function textarea_binding($$value) { binding_callbacks[$$value ? "unshift" : "push"](() => { $$invalidate(5, input = $$value); }); } function input_1_binding($$value) { binding_callbacks[$$value ? "unshift" : "push"](() => { $$invalidate(5, input = $$value); }); } $$self.$set = $$new_props => { $$invalidate(12, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props))); if ("position" in $$new_props) $$invalidate(1, position = $$new_props.position); if ("options" in $$new_props) $$invalidate(2, options = $$new_props.options); if ("value" in $$new_props) $$invalidate(0, value = $$new_props.value); if ("rows" in $$new_props) $$invalidate(3, rows = $$new_props.rows); if ("$$scope" in $$new_props) $$invalidate(13, $$scope = $$new_props.$$scope); }; $$self.$$.update = () => { if ($$self.$$.dirty & /*options*/ 4) { options.length && $$invalidate(7, list = Date.now()); } { const { value, rows, position, options, ...other } = $$props; $$invalidate(6, attrs = other); } }; $$props = exclude_internal_props($$props); return [ value, position, options, rows, readonly, input, attrs, list, edit, cancel, save, dispatch, $$props, $$scope, $$slots, textarea_binding, input_1_binding ]; } class InlineEdit extends SvelteComponent { constructor(options) { super(); if (!document.getElementById("svelte-ox6l56-style")) add_css(); init(this, options, instance, create_fragment, safe_not_equal, { position: 1, options: 2, value: 0, rows: 3 }); } } export default InlineEdit;