@bagelink/vue 0.0.114 → 0.0.116

package/dist/style.css

@@ -619,17 +619,17 @@
 	width: 99%;
 }
 
-.comments-wrap[data-v-10f58b91] {
+.comments-wrap[data-v-ff29354a] {
 	display: grid;
 	grid-template-rows: 1fr 40px;
 	height: 100%;
 	position: relative;
 	gap: 0.5rem;
 }
-.comments-wrap p[data-v-10f58b91] {
+.comments-wrap p[data-v-ff29354a] {
 	margin: 0;
 }
-.comments-wrap[data-v-10f58b91]::before {
+.comments-wrap[data-v-ff29354a]::before {
 	content: '';
 	inset-inline-start: 10px;
 	top: 0px;
@@ -638,27 +638,27 @@
 	position: absolute;
 	bottom: 10px;
 }
-.comment-top[data-v-10f58b91] {
+.comment-top[data-v-ff29354a] {
 	display: flex;
 	align-items: baseline;
 	flex-wrap: wrap;
 	position: relative;
 	margin-inline-start: 1rem;
 }
-.comment-list[data-v-10f58b91] {
+.comment-list[data-v-ff29354a] {
 	padding: 0.5rem;
 	height: 100%;
 	overflow: auto;
 }
-.comment[data-v-10f58b91] {
+.comment[data-v-ff29354a] {
 	margin-bottom: 1rem;
 }
-.comment-owner[data-v-10f58b91] {
+.comment-owner[data-v-ff29354a] {
 	font-size: 14px;
 	margin-inline-end: 0.5rem;
 	color: var(--bgl-gray);
 }
-.comment-owner[data-v-10f58b91]::before {
+.comment-owner[data-v-ff29354a]::before {
 	content: '';
 	height: 12px;
 	width: 12px;
@@ -668,18 +668,18 @@
 	inset-inline-start: -1.2rem;
 	top: 0.2rem;
 }
-.me .comment-owner[data-v-10f58b91] {
+.me .comment-owner[data-v-ff29354a] {
 	color: var(--bgl-blue);
 }
-.me .comment-owner[data-v-10f58b91]::before {
+.me .comment-owner[data-v-ff29354a]::before {
 	background: var(--bgl-blue);
 }
-.comment-time[data-v-10f58b91] {
+.comment-time[data-v-ff29354a] {
 	color: var(--bgl-gray);
 	font-size: 10px;
 	white-space: nowrap;
 }
-.comment-actions[data-v-10f58b91] {
+.comment-actions[data-v-ff29354a] {
 	background: red;
 	line-height: 0;
 	display: flex;
@@ -687,35 +687,35 @@
 	flex-grow: 1;
 	gap: 0.25rem;
 }
-.comment .comment-actions .edit[data-v-10f58b91] {
+.comment .comment-actions .edit[data-v-ff29354a] {
 	opacity: 0;
 }
-.comment-actions .edit[data-v-10f58b91] {
+.comment-actions .edit[data-v-ff29354a] {
 	margin-inline-end: auto;
 }
-.comment.me:hover .comment-actions .edit[data-v-10f58b91] {
+.comment.me:hover .comment-actions .edit[data-v-ff29354a] {
 	opacity: 0.4;
 }
-.comment-actions>div[data-v-10f58b91] {
+.comment-actions>div[data-v-ff29354a] {
 	transition: all 200ms ease;
 	cursor: pointer;
 	opacity: 0.6;
 }
-.comment-actions>div[data-v-10f58b91]:hover {
+.comment-actions>div[data-v-ff29354a]:hover {
 	color: var(--bgl-blue);
 }
-.comment-actions .delete[data-v-10f58b91]:hover {
+.comment-actions .delete[data-v-ff29354a]:hover {
 	color: var(--bgl-red);
 }
-.comment-actions>div[data-v-10f58b91]:active {
+.comment-actions>div[data-v-ff29354a]:active {
 	filter: brightness(70%);
 }
-.icon-font.delete[data-v-10f58b91],
-.icon-font.save[data-v-10f58b91] {
+.icon-font.delete[data-v-ff29354a],
+.icon-font.save[data-v-ff29354a] {
 	display: none;
 }
-.editable .icon-font.delete[data-v-10f58b91],
-.editable .icon-font.save[data-v-10f58b91] {
+.editable .icon-font.delete[data-v-ff29354a],
+.editable .icon-font.save[data-v-ff29354a] {
 	display: block;
 }
 
@@ -728,10 +728,10 @@
 /* overflow: hidden; */
 /* border-radius: 10px; */
 /* } */
-.editable .editor-wrapper[data-v-10f58b91] {
+.editable .editor-wrapper[data-v-ff29354a] {
 	background-color: var(--bgl-bg);
 }
-.new-comment[data-v-10f58b91] {
+.new-comment[data-v-ff29354a] {
 	display: flex;
 	align-items: flex-end;
 	position: relative;
@@ -741,7 +741,7 @@
 	color: var(--input-color);
 	line-height: 1.6;
 }
-.comment-input[data-v-10f58b91] {
+.comment-input[data-v-ff29354a] {
 	max-height: 100px;
 	overflow: auto;
 	flex-grow: 1;
@@ -888,6 +888,85 @@ th[data-v-5c5ba615] {
 	width: 100%;
 }
 
+.person-card {
+	border: 1.1px solid var(--border-color);
+	/* background: var(--input-bg); */
+	border-radius: var(--card-border-radius);
+	padding: 1rem;
+	margin-bottom: 0.5rem;
+	font-size: 1rem;
+	position: relative;
+}
+.person-card p {
+	margin: 0;
+}
+.person-card-details {
+	font-size: 14px;
+	margin-bottom: 2px;
+	line-height: 1.3;
+	display: flex;
+}
+.person-card-details p {
+	color: var(--input-color);
+	opacity: 0.6;
+}
+.person-card-details.badge p {
+	opacity: 1;
+}
+.person-card-details p:nth-child(2) {
+	opacity: 1;
+	padding-inline-end: 0.5rem;
+}
+.person-card-details .icon-font {
+	color: var(--bgl-blue);
+	padding-inline-end: 0.25rem;
+}
+.person-card-edit {
+	position: absolute;
+	inset-inline-end: 1rem;
+}
+.person-card-details-wrap {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+.person-card-icon {
+	background: var(--bgl-gray);
+	height: 30px;
+	width: 30px;
+	border-radius: 100%;
+	text-transform: uppercase;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	font-size: 12px;
+}
+.person-card-icon-wrap {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-bottom: 0.75rem;
+}
+@media screen and (max-width: 910px) {
+.person-card-icon-wrap {
+		padding-bottom: 0.5rem;
+}
+.person-card {
+		padding: 0.75rem;
+		position: relative;
+}
+.person-card-edit {
+		/* position: relative; */
+		inset-inline-end: 0.5rem;
+		margin-bottom: 1rem;
+		justify-content: flex-end;
+}
+.person-card-name {
+		max-width: calc(100% - 170px);
+}
+}
+
 /* .group-wrap * {
   outline: 1px solid red;
 } */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,8 +51,7 @@
     "./vite.config.ts"
   ],
   "dependencies": {
-    "vue": "^3.3.8",
-    "@bagelink/sdk": "0.0.114"
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.0"

package/src/components/Comments.vue

@@ -60,7 +60,7 @@
 				icon="send"
 				@click="newComment"
 			>
-				{{ form.send }}
+				{{ sendBtnLabel }}
 			</Btn>
 		</div>
 	</div>
@@ -88,9 +88,7 @@ let editComment = $ref<Comment | null>(null);
 const props = defineProps<{
 	ref_table: string;
 	ref_id: string;
-	form: {
-		send: string;
-	}
+	sendBtnLabel: string;
 }>();
 
 const fetchData = async () => {

package/src/components/PersonPreview.vue

@@ -96,7 +96,7 @@ const showEditForm = async () => {
 	modalForm({
 		side: true,
 		title: `${first_name} ${last_name}`,
-		schema: props.personSchema,
+		schema: props.personSchema(),
 		modelValue: props.person,
 		onSubmit: (newPerson) => bagel
 			.put('/person', newPerson),

package/src/components/charts/index.ts

@@ -1 +1 @@
-export * as BarChart from './BarChart.vue';
+export { default as BarChart } from './BarChart.vue';

package/src/components/dashboard/index.ts

@@ -1 +1 @@
-export * as Lineart from './Lineart.vue';
+export { default as Lineart } from './Lineart.vue';

package/src/components/form/index.ts

@@ -1,4 +1,4 @@
-export * as ItemRef from './ItemRef.vue';
-export * as MaterialIcon from './MaterialIcon.vue';
-export * as PlainInputField from './PlainInputField.vue';
+export { default as ItemRef } from './ItemRef.vue';
+export { default as MaterialIcon } from './MaterialIcon.vue';
+export { default as PlainInputField } from './PlainInputField.vue';
 export * from './inputs';

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

@@ -1,17 +1,17 @@
-export * as CheckInput from './CheckInput.vue';
-export * as CurrencyInput from './CurrencyInput.vue';
-export * as DateInput from './DateInput.vue';
-export * as DatetimeInput from './DatetimeInput.vue';
-export * as EmailInput from './EmailInput.vue';
-export * as FloatInput from './FloatInput.vue';
-export * as IntInput from './IntInput.vue';
-export * as JSONInput from './JSONInput.vue';
-export * as LinkField from './LinkField.vue';
-export * as PasswordInput from './PasswordInput.vue';
-export * as Password from './Password.vue';
-export * as ReadOnlyInput from './ReadOnlyInput.vue';
-export * as SelectField from './SelectField.vue';
-export * as TextInput from './TextInput.vue';
-export * as RichTextEditor from './RichTextEditor.vue';
-export * as TableField from './TableField.vue';
-export * as DurationInput from './DurationInput.vue';
+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 EmailInput } from './EmailInput.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 SelectField } from './SelectField.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';

package/src/components/formkit/index.ts

@@ -8,22 +8,22 @@ import FileUploader from './FileUploader.vue';
 import PPV from '../PersonPreviewFormkit.vue';
 import TextVariableExamples from '../whatsapp/form/TextVariableExamples.vue';
 
-const ContactArray = createInput(ContactArrayFormKit);
-const Address = createInput(AddressArray);
-const BankDetails = createInput(BankDetailsArray);
-const MiscFields = createInput(MiscFieldsBtns);
-const ToggleSwitch = createInput(Toggle);
-const FileUpload = createInput(FileUploader);
-const TextVariables = createInput(TextVariableExamples);
-const PersonPreview = createInput(PPV);
+const ContactArrayInput = createInput(ContactArrayFormKit);
+const AddressInput = createInput(AddressArray);
+const BankDetailsInput = createInput(BankDetailsArray);
+const MiscFieldsInput = createInput(MiscFieldsBtns);
+const ToggleSwitchInput = createInput(Toggle);
+const FileUploadInput = createInput(FileUploader);
+const TextVariablesInput = createInput(TextVariableExamples);
+const PersonPreviewInput = createInput(PPV);
 
 export {
-	TextVariables,
-	ContactArray,
-	PersonPreview,
-	Address,
-	BankDetails,
-	MiscFields,
-	ToggleSwitch,
-	FileUpload,
+	TextVariablesInput,
+	ContactArrayInput,
+	PersonPreviewInput,
+	AddressInput,
+	BankDetailsInput,
+	MiscFieldsInput,
+	ToggleSwitchInput,
+	FileUploadInput,
 };

package/src/components/index.ts

@@ -1,22 +1,23 @@
-export * as LangText from './LangText.vue';
-export * as RTXEditor from './RTXEditor.vue';
-export * as MaterialIcon from './MaterialIcon.vue';
-export * as NavBar from './NavBar.vue';
-export * as Btn from './Btn.vue';
-export * as Modal from './Modal.vue';
-export * as DropDown from './DropDown.vue';
-export * as ListView from './ListView.vue';
-export * as ListItem from './ListItem.vue';
-export * as TabbedLayout from './TabbedLayout.vue';
-export * as Comments from './Comments.vue';
-export * as PageTitle from './PageTitle.vue';
-export * as ModalForm from './ModalForm.vue';
-export * as DataPreview from './DataPreview.vue';
-export * as FormSchema from './FormSchema.vue';
-export * as TableSchema from './TableSchema.vue';
-export * as TopBar from './TopBar.vue';
-export * as RouterWrapper from './RouterWrapper.vue';
-export * as ContactSubmissions from './ContactSubmissions.vue';
+export { default as LangText } from './LangText.vue';
+export { default as RTXEditor } from './RTXEditor.vue';
+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 DropDown } from './DropDown.vue';
+export { default as ListView } from './ListView.vue';
+export { default as ListItem } from './ListItem.vue';
+export { default as TabbedLayout } from './TabbedLayout.vue';
+export { default as Comments } from './Comments.vue';
+export { default as PageTitle } from './PageTitle.vue';
+export { default as ModalForm } from './ModalForm.vue';
+export { default as DataPreview } from './DataPreview.vue';
+export { default as FormSchema } from './FormSchema.vue';
+export { default as TableSchema } from './TableSchema.vue';
+export { default as TopBar } from './TopBar.vue';
+export { default as RouterWrapper } from './RouterWrapper.vue';
+export { default as ContactSubmissions } from './ContactSubmissions.vue';
+export { default as PersonPreview } from './PersonPreview.vue';
 
 export * from './charts';
 export * from './formkit';

package/src/components/whatsapp/index.ts

@@ -1,2 +1,2 @@
-export * as MsgTemplate from './form/MsgTemplate.vue';
-export * as TextVariableExamples from './form/TextVariableExamples.vue';
+export { default as MsgTemplate } from './form/MsgTemplate.vue';
+export { default as TextVariableExamples } from './form/TextVariableExamples.vue';

package/tsconfig.json

@@ -19,6 +19,7 @@
 		"declaration": true,
 		"declarationMap": true,
 		"useDefineForClassFields": true,
+		"allowSyntheticDefaultImports": true,
 		"lib": [
 			"ESNext",
 			"DOM"

package/vite.config.ts

@@ -19,7 +19,6 @@ export default defineConfig(() => ({
 	build: {
 		minify: false,
 		lib: {
-
 			entry: resolve(indexDir, 'index.ts'),
 			formats: ['es', 'cjs'],
 			fileName: (module, entry) => `${entry}.${module === 'es' ? 'mjs' : module}`,