Merge pull request #185 from addonify/sniper

🔥 NEW: FEATURES
addonify · Jul 21, 2023 · 1741eff · 1741eff
2 parents 7321b47 + d8d2d86
commit 1741eff
Show file tree

Hide file tree

Showing 19 changed files with 405 additions and 45 deletions.
diff --git a/admin/assets/css/admin.css b/admin/assets/css/admin.css
diff --git a/admin/assets/js/main.js b/admin/assets/js/main.js
diff --git a/admin/assets/js/vendor.js b/admin/assets/js/vendor.js
diff --git a/admin/assets/scss/layouts/_entry.scss b/admin/assets/scss/layouts/_entry.scss
@@ -47,6 +47,95 @@
         line-height: 1;
         @include transation_delay();
     }
+
+    // Draggable
+    .adfy-draggable-elements {
+
+		> div {
+
+			@include flex();
+			flex-direction: column;
+            border-radius: 10px;
+            overflow: hidden;
+            border: 1px solid var(--addonify_border_color);
+
+			.adfy-draggable-element {
+
+				display: block;
+				padding: 20px;
+				cursor: move;
+                background-color: transparent;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+                border-bottom: 1px solid var(--addonify_border_color);
+                overflow: auto;
+                opacity: 1;
+                visibility: visible;
+
+                &:last-child {
+
+                    border-bottom: none;
+                }
+
+                &.sortable-chosen {
+
+                    border-bottom-color: transparent;
+                }
+
+                &.sortable-ghost {
+
+                    opacity: 0;
+                    visibility: hidden;
+                }
+
+                .adfy-draggable-box {
+
+                    display: grid;
+                    column-gap: 10px;
+                    grid-template-columns: 50px 1fr;
+                    align-items: center;
+
+                     .draggable-switch {
+
+                        .el-switch {
+
+                            margin: 0;
+                            height: auto;
+                        }
+                    }
+
+                    .label-icon-box {
+
+                        @include flex();
+                        flex-direction: row;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .option-label {
+
+
+                        }
+
+                        .option-icon {
+
+                            display: inline-flex;
+                            align-items: center;
+                            line-height: 1;
+
+                            svg {
+
+                                width: 22px;
+                                height: 22px;
+                                line-height: 1;
+                                fill: #bbbbbb;
+                                color: #bbbbbb;
+                                @include transation_delay();
+                            }
+                        }
+                    }
+                }
+			}
+		}
+	}
 }
 
 .adfy-navigation {

diff --git a/admin/src/components/inputs/Number.vue b/admin/src/components/inputs/Number.vue
@@ -1,10 +1,38 @@
 <script setup>
 	import { computed } from "vue";
-	import { ElInput } from "element-plus";
+	import { ElInput, ElInputNumber } from "element-plus";
+
 	const props = defineProps({
-		modelValue: [String, Number], // loose strict checking.
-		min: Number,
-		max: Number,
+		modelValue: {
+			type: [Number, String],
+			required: true,
+		},
+		min: {
+			type: [String, Number],
+			required: false,
+		},
+		max: {
+			type: [String, Number],
+			required: false,
+		},
+		step: {
+			type: [String, Number],
+			required: false,
+		},
+		precision: {
+			type: [String, Number],
+			required: false,
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: "",
+		},
+		style: {
+			type: String,
+			required: false,
+			default: "default",
+		},
 	});
 
 	// Ref: https://vuejs.org/guide/components/events.html#usage-with-v-model
@@ -17,8 +45,49 @@
 			emit("update:modelValue", newValue);
 		},
 	});
-	const { min, max } = props;
+
+	const { style, min, max, precision, step, placeholder } = props;
 </script>
 <template>
-	<el-input type="number" v-model="value" :min="min ? min : 0" :max="max" />
+	<template v-if="style === 'default'">
+		<el-input
+			type="number"
+			v-model="value"
+			:min="min ? min : 0"
+			:max="max"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
+	<template v-if="style === 'buttons-plus-minus'">
+		<el-input-number
+			v-model="value"
+			size="large"
+			:min="min ? min : 0"
+			:max="max ? max : 365"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
+	<template v-if="style === 'buttons-arrows'">
+		<el-input-number
+			v-model="value"
+			size="large"
+			:min="min ? min : 0"
+			:max="max ? max : 365"
+			controls-position="right"
+			:step="step"
+			:precision="precision"
+			:placeholder="placeholder"
+		/>
+	</template>
 </template>
