Skip to content

Commit cdc474c

Browse files
adambereczadamberecz
committed
1.1.1
1 parent 35acfd1 commit cdc474c

File tree

5 files changed

+562
-1
lines changed

5 files changed

+562
-1
lines changed

‎index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/elementSelector/ElementSelectOption.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div
3+
:class="[
4+
'vfb-field-wrapper',
5+
option.root ? 'vfb-field-wrapper-root' : null,
6+
option.container ? 'vfb-field-wrapper-container' : null,
7+
option.disabled ? 'vfb-field-wrapper-disabled' : null,
8+
]"
9+
>
10+
<div class="vfb-field-spacing">
11+
<template v-for="l in option.level">
12+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
13+
</template>
14+
15+
<template v-if="option.level >= 1">
16+
&nbsp;
17+
</template>
18+
</div>
19+
20+
<div
21+
v-if="option.container && option.children && option.children.length && !option.root"
22+
:class="[
23+
'vfb-field-chevron-container',
24+
option.level > 0 ? 'vfb-field-chevron-container-sub' : null,
25+
]"
26+
>
27+
<builder-icon
28+
class="vfb-field-chevron"
29+
:icon="['fas', 'chevron-down']"
30+
/>
31+
</div>
32+
33+
<div class="vfb-field-icon-container">
34+
<img
35+
v-if="typeof option.icon === 'string'"
36+
class="vfb-field-icon"
37+
:src="option.icon"
38+
:title="option.typeLabel"
39+
/>
40+
<builder-icon
41+
v-else class="vfb-field-icon"
42+
:icon="option.icon || ['fas', 'shapes']"
43+
/>
44+
</div>
45+
46+
<div class="vfb-field-text" aria-hidden="true">
47+
<div class="vfb-field-text-primary">{{ option.primaryLabel }}</div>
48+
<div v-if="option.secondaryLabel" class="vfb-field-text-secondary">{{ option.secondaryLabel }}</div>
49+
</div>
50+
</div>
51+
</template>
52+
53+
<script>
54+
export default {
55+
props: {
56+
option: {
57+
type: Object,
58+
required: true,
59+
},
60+
isPointed: {
61+
type: Function,
62+
required: false,
63+
},
64+
isSelected: {
65+
type: Function,
66+
required: false,
67+
},
68+
}
69+
}
70+
</script>
71+
72+
<style>
73+
.vfb-element-selector-plugin {
74+
@apply absolute top-full left-0 right-0 w-full bg-white z-999;
75+
}
76+
77+
.vfb-element-selector-plugin *,
78+
.vfb-element-selector-plugin :before,
79+
.vfb-element-selector-plugin :after,
80+
.vfb-element-selector-plugin :root {
81+
--vf-gutter: 0.1rem !important;
82+
--vf-radius-input: 0 !important;
83+
--vf-bg-input: #fff !important;
84+
}
85+
86+
.vfb-element-selector-plugin .vfb-fields-container {
87+
@apply w-full overflow-x-scroll;
88+
}
89+
90+
.vfb-element-selector-plugin .vfb-fields-plugin {
91+
@apply border-t-0 w-auto;
92+
}
93+
94+
.vfb-element-selector-plugin .vfb-field-text {
95+
@apply overflow-x-visible;
96+
}
97+
</style>

‎plugins/elementSelector/TextElement.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<component :is="elementLayout" ref="container">
3+
<template #element>
4+
<div :class="classes.inputContainer">
5+
<ElementAddon v-if="hasAddonBefore" type="before"><slot name="addon-before"/></ElementAddon>
6+
<ElementAddon v-if="hasAddonAfter" type="after"><slot name="addon-after"/></ElementAddon>
7+
<ElementLabelFloating v-if="hasFloating && !empty" :visible="!empty" />
8+
<ElementLoader v-if="isLoading"/>
9+
<input
10+
:value="model"
11+
:type="inputType"
12+
:name="name"
13+
:id="fieldId"
14+
:class="classes.input"
15+
:placeholder="placeholder"
16+
:autocomplete="autocomplete"
17+
:disabled="isDisabled"
18+
:readonly="readonly"
19+
v-bind="{
20+
...attrs,
21+
...aria,
22+
}"
23+
@keydown="handleKeydown"
24+
@keyup="handleKeyup"
25+
@keypress="handleKeypress"
26+
@input="handleInput"
27+
@select="handleInput"
28+
@blur="handleBlur"
29+
ref="input"
30+
/>
31+
<div
32+
v-if="elementSelector && selectingElement"
33+
class="vfb-element-selector-plugin"
34+
>
35+
<Vueform ref="elementSelector$" v-bind="elementSelectorForm" />
36+
</div>
37+
</div>
38+
</template>
39+
<!-- Default element slots -->
40+
<template v-for="(component, slot) in elementSlots" #[slot]><slot :name="slot" :el$="el$"><component :is="component" :el$="el$"/></slot></template>
41+
</component>
42+
</template>
43+
44+
<script>
45+
export default {
46+
name: 'TextElement',
47+
data() {
48+
return {
49+
merge: true,
50+
defaultClasses: {},
51+
}
52+
},
53+
}
54+
</script>
55+
56+
<style lang="scss">
57+
</style>

‎plugins/elementSelector/TextareaElement.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<component :is="elementLayout" ref="container">
3+
<template #element>
4+
<div :class="classes.inputContainer">
5+
<ElementAddon v-if="hasAddonBefore" type="before">
6+
<slot name="addon-before"/>
7+
</ElementAddon>
8+
9+
<ElementAddon v-if="hasAddonAfter" type="after">
10+
<slot name="addon-after"/>
11+
</ElementAddon>
12+
13+
<ElementLabelFloating
14+
v-if="hasFloating && !empty"
15+
:visible="!empty"
16+
/>
17+
18+
<ElementLoader
19+
v-show="pending"
20+
/>
21+
22+
<textarea
23+
:value="model"
24+
:name="name"
25+
:id="fieldId"
26+
:class="classes.input"
27+
:placeholder="placeholder"
28+
:disabled="isDisabled"
29+
:readonly="readonly"
30+
:rows="rows"
31+
v-bind="{
32+
...attrs,
33+
...aria,
34+
}"
35+
@keydown="handleKeydown"
36+
@keyup="handleKeyup"
37+
@keypress="handleKeypress"
38+
@input="handleInput"
39+
@blur="handleBlur"
40+
ref="input"
41+
/>
42+
43+
<div
44+
v-if="elementSelector && selectingElement"
45+
class="vfb-element-selector-plugin"
46+
>
47+
<Vueform ref="elementSelector$" v-bind="elementSelectorForm" />
48+
</div>
49+
</div>
50+
</template>
51+
52+
<!-- Default element slots -->
53+
<template v-for="(component, slot) in elementSlots" #[slot]><slot :name="slot" :el$="el$"><component :is="component" :el$="el$"/></slot></template>
54+
</component>
55+
</template>
56+
57+
<script>
58+
export default {
59+
name: 'TextareaElement',
60+
data() {
61+
return {
62+
merge: true,
63+
defaultClasses: {}
64+
}
65+
}
66+
}
67+
</script>
68+
69+
<style lang="scss">
70+
</style>

0 commit comments

Comments
 (0)