@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
156 lines (155 loc) • 6.09 kB
JavaScript
import "./kendo.core-B45DfgdW.js";
import "./kendo.icons.js";
import "./kendo.html.button.js";
//#region ../src/kendo.chainofthought.js
const __meta__ = {
id: "chainofthought",
name: "ChainOfThought",
category: "web",
description: "The ChainOfThought component.",
depends: [
"core",
"icons",
"html.button"
]
};
(function($, undefined) {
const kendo = window.kendo;
const Widget = kendo.ui.Widget;
const encode = kendo.htmlEncode;
const NS = ".kendoChainOfThought";
const EXPANDED_CHANGE = "expandedChange";
const ChainOfThought = Widget.extend({
init: function(element, options) {
const that = this;
Widget.fn.init.call(that, element, options);
that._render();
that._bindEvents();
kendo.notify(that);
},
options: {
name: "ChainOfThought",
label: null,
secondaryLabel: null,
svgIcon: "sparkles",
completed: false,
expanded: false,
expandable: false,
thoughts: [],
linesAdded: null,
linesRemoved: null,
thoughtTemplate: null
},
events: [EXPANDED_CHANGE],
_render: function() {
const that = this;
const opts = that.options;
that.element.addClass("k-agent-step k-chain-of-thought").toggleClass("k-agent-completed", !!opts.completed);
that.element.html(that._headHtml());
that._head = that.element.find(".k-agent-step-head");
that._head.find(".k-svg-icon").attr("aria-hidden", "true");
that._body = $(`<div class="k-agent-step-body"></div>`);
that._renderThoughts();
if (opts.expanded) that._body.appendTo(that.element);
},
_headHtml: function() {
const that = this;
const opts = that.options;
const headExpandedAttr = opts.expandable ? ` aria-expanded="${!!opts.expanded}"` : "";
const labelHtml = opts.label ? `<span class="k-agent-step-label">${encode(opts.label)}</span>` : "";
const secondaryHtml = opts.secondaryLabel ? `<span class="k-agent-step-sep">·</span><span class="k-agent-step-secondary">${encode(opts.secondaryLabel)}</span>` : "";
const deltaHtml = that._deltaHtml(opts.linesAdded, opts.linesRemoved);
const expandIconHtml = opts.expandable ? kendo.ui.icon({
icon: opts.expanded ? "chevron-up" : "chevron-right",
iconClass: "k-agent-step-expand"
}) : "";
return $(kendo.html.renderButton(`<button class="k-agent-step-head"${headExpandedAttr}><span class="k-agent-step-content">` + labelHtml + secondaryHtml + deltaHtml + expandIconHtml + "</span></button>", {
icon: opts.svgIcon,
iconClass: "k-agent-step-icon"
})).removeClass("k-button")[0].outerHTML;
},
_deltaHtml: function(added, removed) {
let html = "";
if (added !== null && added !== undefined) html += `<span class="k-agent-step-added">+${encode(String(added))}</span>`;
if (removed !== null && removed !== undefined) html += `<span class="k-agent-step-removed">-${encode(String(removed))}</span>`;
return html;
},
_renderThoughts: function() {
const that = this;
const opts = that.options;
const thoughts = opts.thoughts || [];
if (opts.thoughtTemplate !== null) {
const tmpl = opts.thoughtTemplate;
that._body.html(thoughts.map((t) => tmpl(t)).join(""));
} else {
that._body.html(thoughts.map((t) => that._thoughtHtml(t)).join(""));
that._body.find(".k-svg-icon").attr("aria-hidden", "true");
}
},
_thoughtHtml: function(thought) {
const iconColHtml = thought.svgIcon ? `<span class="k-agent-step-icon-col">${kendo.ui.icon({
icon: thought.svgIcon,
iconClass: "k-agent-step-icon"
})}</span>` : "";
const labelHtml = thought.label ? `<span class="k-agent-step-label">${encode(thought.label)}</span>` : "";
const secondaryHtml = thought.secondaryLabel ? `<span class="k-agent-step-sep">·</span><span class="k-agent-step-secondary">${encode(thought.secondaryLabel)}</span>` : "";
const deltaHtml = this._deltaHtml(thought.linesAdded, thought.linesRemoved);
const timeHtml = thought.time ? `<span class="k-agent-step-sep">·</span><span class="k-agent-step-secondary">${encode(thought.time)}</span>` : "";
const childrenHtml = thought.children ? `<div class="k-agent-step-body">${thought.children}</div>` : "";
return `<div class="k-thought${thought.completed ? " k-thought-completed" : ""}">` + iconColHtml + `<span class="k-agent-step-content">` + labelHtml + secondaryHtml + deltaHtml + timeHtml + childrenHtml + "</span></div>";
},
_bindEvents: function() {
const that = this;
if (!that.options.expandable) return;
that._head.on("click.kendoChainOfThought", that._onToggle.bind(that)).on("keydown.kendoChainOfThought", that._onKeydown.bind(that));
},
_onToggle: function() {
const that = this;
const expand = !that.options.expanded;
if (!that.trigger(EXPANDED_CHANGE, { expanded: expand })) that.toggle(expand);
},
_onKeydown: function(e) {
const that = this;
if (e.keyCode === kendo.keys.ENTER || e.keyCode === kendo.keys.SPACEBAR) {
that._onToggle();
e.preventDefault();
}
},
toggle: function(expand) {
const that = this;
if (expand === undefined) expand = !that.options.expanded;
that.options.expanded = expand;
if (that.options.expandable) {
that._head.attr("aria-expanded", expand);
const newIcon = $(kendo.ui.icon({
icon: expand ? "chevron-up" : "chevron-right",
iconClass: "k-agent-step-expand"
})).attr("aria-hidden", "true");
that._head.find(".k-agent-step-expand").replaceWith(newIcon);
}
if (expand) that._body.appendTo(that.element);
else that._body.detach();
},
expand: function() {
if (this.options.expandable) this.toggle(true);
},
collapse: function() {
this.toggle(false);
},
setThoughts: function(thoughts) {
const that = this;
that.options.thoughts = thoughts || [];
that._renderThoughts();
},
destroy: function() {
const that = this;
if (that._head) that._head.off(NS);
that.element.off(NS);
Widget.fn.destroy.call(that);
}
});
kendo.ui.plugin(ChainOfThought);
})(window.kendo.jQuery);
var kendo_chainofthought_default = kendo;
//#endregion
export { __meta__, kendo_chainofthought_default as default };