@bagelink/vue 0.0.232-beta.0 → 0.0.233-beta.0

package/src/components/form/inputs/index.ts

@@ -1,23 +1,13 @@
 export { default as CheckInput } from './CheckInput.vue';
-export { default as CurrencyInput } from './CurrencyInput.vue';
 export { default as DateInput } from './DateInput.vue';
-export { default as DatetimeInput } from './DatetimeInput.vue';
-export { default as FloatInput } from './FloatInput.vue';
-export { default as IntInput } from './IntInput.vue';
 export { default as JSONInput } from './JSONInput.vue';
-export { default as LinkField } from './LinkField.vue';
-export { default as PasswordInput } from './PasswordInput.vue';
-export { default as Password } from './Password.vue';
-export { default as ReadOnlyInput } from './ReadOnlyInput.vue';
 export { default as SelectInput } from './SelectInput.vue';
 export { default as RichTextEditor } from './RichTextEditor.vue';
 export { default as TableField } from './TableField.vue';
-export { default as DurationInput } from './DurationInput.vue';
 export { default as TextInput } from './TextInput.vue';
 export { default as TextArea } from './TextArea.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
-export { default as PlainText } from './PlainText.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as RadioPillsInput } from './RadioPillsInput.vue';
 export { default as FileUpload } from './FileUpload.vue';

package/src/components/formkit/index.ts

@@ -1,32 +1,24 @@
-import { createInput } from '@formkit/vue';
-import type { FormKitTypeDefinition } from '@formkit/core';
-import ContactArrayFormKit from './ContactArrayFormKit.vue';
-import AddressArray from './AddressArray.vue';
-import BankDetailsArray from './BankDetailsArray.vue';
-import MiscFieldsBtns from './MiscFields.vue';
-import Toggle from './Toggle.vue';
-import FileUploader from './FileUploader.vue';
-import TextVariableExamples from '../whatsapp/form/TextVariableExamples.vue';
+// import { createInput } from '@formkit/vue';
+// import type { FormKitTypeDefinition } from '@formkit/core';
+// import ContactArrayFormKit from './ContactArrayFormKit.vue';
+// import BankDetailsArray from './BankDetailsArray.vue';
+// import MiscFieldsBtns from './MiscFields.vue';
+// import Toggle from './Toggle.vue';
+// import FileUploader from './FileUploader.vue';
+// import TextVariableExamples from '../whatsapp/form/TextVariableExamples.vue';
 
-const ContactArrayInput: FormKitTypeDefinition = createInput(ContactArrayFormKit);
-const AddressInput: FormKitTypeDefinition = createInput(AddressArray);
-const BankDetailsInput: FormKitTypeDefinition = createInput(BankDetailsArray);
-const MiscFieldsInput: FormKitTypeDefinition = createInput(MiscFieldsBtns);
-const ToggleSwitchInput: FormKitTypeDefinition = createInput(Toggle);
-const FileUploadInput: FormKitTypeDefinition = createInput(FileUploader);
-const TextVariablesInput: FormKitTypeDefinition = createInput(TextVariableExamples);
+// const ContactArrayInput: FormKitTypeDefinition = createInput(ContactArrayFormKit);
+// const AddressInput: FormKitTypeDefinition = createInput(AddressArray);
+// const BankDetailsInput: FormKitTypeDefinition = createInput(BankDetailsArray);
+// const MiscFieldsInput: FormKitTypeDefinition = createInput(MiscFieldsBtns);
+// const ToggleSwitchInput: FormKitTypeDefinition = createInput(Toggle);
+// const FileUploadInput: FormKitTypeDefinition = createInput(FileUploader);
+// const TextVariablesInput: FormKitTypeDefinition = createInput(TextVariableExamples);
 
 export {
-	TextVariablesInput,
-	ContactArrayInput,
-	AddressInput,
-	BankDetailsInput,
-	MiscFieldsInput,
-	ToggleSwitchInput,
-	FileUploadInput,
+
 };
 
-export { default as FileUploader } from './FileUploader.vue';
-export type { BankDetailsContext } from './BankDetailsArray.vue';
-export type { AddressArrContext } from './AddressArray.vue';
-export type { ContactArrContext } from './ContactArrayFormKit.vue';
+// export { default as FileUploader } from './FileUploader.vue';
+// export type { BankDetailsContext } from './BankDetailsArray.vue';
+// export type { ContactArrContext } from './ContactArrayFormKit.vue';

