Skip to content

Commit e1baf50

Browse files
SteindelSESteindelSE
committed
- Update DropDownMenu obsidian block to allow setting more properties, defaulting to current defaults, and completely revamp DropDownMenu gallery to show usage.
1 parent 1bea265 commit e1baf50

File tree

2 files changed

+296
-31
lines changed

2 files changed

+296
-31
lines changed

‎Rock.JavaScript.Obsidian.Blocks/src/Example/ControlGallery/dropDownMenuGallery.partial.obs‎

Lines changed: 205 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,94 @@
11
<template>
2-
<GalleryAndResult :importCode="importCode" :exampleCode="exampleCode">
2+
<GalleryAndResult :value="menuItems"
3+
:importCode="importCode"
4+
:exampleCode="exampleCode"
5+
:scriptSetupCode="scriptSetupCode"
6+
enableReflection>
37
<div style="padding-left: calc(50% - 18px); display: flex; background-color: #f3f3f3;">
4-
<DropDownMenu :items="menuItems" :align="align" />
8+
<DropDownMenu :items="menuItems"
9+
:title="demoTitleText"
10+
:anchorButtonSize="anchorButtonSize"
11+
:anchorButtonType="anchorButtonType"
12+
:align="align"
13+
:verticalAlign="verticalAlign"
14+
:anchorIconCssClass="anchorIconCssClass"
15+
:anchorButtonCssClass="anchorButtonCssClass"
16+
:isAnchorButtonOverflow="isAnchorButtonOverflow" />
517
</div>
618

719
<template #settings>
8-
<div class="row">
9-
<div class="col-md-3">
10-
<DropDownList label="Align"
11-
v-model="align"
12-
:items="alignItems"
13-
:showBlankItem="false" />
14-
</div>
20+
<div class="d-flex flex-row gap-3" style="max-height: 5vw;">
21+
<ContentSection title="Demonstratable Settings"
22+
icon="ti ti-settings"
23+
disableCollapse>
24+
<p class="text-semibold font-italic">The settings apply across many use-cases, so their usage and demonstration will show and occur if enabled or changed from defaults.</p>
25+
<ContentStack title="Toggle Properties"
26+
description="Properties that typically are either true or false.">
27+
<div class="d-flex flex-row gap-3">
28+
<Switch v-model="isAnchorButtonOverflow"
29+
label="Anchor Button is Overflow"
30+
help="Determines if the Anchor Button needs to overflow css class 'btn-overflow'." />
31+
</div>
32+
</ContentStack>
33+
<ContentStack title="Value Properties"
34+
description="Properties that typically require a value to be set.">
35+
<div class="d-flex flex-row gap-1">
36+
<div class="col-md-6">
37+
<p class="text-semibold">Anchor Button</p>
38+
<DropDownList v-model="anchorButtonType"
39+
label="Type"
40+
help="Sets the type of the anchor button for the drop down menu."
41+
:items="btnTypeItems"
42+
:showBlankItem="false" />
43+
<DropDownList v-model="anchorButtonSize"
44+
label="Size"
45+
help="Sets the size of the anchor button for the drop down menu."
46+
:items="btnSizeItems"
47+
:showBlankItem="false" />
48+
<TextBox v-model="anchorIconCssClass"
49+
label="Icon CSS Class"
50+
help="CSS class for the icon displayed on the anchor button. Defaults `to ti ti-dots-vertical`" />
51+
<TextBox v-model="anchorButtonCssClass"
52+
label="Button CSS Class"
53+
help="Any supplemental CSS class(es) for the button displayed as the anchor for the drop down menu." />
54+
</div>
55+
<div class="col-md-6">
56+
<p class="text-semibold">Menu Alignment</p>
57+
<DropDownList v-model="align"
58+
label="Align"
59+
help="Sets the horizontal alignment for the drop down menu in relation to the anchor button."
60+
:items="alignDemonstrationItems"
61+
:showBlankItem="false" />
62+
<DropDownList v-model="verticalAlign"
63+
label="Align"
64+
help="Sets the vertical alignment for the drop down menu in relation to the anchor button."
65+
:items="verticalAlignDemonstrationItems"
66+
:showBlankItem="false" />
67+
</div>
68+
</div>
69+
70+
<div class="d-flex flex-row gap-1">
71+
<div class="col-md-6">
72+
</div>
73+
</div>
74+
</ContentStack>
75+
</ContentSection>
76+
77+
<ContentSection title="Context-Specific Settings"
78+
icon="ti ti-book"
79+
disableCollapse>
80+
<p class="text-semibold font-italic">The settings are too context-specific, so their usage will show if enabled, but no demonstration will occur.</p>
81+
<ContentStack title="Toggle Properties"
82+
description="Properties that typically are either true or false.">
83+
<div class="d-flex flex-row gap-1">
84+
<div class="col-md-12">
85+
<TextBox v-model="title"
86+
label="Tooltip Title"
87+
help="The tooltip title used for the drop down menu anchor button on hover. This must be set statically and cannot be changed dynamically." />
88+
</div>
89+
</div>
90+
</ContentStack>
91+
</ContentSection>
1592
</div>
1693
</template>
1794
</GalleryAndResult>
@@ -21,25 +98,18 @@
2198
import DropDownList from "@Obsidian/Controls/dropDownList.obs";
2299
import DropDownMenu from "@Obsidian/Controls/dropDownMenu.obs";
23100
import GalleryAndResult from "./common/galleryAndResult.partial.obs";
101+
import ContentSection from "@Obsidian/Controls/contentSection.obs";
102+
import ContentStack from "@Obsidian/Controls/contentStack.obs";
103+
import TextBox from "@Obsidian/Controls/textBox.obs";
104+
import Switch from "@Obsidian/Controls/switch.obs";
105+
import { BtnType } from "@Obsidian/Enums/Controls/btnType";
106+
import { BtnSize } from "@Obsidian/Enums/Controls/btnSize";
24107
import { alert } from "@Obsidian/Utility/dialogs";
25108
import { MenuAction } from "@Obsidian/Types/Controls/dropDownMenu";
26109
import { ListItemBag } from "@Obsidian/ViewModels/Utility/listItemBag";
27-
import { getSfcControlImportPath } from "./common/utils.partial";
110+
import { getSfcControlImportPath, ComponentUsage } from "./common/utils.partial";
28111
import { computed, ref } from "vue";
29112

