@bagelink/vue 0.0.206 → 0.0.214

package/src/components/form/inputs/ToggleInput.vue

@@ -0,0 +1,127 @@
+<template>
+	<div
+		class="bagel-input bgl-checkbox"
+		:title="title"
+		:class="{ small: small, 'no-edit': !editMode }"
+	>
+		<div class="switch">
+			<input
+				:id="id"
+				type="checkbox"
+				v-model="inputVal"
+				:class="{ 'no-edit': !editMode }"
+			>
+			<span class="slider round" />
+		</div>
+		<label :for="id">
+			{{ label }}
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(
+	defineProps<{
+    label: string;
+    id?: string;
+    title?: string;
+    modelValue: boolean;
+    editMode?: boolean;
+    small?: boolean;
+  }>(),
+	{
+		editMode: true,
+		id: Math.random().toString(36).substring(7),
+	},
+);
+
+const inputVal = ref(false);
+watch(inputVal, (newVal) => {
+	if (newVal === undefined) return;
+	emits('update:modelValue', newVal);
+});
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		if (inputVal.value !== newVal) inputVal.value = newVal;
+	},
+);
+onMounted(() => (inputVal.value = !!props.modelValue));
+</script>
+
+<style scoped>
+.bgl-checkbox{
+  position: relative;
+}
+.bgl-checkbox input[type=checkbox]{
+  display: none;
+}
+.bgl-checkbox label{
+  padding-inline-start: calc(var(--input-height) + 0.25rem);
+  transition: var(--bgl-transition);
+  cursor: pointer;
+  user-select: none;
+}
+.bgl-checkbox:hover{
+  filter: brightness(90%);
+}
+.bgl-checkbox:active{
+  filter: var(--bgl-active-filter);
+}
+
+.switch {
+  position: absolute;
+  display: inline-block;
+  height: calc(var(--input-height) / 2);
+  width: var(--input-height);
+  border-radius: var(--input-height);
+  background: var(--bgl-gray);
+  outline: 1px solid var(--bgl-black);
+  margin-top: 0.15rem;
+  pointer-events: none;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--input-bg);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: calc(var(--input-height) / 2);
+  box-shadow: inset 0 0 10px #00000020;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: calc(var(--input-height) / 2 - 4px);
+  width: calc(var(--input-height) / 2 - 4px);
+  left: 2px;
+  bottom: 2px;
+  border-radius: 50%;
+  background: var(--bgl-white);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background: var(--bgl-primary);
+}
+
+input:checked + .slider:before {
+  transform: translateX(calc(var(--input-height) / 2));
+}
+</style>

package/src/components/formkit/Toggle.vue

@@ -1,36 +1,36 @@
 <template>
-  <div
-    class="bagel-input checkbox"
-    :class="{ check: context?.attrs.isCheckbox }"
-    :title="context?.help"
-  >
-    <label class="switch">
-      <input
-        @change="() => props.context?.node.input(inputVal)"
-        type="checkbox"
-        v-model="inputVal"
-        :id="context?.id"
-      />
-      <span class="slider round" />
-    </label>
-  </div>
+	<div
+		class="bagel-input checkbox"
+		:class="{ check: context?.attrs.isCheckbox }"
+		:title="context?.help"
+	>
+		<label class="switch">
+			<input
+				@change="() => props.context?.node.input(inputVal)"
+				type="checkbox"
+				v-model="inputVal"
+				:id="context?.id"
+			>
+			<span class="slider round" />
+		</label>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue";
+import { watch } from 'vue';
 
 const props = defineProps({
-  context: Object,
+	context: Object,
 });
 
 let inputVal = $ref(false);
 
 watch(
-  () => props.context?.value,
-  (newVal) => {
-    inputVal = newVal;
-  },
-  { immediate: true }
+	() => props.context?.value,
+	(newVal) => {
+		inputVal = newVal;
+	},
+	{ immediate: true },
 );
 </script>
 

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
+export { default as ModalBglForm } from './ModalBglForm.vue';
 export { default as DropDown } from './DropDown.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';

package/src/plugins/modal.ts

@@ -3,8 +3,9 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm } from '@bagelink/vue';
+import { Modal, ModalForm, ModalBglForm } from '@bagelink/vue';
 import type { FormKitSchemaDefinition } from '@formkit/core';
+import { BglFormSchemaT } from 'dist/types';
 
 interface ModalOptions {
 	title?: string;
@@ -22,13 +23,15 @@ interface ModalFormOptions extends ModalOptions {
 	onSubmit: (val: any) => void;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: (id: string) => void;
-	schema: FormKitSchemaDefinition;
+	schema: FormKitSchemaDefinition | BglFormSchemaT;
 }
 
 interface ModalApi {
 	// eslint-disable-next-line no-unused-vars
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
+	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
+	// eslint-disable-next-line no-unused-vars
 	modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
 	hideModal: (index?: number) => void;
@@ -45,7 +48,7 @@ export const useModal = (): ModalApi => {
 
 interface ModalComponentProps {
 	componentSlots: Record<string, any>,
-	isModalForm: boolean,
+	modalType: 0 | 1 | 2,
 	modalOptions: ModalOptions | ModalFormOptions
 }
 
@@ -59,20 +62,21 @@ export const ModalPlugin: Plugin = {
 		};
 
 		const showModal = (
-			isForm: boolean,
+			modalType: 0 | 1 | 2,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
 			modalStack.push({
 				modalOptions: options,
-				isModalForm: isForm,
+				modalType,
 				componentSlots: slots,
 			});
 		};
 
 		app.provide(ModalSymbol, {
-			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(true, options, slots),
-			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(false, options, slots),
+			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(1, options, slots),
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(0, options, slots),
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(2, options, slots),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
@@ -85,7 +89,11 @@ export const ModalPlugin: Plugin = {
 			},
 			render() {
 				return modalStack.map((modal, index) => {
-					const renderComponent = modal.isModalForm ? ModalForm : Modal;
+					let renderComponent;
+					if (modal.modalType === 1) renderComponent = ModalForm;
+					else if (modal.modalType === 2) renderComponent = ModalBglForm;
+					else renderComponent = Modal;
+
 					return h(
 						renderComponent,
 						{

package/src/styles/theme.css

@@ -8,7 +8,6 @@
   --bgl-primary: #2E5BFF;
   --bgl-primary-tint: #2E5BFF80;
   --bgl-primary-light: #eef6ff;
-
   --bgl-blue-20: rgba(46, 91, 255, 20%);
   --bgl-blue-dark: #191c30;
   --bgl-blue-light: #eef6ff;
@@ -107,13 +106,6 @@
   justify-content: flex-end;
 }
 
-body {
-  background-color: var(--bgl-bg);
-  color: var(--bgl-black);
-  font-family: var(--bgl-font);
-  overflow: hidden;
-}
-
 * {
   box-sizing: border-box;
 }

package/src/types/BagelForm.ts

@@ -14,6 +14,8 @@ export type Field<T = Record<string, any>> = {
   children?: Field<T>[];
   attrs?: Attributes<T>;
   required?: boolean;
+  hint?: string;
+  'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 }
 
 export interface SelectBagelField {

package/src/types/BtnOptions.ts

@@ -12,5 +12,5 @@ export interface BtnOptions {
 	loading?: boolean;
 	role?: string;
 	value?: string;
-
+	border?: boolean;
 }