+<style lang="scss">
+	.adfy-options {
+		.el-input-number--large {
+			width: 140px;
+		}
+	}
+</style>
diff --git a/admin/src/components/inputs/NumberToggleButton.vue b/admin/src/components/inputs/NumberToggleButton.vue
@@ -27,10 +27,4 @@
 		:max="max ? max : 365"
 	/>
 </template>
-<style lang="scss">
-	.adfy-options {
-		.el-input-number--large {
-			width: 140px;
-		}
-	}
-</style>
+
diff --git a/admin/src/components/inputs/RadioIcon.vue b/admin/src/components/inputs/RadioIcon.vue
@@ -1,6 +1,7 @@
 <script setup>
 	import { computed } from "vue";
 	import { ElRadio, ElRadioGroup } from "element-plus";
+
 	const props = defineProps({
 		modelValue: String,
 		choices: [Object, Array],
@@ -18,20 +19,46 @@
 	});
 </script>
 <template>
-	<el-radio-group v-model="vModalVal" v-for="(value, key) in props.choices">
-		<el-radio :label="key" size="large" border>
+	<el-radio-group v-model="vModalVal">
+		<el-radio
+			v-for="(value, key) in props.choices"
+			:label="key"
+			size="large"
+			border
+		>
 			<span v-html="value"></span>
 		</el-radio>
 	</el-radio-group>
 </template>
 <style lang="scss">
-	.radio-input-group {
+	.adfy-options {
 		.el-radio-group {
+			display: flex;
+			align-items: center;
+			gap: 20px;
 			.el-radio {
+				display: inline-flex;
+				gap: 10px;
 				align-items: center;
+				margin: 0;
+				padding: 10px 20px;
+				height: auto;
+
+				span {
+					line-height: 1;
+				}
 
-				.adfy-wishlist-icon {
-					font-size: 14px;
+				.el-radio__label {
+					padding: 0;
+					svg {
+						display: inline-flex;
+						align-items: center;
+						justify-content: center;
+						fill: #464646;
+						width: 20px;
+						height: 20px;
+						line-height: 1;
+					}
 				}
 			}
 		}

diff --git a/admin/src/components/inputs/Switch.vue b/admin/src/components/inputs/Switch.vue
@@ -16,6 +16,8 @@
 			emit("update:modelValue", newValue);
 		},
 	});
+
+	console.log(typeof props.modelValue);
 </script>
 <template>
 	<el-switch

diff --git a/admin/src/components/partials/InputControl.vue b/admin/src/components/partials/InputControl.vue
@@ -7,6 +7,7 @@
 	import Checkbox from "../inputs/Checkbox.vue";
 	import CheckboxButton from "../inputs/CheckboxButton.vue";
 	import Radio from "../inputs/Radio.vue";
+	import RadioIcon from "../inputs/RadioIcon.vue";
 	import ColorPicker from "../inputs/ColorPicker.vue";
 	import InvalidControl from "../inputs/InvalidControl.vue";
 	const props = defineProps({
@@ -53,12 +54,22 @@
 		v-else-if="props.field.type == 'number'"
 		v-model="props.reactiveState[props.fieldKey]"
 		:placeholder="props.field.placeholder"
+		:style="props.field.style"
+		:min="props.field.min"
+		:max="props.field.max"
+		:step="props.field.step"
+		:precision="props.field.precision"
 	/>
 	<Radio
 		v-else-if="props.field.type == 'radio'"
 		v-model="props.reactiveState[props.fieldKey]"
 		:choices="props.field.choices"
 	/>
+	<RadioIcon
+		v-else-if="props.field.type == 'radio-icons'"
+		v-model="props.reactiveState[props.fieldKey]"
+		:choices="props.field.choices"
+	/>
 	<ColorPicker
 		v-else-if="props.field.type == 'color'"
 		v-model:colorVal="props.reactiveState[props.fieldKey]"