30-
const align = ref<"left" | "right">("left");
31-
32-
const alignItems: ListItemBag[] = [
33-
{
34-
value: "left",
35-
text: "Left"
36-
},
37-
{
38-
value: "right",
39-
text: "Right"
40-
}
41-
];
42-
43113
const menuItems: MenuAction[] = [
44114
{
45115
title: "Default",
@@ -65,12 +135,119 @@
65135
}
66136
];
67137

138+
const demoTitleText = "Drop Down Menu Button Tooltip Title";
139+
const title = ref<string>("");
140+
141+
const anchorButtonType = ref<BtnType>(BtnType.Link);
142+
143+
// Convert BtnType enum to ListItemBag[]
144+
const btnTypeItems: ListItemBag[] = Object.entries(BtnType).map(([key, value]) => ({
145+
value: value,
146+
text: key
147+
}));
148+
149+
const anchorButtonSize = ref<BtnSize>(BtnSize.Default);
150+
151+
const btnSizeItems: ListItemBag[] = Object.entries(BtnSize).map(([key, value]) => ({
152+
value: value,
153+
text: key
154+
}));
155+
156+
const align = ref<"left" | "right">("left");
157+
158+
const alignDemonstrationItems: ListItemBag[] = [
159+
{
160+
value: "left",
161+
text: "Left"
162+
},
163+
{
164+
value: "right",
165+
text: "Right"
166+
}
167+
];
168+
169+
const verticalAlign = ref<"up" | "down">("down");
170+
171+
const verticalAlignDemonstrationItems: ListItemBag[] = [
172+
{
173+
value: "down",
174+
text: "Down"
175+
},
176+
{
177+
value: "up",
178+
text: "Up"
179+
}
180+
];
181+
182+
const anchorIconCssClass = ref("ti ti-dots-vertical");
183+
184+
const anchorButtonCssClass = ref<string>("");
185+
186+
const isAnchorButtonOverflow = ref(true);
187+
68188
const importCode = getSfcControlImportPath("dropDownMenu");
69189

