+ 
+
- Save
+ Save
+
+ jump_to_element
+
+
+
+
+
+
+
diff --git a/src/ui/src/builder/settings/BuilderFieldsWriterResourceId.vue b/src/ui/src/builder/settings/BuilderFieldsWriterResourceId.vue
new file mode 100644
index 000000000..762073ea2
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderFieldsWriterResourceId.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index 13ab6facc..03e21940c 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -1,5 +1,5 @@
-
+
+ addCreate linked
+ workflow
+
+
addAdd custom handler
@@ -117,11 +125,13 @@ import WdsTextInput from "@/wds/WdsTextInput.vue";
import WdsButton from "@/wds/WdsButton.vue";
const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
+const wfbm = inject(injectionKeys.builderManager);
-const { setHandlerValue } = useComponentActions(wf, ssbm);
+const { createAndInsertComponent } = useComponentActions(wf, wfbm);
+
+const { setHandlerValue } = useComponentActions(wf, wfbm);
const component = computed(() =>
- wf.getComponentById(ssbm.firstSelectedId.value),
+ wf.getComponentById(wfbm.firstSelectedId.value),
);
const options = computed(() => {
@@ -233,7 +243,7 @@ function getCustomEventStubCode() {
# primitive properties (non-Object, non-function properties).
# If the event is instead an instance of CustomEvent,
-# it looks for a "payload" property inside the CustomEvent's "detail" property.
+# it looks for a "payload" property inside the CustomEvent's "detail" property.
def handle_keydown(state, payload):
print(payload) # Shows all the properties captured
@@ -321,6 +331,37 @@ const customHandlerModalCloseAction: ModalAction = {
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
+
+async function createLinkedWorkflow(refEventType: string) {
+ const { type } = component.value;
+ const { name } = wf.getComponentDefinition(type);
+ const workflowId = createAndInsertComponent(
+ "workflows_workflow",
+ "workflows_root",
+ undefined,
+ undefined,
+ (parentId) => {
+ createAndInsertComponent(
+ "workflows_uieventtrigger",
+ parentId,
+ undefined,
+ {
+ content: {
+ alias: `${name} - ${refEventType}`,
+ refComponentId: component.value.id,
+ refEventType,
+ },
+ x: 96,
+ y: 96,
+ },
+ );
+ },
+ );
+
+ wf.setActivePageId(workflowId);
+ wfbm.setMode("workflows");
+ wfbm.setSelection(workflowId);
+}
-
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
index 46baac28a..69edb18c1 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
@@ -9,6 +9,7 @@ const props = defineProps({
value: { validator: () => true, required: true },
useMarkdown: { type: Boolean, required: false },
editable: { type: Boolean, required: false },
+ wrapText: { type: Boolean, required: false },
});
defineEmits({
@@ -36,6 +37,7 @@ const component = computed(() => {
:value="value"
:use-markdown="useMarkdown"
:editable="editable"
+ :wrap-text="wrapText"
@change="$emit('change', $event)"
/>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
index 8ab3ac429..e68eb3df8 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
@@ -36,9 +36,13 @@ function onChange(event: InputEvent) {
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
index 63be29a91..24fab58a9 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
@@ -1,33 +1,22 @@
-
bolt
+ Events
@@ -30,7 +30,15 @@ />
-
-
- , required: true },
row: { type: Object, required: true },
@@ -45,6 +73,7 @@ const props = defineProps({
type: Object as PropType>,
required: true,
},
+ displayShadowOnSticky: { type: Boolean },
});
defineEmits({
@@ -56,6 +85,10 @@ defineEmits({
typeof index === "number" && typeof action === "string",
});
+const root = ref();
+
+const hasFocusWithin = useFocusWithin(root);
+
const isRowHovered = ref(false);
const hasActions = computed(() => Object.keys(props.actions || {}).length > 0);
@@ -63,14 +96,70 @@ const hasActions = computed(() => Object.keys(props.actions || {}).length > 0);
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
deleted file mode 100644
index 90e712685..000000000
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ /dev/null
@@ -1,661 +0,0 @@
-
- = ref(fields.startCollapsed.value == "yes");
+const isCollapsed: Ref = ref(fields.startCollapsed.value);
const wf = inject(injectionKeys.core);
const ssbm = inject(injectionKeys.builderManager);
const componentId = inject(injectionKeys.componentId);
diff --git a/src/ui/src/components/core/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
index 28efff027..836ff9ace 100644
--- a/src/ui/src/components/core/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -18,7 +18,7 @@
:disabled="!isBeingEdited"
:class="{
active: isStepActive,
- completed: fields.isCompleted.value == 'yes',
+ completed: fields.isCompleted.value,
}"
stepindex="0"
@click="activateStep"
@@ -28,11 +28,11 @@
+
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
index 88ae5f4c8..6c7e9d448 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
@@ -4,6 +4,7 @@ import { computed } from "vue";
const props = defineProps({
value: { validator: () => true, required: true },
+ wrapText: { type: Boolean, required: false },
});
const text = computed(() => JSON.stringify(props.value, bigIntReplacer));
@@ -11,15 +12,25 @@ const text = computed(() => JSON.stringify(props.value, bigIntReplacer));
+ {{ value }} +
- {{ text }}
+
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
index 9374b197d..36dbaa059 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
@@ -1,30 +1,56 @@
+ {{ text }} +
-
@@ -33,9 +59,11 @@ import { computed, PropType, ref } from "vue";
import CoreDataframeCell from "./CoreDataframeCell.vue";
import BaseDropdown from "../../base/BaseDropdown.vue";
import { ARQUERO_INTERNAL_ID } from "./constants";
+import { useFocusWithin } from "@/composables/useFocusWithin";
const props = defineProps({
showIndex: { type: Boolean, required: false },
+ wrapText: { type: Boolean, required: false },
indexText: { type: [Number, String], required: true },
columns: { type: Array as PropType
-
+
+ {{ indexText }}
- {{ indexText }}
-
-
-
-
-
-
-
-
diff --git a/src/ui/src/components/core/content/CoreImage.vue b/src/ui/src/components/core/content/CoreImage.vue
index c78d84739..0b0edbe6b 100644
--- a/src/ui/src/components/core/content/CoreImage.vue
+++ b/src/ui/src/components/core/content/CoreImage.vue
@@ -89,10 +89,10 @@ export default {
+
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 946ec7369..1b1511178 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -75,7 +75,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from "vue";
import injectionKeys from "@/injectionKeys";
const fields = inject(injectionKeys.evaluatedFields);
-const isCollapsed: Ref
-
- download
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ columnName }}
-
-
-
- arrow_downward
-
-
- arrow_upward
-
-
-
-
-
- {{ slicedTable.indices[rowNumber] }}
-
-
- {{ indexColumnNames.map((c) => row[c]).join(", ") }}
-
-
-
-
-
-
- {{ row[columnName] }}
-
-
-
-
done
@@ -72,6 +72,7 @@ import {
contentHAlign,
cssClasses,
contentPadding,
+ baseYesNoField,
} from "@/renderer/sharedStyleFields";
import { onBeforeUnmount } from "vue";
@@ -97,14 +98,10 @@ export default {
default: "16px",
},
isCompleted: {
+ ...baseYesNoField,
name: "Completed",
desc: "Use a state reference to dynamically mark this step as complete.",
default: "no",
- type: FieldType.Text,
- options: {
- yes: "Yes",
- no: "No",
- },
},
contentHAlign,
cssClasses,
@@ -203,7 +200,7 @@ function activateNextStep() {
const subsequentSteps = stepContainerData.value.steps.slice(
currentStepIndex + 1,
);
- let nextStep = subsequentSteps.find((step) => step.isCompleted != "yes");
+ let nextStep = subsequentSteps.find((step) => !step.isCompleted);
if (!nextStep) {
const lastStep = stepContainerData.value.steps.at(-1);
nextStep = lastStep;
@@ -222,7 +219,7 @@ function checkIfStepIsParent(childId: Component["id"]): boolean {
}
function activateDefaultStep() {
- if (fields.isCompleted.value != "yes") {
+ if (!fields.isCompleted.value) {
activateStep();
return;
}
@@ -270,7 +267,7 @@ Prevent a step of being active while completed.
watch([isStepActive, fields.isCompleted], () => {
if (isBeingEdited.value) return;
if (!isStepActive.value) return;
- if (fields.isCompleted.value == "yes") {
+ if (fields.isCompleted.value) {
activateNextStep();
}
});
@@ -278,9 +275,9 @@ watch([isStepActive, fields.isCompleted], () => {
/*
Activate any step that was previously complete but switched to non-completed.
*/
-watch(fields.isCompleted, (value: string, oldValue: string) => {
- if (oldValue !== "yes") return;
- if (value !== "no") return;
+watch(fields.isCompleted, (value: boolean, oldValue: boolean) => {
+ if (!oldValue) return;
+ if (value) return;
activateDefaultStep();
});
diff --git a/src/ui/src/components/core/other/CoreButton.vue b/src/ui/src/components/core/other/CoreButton.vue
index 8d572f697..9f5bf0d1e 100644
--- a/src/ui/src/components/core/other/CoreButton.vue
+++ b/src/ui/src/components/core/other/CoreButton.vue
@@ -25,6 +25,7 @@ import {
buttonShadow,
separatorColor,
cssClasses,
+ baseYesNoField,
} from "@/renderer/sharedStyleFields";
import { watch } from "vue";
import { getClick } from "@/renderer/syntheticEvents";
@@ -57,13 +58,9 @@ export default {
type: FieldType.Text,
},
isDisabled: {
+ ...baseYesNoField,
name: "Disabled",
default: "no",
- type: FieldType.Text,
- options: {
- yes: "Yes",
- no: "No",
- },
desc: "Disables all event handlers.",
},
buttonColor,
@@ -92,8 +89,8 @@ const isDisabled = inject(injectionKeys.isDisabled);
watch(
fields.isDisabled,
- (newFieldValue: string) => {
- isDisabled.value = newFieldValue == "yes";
+ (newFieldValue: boolean) => {
+ isDisabled.value = newFieldValue;
},
{
immediate: true,
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index b27b44245..bcac48baa 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -74,6 +74,7 @@
diff --git a/src/ui/src/wds/WdsCheckbox.vue b/src/ui/src/wds/WdsCheckbox.vue
new file mode 100644
index 000000000..db1c128c9
--- /dev/null
+++ b/src/ui/src/wds/WdsCheckbox.vue
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
diff --git a/src/ui/src/wds/WdsDropdownMenu.spec.ts b/src/ui/src/wds/WdsDropdownMenu.spec.ts
new file mode 100644
index 000000000..d9ce5b663
--- /dev/null
+++ b/src/ui/src/wds/WdsDropdownMenu.spec.ts
@@ -0,0 +1,49 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import WdsDropdownMenu from "./WdsDropdownMenu.vue";
+import { WdsDropdownMenuOption } from "./WdsDropdownMenu.vue";
+
+describe("WdsDropdownMenu", () => {
+ const options: WdsDropdownMenuOption[] = [
+ { label: "Label A", value: "a" },
+ { label: "Label B", value: "b" },
+ { label: "Label C", value: "c" },
+ ];
+
+ describe("single mode", () => {
+ it("should select an option", async () => {
+ const wrapper = shallowMount(WdsDropdownMenu, {
+ props: {
+ selected: "a",
+ enableMultiSelection: false,
+ options,
+ },
+ });
+
+ await wrapper
+ .get(`.WdsDropdownMenu__item[data-automation-key="b"]`)
+ .trigger("click");
+
+ expect(wrapper.emitted("select").at(0)).toStrictEqual(["b"]);
+ });
+ });
+
+ describe("multiple mode", () => {
+ it("should support multiple mode", async () => {
+ const wrapper = mount(WdsDropdownMenu, {
+ props: {
+ selected: ["???"],
+ enableMultiSelection: true,
+ options,
+ },
+ });
+
+ await wrapper
+ .get(`.WdsDropdownMenu__checkbox[data-automation-key="b"]`)
+ .trigger("click");
+
+ expect(wrapper.emitted("select").at(0)).toStrictEqual([["b"]]);
+ });
+ });
+});
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index 530b54146..d4e62074e 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -1,44 +1,106 @@
-
-
+
+
+
+
+
+
diff --git a/src/ui/src/wds/WdsNumberInput.vue b/src/ui/src/wds/WdsNumberInput.vue
new file mode 100644
index 000000000..7ed5e4013
--- /dev/null
+++ b/src/ui/src/wds/WdsNumberInput.vue
@@ -0,0 +1,151 @@
+
+
+
@@ -46,6 +108,7 @@
export type WdsDropdownMenuOption = {
value: string;
label: string;
+ detail?: string;
icon?: string;
};
@@ -53,29 +116,42 @@ export type WdsDropdownMenuOption = {
@@ -106,10 +208,20 @@ watch(searchTerm, () => emits("search", searchTerm.value));
box-shadow: var(--wdsShadowMenu);
box-sizing: border-box;
}
-.WdsDropdownMenu:has(.WdsDropdownMenu__search-wrapper) {
+.WdsDropdownMenu:has(.WdsDropdownMenu__header) {
padding-top: 0px;
}
+.WdsDropdownMenu__checkbox,
+.WdsDropdownMenu__item {
+ min-height: 36px;
+}
+
+.WdsDropdownMenu__checkbox {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
.WdsDropdownMenu__item {
background-color: transparent;
border: none;
@@ -117,8 +229,8 @@ watch(searchTerm, () => emits("search", searchTerm.value));
width: 100%;
display: grid;
- grid-template-columns: auto 1fr auto;
- gap: 8px;
+ grid-template-columns: 1fr auto;
+ column-gap: 8px;
align-items: center;
border-radius: 4px;
@@ -131,6 +243,9 @@ watch(searchTerm, () => emits("search", searchTerm.value));
transition: all 0.2s;
pointer-events: all;
}
+.WdsDropdownMenu__item:has(.material-symbols-outlined) {
+ grid-template-columns: auto 1fr auto;
+}
.WdsDropdownMenu__item:hover {
cursor: pointer;
@@ -140,21 +255,40 @@ watch(searchTerm, () => emits("search", searchTerm.value));
.WdsDropdownMenu__item--selected {
background-color: var(--wdsColorBlue2);
}
+.WdsDropdownMenu__item--hideIcon {
+ grid-template-columns: 1fr auto;
+}
+
+.WdsDropdownMenu__item__detail,
.WdsDropdownMenu__item__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
-.WdsDropdownMenu__search-wrapper {
+
+.WdsDropdownMenu__item:has(.WdsDropdownMenu__item__detail) {
+ grid-template-rows: auto auto;
+}
+
+.WdsDropdownMenu__item__detail {
+ grid-row: 2;
+ color: var(--wdsColorGray4);
+}
+
+.WdsDropdownMenu__header {
position: sticky;
top: 0px;
padding-top: 8px;
padding-bottom: 8px;
background: #fff;
+
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
}
-.WdsDropdownMenu__search {
+.WdsDropdownMenu__header__search {
background-color: var(--wdsColorGray1);
border-radius: 4px;
height: 36px;
@@ -170,15 +304,15 @@ watch(searchTerm, () => emits("search", searchTerm.value));
color: currentcolor;
}
-.WdsDropdownMenu__search:hover {
+.WdsDropdownMenu__header__search:hover {
border-color: var(--wdsColorBlue1);
}
-.WdsDropdownMenu__search:focus-within {
+.WdsDropdownMenu__header__search:focus-within {
background-color: white;
outline: 4px solid var(--wdsColorBlue1);
}
-.WdsDropdownMenu__search__input {
+.WdsDropdownMenu__header__search__input {
letter-spacing: inherit;
color: currentcolor;
padding: 4px 0px 5px;
@@ -194,7 +328,28 @@ watch(searchTerm, () => emits("search", searchTerm.value));
animation-duration: 10ms;
appearance: textfield;
}
-.WdsDropdownMenu__search__input:focus-visible {
+.WdsDropdownMenu__header__search__input:focus-visible {
outline: none;
}
+
+.WdsDropdownMenu__header__multiSelect {
+ display: flex;
+ gap: 12px;
+}
+.WdsDropdownMenu__header__multiSelect__count,
+.WdsDropdownMenu__header__multiSelect__clear {
+ text-transform: uppercase;
+ font-size: 13px;
+}
+.WdsDropdownMenu__header__multiSelect__count {
+ flex-grow: 1;
+ color: var(--wdsColorGray6);
+}
+.WdsDropdownMenu__header__multiSelect__clear {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ text-align: right;
+ color: var(--wdsColorGray4);
+}
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 1c24a937d..e3bb5d6a2 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -1,39 +1,69 @@
+
-
+
+
+
+
+
+
+ {{ headerSelectCountText }}
+
+
+
search
+ {{ option.label }}
+
+
+ {{ option.detail }}
+
+
+ check
+
+
+
-
diff --git a/src/ui/src/wds/WdsModal.vue b/src/ui/src/wds/WdsModal.vue
new file mode 100644
index 000000000..f54076717
--- /dev/null
+++ b/src/ui/src/wds/WdsModal.vue
@@ -0,0 +1,130 @@
+
+
+
-
-
+
+ open_in_new
+
+
+ help
+
+
+
+ Field {{ label }} is open in a new window.
+
+
+
+
- help
-
-
- {{ error }}
-{{ hint }}
+ +
+
+ {{ error }}
+{{ hint }}
+
+
+
+
+
+
+ {{ description }}
+
+
+ {{ title }}
+
+
+ {{ action.desc }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ui/src/wds/WdsProgressLinear.vue b/src/ui/src/wds/WdsProgressLinear.vue
new file mode 100644
index 000000000..1e4dbdcab
--- /dev/null
+++ b/src/ui/src/wds/WdsProgressLinear.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
diff --git a/src/ui/src/wds/WdsSkeletonLoader.vue b/src/ui/src/wds/WdsSkeletonLoader.vue
new file mode 100644
index 000000000..26b4ccbd1
--- /dev/null
+++ b/src/ui/src/wds/WdsSkeletonLoader.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/src/ui/src/wds/WdsStateDot.vue b/src/ui/src/wds/WdsStateDot.vue
index 372ff0042..777b2d706 100644
--- a/src/ui/src/wds/WdsStateDot.vue
+++ b/src/ui/src/wds/WdsStateDot.vue
@@ -17,7 +17,9 @@ defineProps({
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 06fa8f0cd..c52b60919 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -1,14 +1,26 @@
+
+
+
+
- {{ leftIcon }}
+ {{ leftIcon }}
+
{{ rightText }}
+