package/src/components/index.ts

@@ -6,7 +6,6 @@ export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
 export { default as ModalBglForm } from './ModalBglForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
-export { default as Dropdown } from './Drop.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
 export { default as TabbedLayout } from './TabbedLayout.vue';

package/src/plugins/bagel.ts

@@ -4,7 +4,7 @@ import { Bagel } from '@bagelink/sdk';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
-  // eslint-disable-next-line no-unused-vars
+	// eslint-disable-next-line no-unused-vars
 	(key: string) => string
 >;
 
@@ -23,11 +23,11 @@ export function useI18nT() {
 }
 
 export interface BagelOptions {
-  host: string
-  // eslint-disable-next-line no-unused-vars
-  onError?: (err: Error) => void,
-  // eslint-disable-next-line no-unused-vars
-	i18nT?: (key?: string) => string
+	host: string
+	// eslint-disable-next-line no-unused-vars
+	onError?: (err: Error) => void,
+	// eslint-disable-next-line no-unused-vars
+	i18nT?: (key: string) => string
 }
 
 export const BagelVue: Plugin = {

package/src/plugins/modal.ts

@@ -4,7 +4,6 @@ import {
 import type { Plugin } from 'vue';
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
 import { Modal, ModalBglForm } from '@bagelink/vue';
-import type { FormKitSchemaDefinition } from '@formkit/core';
 
 interface ModalOptions {
 	title?: string;
@@ -22,7 +21,7 @@ interface ModalFormOptions extends ModalOptions {
 	onSubmit: (val: any) => void;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: (id: string) => void;
-	schema: FormKitSchemaDefinition | BglFormSchemaT;
+	schema: BglFormSchemaT<any>;
 }
 
 interface ModalApi {

package/src/styles/modal.css

@@ -1,92 +1,94 @@
 .bg-dark {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.7);
-	z-index: 999;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	pointer-events: none;
-	opacity: 0;
-	transition: all ease-in-out 0.3s;
-	overflow: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: all ease-in-out 0.3s;
+  overflow: auto;
 }
 
 .modal {
-	width: 96%;
-	max-width: 680px;
-	transform: scale(0.5);
-	opacity: 0;
-	transition: all ease-in-out 0.15s;
-	margin-top: 6rem;
-	margin-bottom: 4rem;
+  width: 96%;
+  max-width: 680px;
+  transform: scale(0.5);
+  opacity: 0;
+  transition: all ease-in-out 0.15s;
+  margin-top: 6rem;
+  margin-bottom: 4rem;
 }
 
 .small-modal .modal {
-	max-width: 300px;
-	text-align: center;
+  max-width: 300px;
+  text-align: center;
 }
 
 .tool-bar {
-	margin: -2rem -1rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	position: -webkit-sticky;
-	position: sticky;
-	padding-top: 1rem;
-	top: -2rem;
-	z-index: 3;
-	background: var(--bgl-white);
+  margin: -2rem -1rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  position: -webkit-sticky;
+  position: sticky;
+  padding-top: 1rem;
+  top: -2rem;
+  z-index: 3;
+  background: var(--bgl-white);
 }
 
 .modal-size {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .is-side .modal {
-	inset-inline-end: -600px;
-	transform: scale(1);
-	opacity: 1;
-	position: fixed;
-	top: 20px;
-	bottom: 20px;
-	max-width: 600px;
-	width: 90%;
+  inset-inline-end: -600px;
+  transform: scale(1);
+  opacity: 1;
+  position: fixed;
+  top: 20px;
+  bottom: 20px;
+  max-width: 600px;
+  width: 90%;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .is-active .modal {
-	transform: scale(1);
-	opacity: 1;
-	box-shadow: 6px 6px 20px 20px #0000001c;
+  transform: scale(1);
+  opacity: 1;
+  box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 20px;
+  inset-inline-end: 20px;
 }
 
 .bg-dark.is-active {
-	opacity: 1;
-	pointer-events: all;
+  opacity: 1;
+  pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-	opacity: 1;
+  opacity: 1;
 }
 
 .is-side.is-active .modal {
-	pointer-events: all;
+  pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-	.tool-bar {
-			margin: -2rem 0 1rem;
-			align-items: center;
-	}
+  .tool-bar {
+    margin: -2rem 0 1rem;
+    align-items: center;
+  }
 
-	.is-active.is-side .modal {
-			inset-inline-end: 5%;
-	}
-}
+  .is-active.is-side .modal {
+    inset-inline-end: 5%;
+  }
+}

package/src/styles/theme.css

@@ -369,12 +369,6 @@
   transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
-.FormRow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-}
-
 .detail-main {
   overflow-y: auto;
 }
@@ -388,18 +382,6 @@
   font-size: 9px;
 }
 
-.empty-box {
-  width: 100%;
-  background-color: var(--bgl-gray-light);
-  color: var(--bgl-gray);
-  text-align: center;
-  padding: 20px;
-  border-radius: 10px;
-  justify-content: center;
-  flex-direction: column;
-  display: flex;
-}
-
 .field {
   --field-count: 1;
   --width: calc(100% / var(--field-count));

package/src/types/BagelForm.ts

@@ -1,5 +1,3 @@
-import type { RequireAllOrNone } from 'type-fest';
-
 export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>;
 
 export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
@@ -8,28 +6,26 @@ export interface Attributes<T = any> {
   [key: string]: AttributeValue | AttributeFn<T>
 }
 
-export type Field<T = Record<string, any>> = RequireAllOrNone<{
+export type Field<T = Record<string, any>> = {
   $el?: any;
   id?: string;
   label?: string;
   placeholder?: string;
   children?: Field<T>[];
   class?: AttributeValue | AttributeFn<T>,
-  options?: string | ({ label: string; value: string | number }|string|number)[],
+  options?: string | ({ label: string; value: string | number } | string | number)[],
   attrs?: Attributes<T>;
   required?: boolean;
   hint?: string;
   defaultValue?: any;
-  transform?: (val?: any, rowData?:Record<string, any>) => any;
-  onUpdate?: (val: any, fieldData?:any, rowData?:Record<string, any>) => void;
+  transform?: (val?: any, rowData?: Record<string, any>) => any;
+  onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
   'v-if'?: string | boolean | ((val: any, row: T) => boolean);
-},
-'id' | '$el'
->
+}
 
 export interface SelectBagelField {
-	inputType: 'SelectField';
-	options: string | { label: string; value: string | number }[];
+  inputType: 'SelectField';
+  options: string | { label: string; value: string | number }[];
 }
 
 export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];

package/src/components/ContactArray.vue

@@ -1,113 +0,0 @@
-<template>
-	<div class="bagel-input mt-2">
-		{{ label }}
-		<div class="mb-2 mt-1">
-			<div
-				class="bglform-contact"
-				v-for="(contact, i) in val"
-				:key="i"
-			>
-				<input
-					v-model="contact.email"
-					:placeholder="placeholders.email"
-					type="email"
-					v-if="id === 'email'"
-				>
-				<input
-					v-model="contact.phone"
-					:placeholder="placeholders.phone"
-					type="tel"
-					v-if="id === 'phone'"
-				>
-				<input
-					v-if="contact.email || contact.phone"
-					v-model="contact.label"
-					type="text"
-					:placeholder="placeholders.label"
-				>
-				<div class="bglform-contact-opt">
-					<!-- <input v-model="contact.primary" id="primary" type="checkbox" > -->
-					<CheckInput
-						label = "Primary"
-						v-model="contact.primary"
-					/>
-					<MaterialIcon
-						@click="val.splice(i, 1)"
-						icon="delete"
-						class="btn-float"
-					/>
-				</div>
-			</div>
-			<Btn
-				color="light"
-				thin
-				@click="val.push({})"
-				icon="add"
-			>
-				Add
-			</Btn>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { MaterialIcon, Btn, CheckInput } from '.';
-
-withDefaults(
-	defineProps<{
-		label?: string;
-		modelValue: any;
-		editMode?: boolean;
-		small?: boolean;
-		id: string;
-		placeholders: {
-			email: string
-			phone: string
-			label: string
-		}
-	}>(),
-	{
-		editMode: true,
-		small: false,
-	},
-);
-
-const val = defineModel<any[]>('modelValue', { default: [] });
-</script>
-<!--
-<style>
-.bglform-contact {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-
-	gap: 1rem;
-	position: relative;
-}
-.bglform-contact-opt {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	justify-content: start;
-	width: 80px;
-}
-.bglform-contact-opt:after {
-	content: '';
-	grid-column: span 2;
-}
-.bagel-input.checkbox {
-	width: auto;
-	padding: 0;
-	min-width: 0;
-}
-.btn-float {
-	cursor: pointer;
-	color: var(--bgl-gray);
-	transition: var(--bgl-transition);
-}
-.btn-float:hover {
-	color: var(--bgl-red);
-}
-.btn-float:active {
-	filter: brightness(0.8);
-}
-</style> -->

package/src/components/Drop.vue

@@ -1,150 +0,0 @@
-<template>
-  <label>{{ label }}</label>
-  <div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
-    <div class="dropdown-title" :class="{ hasSelection: selectedOption }">
-      {{ selectedOption || placeholder }}
-      <MaterialIcon icon="keyboard_arrow_down" />
-    </div>
-    <div class="dropdown-body">
-      <p v-for="(option, index) in options" :key="index" @click.stop="selectOption(option)">
-        {{ optionToLabel(option) }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { MaterialIcon } from '@bagelink/vue';
-
-type Option = {
-  label: string;
-  value: string;
-} | string | number;
-
-const emit = defineEmits(['update:modelValue']);
-
-function optionToLabel(option?: Option) {
-  if (!option) return '';
-  if (typeof option === 'string' || typeof option === 'number') return option;
-  return option.label;
-}
-
-function optionToValue(option?: Option) {
-  if (!option) return '';
-  if (typeof option === 'string' || typeof option === 'number') return option;
-  return option.value;
-}
-
-const props = defineProps<{
-  modelValue: string | number,
-  options: Option[],
-  placeholder?: string,
-  label?: string,
-  id: string,
-  required: boolean
-}>();
-
-let isOpen = $ref(false);
-
-let selectedVal = $ref(props.modelValue);
-
-const selectedOption = $computed(() => {
-  const option = props.options.find((optn) => optionToValue(optn) === selectedVal);
-  return optionToLabel(option);
-});
-
-function toggleDropdown() {
-  isOpen = !isOpen;
-}
-
-function selectOption(option: Option) {
-  selectedVal = optionToValue(option);
-  emit('update:modelValue', selectedVal);
-  isOpen = false;
-}
-</script>
-
-<style>
-.dropdown {
-  position: relative;
-  font-size: calc(var(--input-font-size) * 1.3);
-  /* width: 50px; */
-  z-index: 9;
-
-}
-
-.dropdown-title {
-  white-space: nowrap;
-  color: var(--bgl-gray);
-  border-radius: var(--input-border-radius);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  display: flex;
-  align-items: center;
-  min-height: var(--input-height);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  justify-content: space-between;
-  user-select: none;
-  position: relative;
-}
-
-.dropdown-title.hasSelection {
-  color: var(--bgl-primary);
-}
-
-.open .dropdown {
-  min-width: 120px;
-}
-
-.dropdown-title:hover {
-  filter: var(--bgl-hover-filter);
-  color: var(--bgl-primary);
-}
-
-.dropdown-title:active {
-  filter: var(--bgl-active-filter);
-}
-
-.dropdown-body {
-  border-radius: var(--input-border-radius);
-  position: absolute;
-  transition: var(--bgl-transition);
-  max-height: 0;
-  overflow: hidden;
-  background: var(--bgl-white);
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  overflow: auto;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
-  z-index: 99999999;
-}
-
-.dropdown-body * {
-  display: block;
-  cursor: pointer;
-  padding: calc(var(--btn-padding) / 2);
-  padding-bottom: calc(var(--btn-padding) / 4);
-  padding-top: calc(var(--btn-padding) / 4);
-  margin: 0;
-  color: inherit;
-  text-decoration: none;
-  line-height: 1;
-  transition: var(--bgl-transition);
-}
-
-.dropdown-body *:hover {
-  filter: var(--bgl-hover-filter);
-  color: var(--bgl-primary);
-}
-
-.dropdown-body *:active {
-  filter: var(--bgl-active-filter);
-}
-
-.dropdown.opendrop .dropdown-body {
-  max-height: 150px;
-}
-</style>