70-
const exampleCode = computed((): string => {
71-
return `<DropDownMenu :items="menuItems" align="${align.value}">
72-
<!-- Optional content -->
73-
<i class="ti ti-dots-vertical"></i>
74-
</DropDownMenu>`;
190+
const exampleCode = computed(() => {
191+
const usage = new ComponentUsage("DropDownMenu");
192+
193+
usage.addAttribute(':items="dropDownMenuItems"', true, false);
194+
usage.addAttribute(`title="${title.value}"`, title.value !== "", false);
195+
usage.addAttribute(`:anchorButtonType="dropDownMenuAnchorButtonType"`, true, false);
196+
usage.addAttribute(`:anchorButtonSize="dropDownMenuAnchorButtonSize"`, true, false);
197+
usage.addAttribute(`:align="dropDownMenuHorizontalAlign"`, true, false);
198+
usage.addAttribute(`:verticalAlign="dropDownMenuVerticalAlign"`, true, false);
199+
usage.addAttribute(`:anchorIconCssClass="dropDownAnchorIconCssClass"`, anchorIconCssClass.value !== "ti ti-dots-vertical", false);
200+
usage.addAttribute(`:anchorButtonCssClass="dropDownAnchorButtonCssClass"`, anchorButtonCssClass.value !== "", false);
201+
usage.addAttribute(`isAnchorButtonOverflow`, isAnchorButtonOverflow.value, true);
202+
203+
return usage.toString();
204+
});
205+
const scriptSetupCode = computed(() => {
206+
const usage = new ComponentUsage("PageTree");
207+
208+
usage.addScriptImport('import { MenuAction } from "@Obsidian/Types/Controls/dropDownMenu";');
209+
usage.addScriptBody("const dropDownMenuItems = ref<{MenuAction[]}>(undefined);");
210+
211+
if (anchorButtonType.value !== BtnType.Link) {
212+
usage.addScriptImport('import { BtnType } from "@Obsidian/Enums/Controls/btnType";');
213+
usage.addScriptBodyWithComment(
214+
"Define the type of the drop down menu's anchor button.",
215+
`const dropDownMenuAnchorButtonType = ref<BtnType>(BtnType.${Object.keys(BtnType).find(key => BtnType[key as keyof typeof BtnType] === anchorButtonType.value)});`
216+
);
217+
}
218+
219+
if (anchorButtonSize.value !== BtnSize.Default) {
220+
usage.addScriptImport('import { BtnSize } from "@Obsidian/Enums/Controls/btnSize";');
221+
usage.addScriptBodyWithComment(
222+
"Define the size of the drop down menu's anchor button.",
223+
`const dropDownMenuAnchorButtonSize = ref<BtnSize>(BtnSize.${Object.keys(BtnSize).find(key => BtnSize[key as keyof typeof BtnSize] === anchorButtonSize.value)});`
224+
);
225+
}
226+
227+
usage.addScriptBodyWithComment(
228+
"Define the horizontal alignment of the drop down menu.",
229+
`const dropDownMenuHorizontalAlign = ref<"left" | "right">(${align.value === "left" ? '"left"' : '"right"'});`
230+
);
231+
232+
usage.addScriptBodyWithComment(
233+
"Define the vertical alignment of the drop down menu.",
234+
`const dropDownMenuVerticalAlign = ref<"down" | "up">(${verticalAlign.value === "down" ? '"down"' : '"up"'});`
235+
);
236+
237+
if (anchorIconCssClass.value !== "ti ti-dots-vertical") {
238+
usage.addScriptBodyWithComment(
239+
"Define the icon CSS class for the drop down menu's anchor button.",
240+
`const dropDownAnchorIconCssClass = ref<string>("${anchorIconCssClass.value}");`
241+
);
242+
}
243+
244+
if (anchorButtonCssClass.value !== "") {
245+
usage.addScriptBodyWithComment(
246+
"Define any supplementary CSS class(es) for the drop down menu's anchor button.",
247+
`const dropDownAnchorButtonCssClass = ref<string>("${anchorButtonCssClass.value}");`
248+
);
249+
}
250+
251+
return usage.toScriptSetupString();
75252
});
76253
</script>

0 commit comments

Comments
 (0)