@bagelink/vue 0.0.270 → 0.0.280

package/src/components/formkit/Toggle.vue

@@ -1,164 +1,149 @@
 <template>
-	<div
-		class="bagel-input checkbox"
-		:class="{ check: context?.attrs.isCheckbox }"
-		:title="context?.help"
-	>
+	<div class="bagel-input checkbox" :title="label">
 		<label class="switch">
-			<input
-				@change="() => props.context?.node.input(inputVal)"
-				type="checkbox"
-				v-model="inputVal"
-				:id="context?.id"
-			>
+			<input type="checkbox" v-model="inputVal" :id="id">
 			<span class="slider round" />
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
-
-const props = defineProps({
-	context: Object,
+defineProps<{
+	helpText?: string;
+	id: string;
+	label?: string;
+}>();
+const inputVal = defineModel('modelValue', {
+	type: Boolean,
+	default: false,
 });
-
-let inputVal = $ref(false);
-
-watch(
-	() => props.context?.value,
-	(newVal) => {
-		inputVal = newVal;
-	},
-	{ immediate: true },
-);
 </script>
 
 <style>
 .checkbox-label {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  align-items: center;
-  cursor: pointer;
+	display: flex;
+	gap: 0.5rem;
+	flex-direction: row-reverse;
+	justify-content: flex-end;
+	align-items: center;
+	cursor: pointer;
 }
 </style>
 
 <style scoped>
 .no-edit {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .radio-wrap p {
-  display: inline-block;
-  color: var(--input-bg);
-  font-size: var(--input-font-size);
-  margin-inline-end: 10px;
+	display: inline-block;
+	color: var(--input-bg);
+	font-size: var(--input-font-size);
+	margin-inline-end: 10px;
 }
 
 .radio-wrap label {
-  padding: 3px 5px;
-  display: inline-block;
-  border-radius: var(--input-border-radius);
-  font-size: var(--input-font-size);
-  background: var(--input-bg);
-  color: var(--bgl-black);
-  text-align: center;
-  margin: 8px 5px;
-  cursor: pointer;
-  user-select: none;
+	padding: 3px 5px;
+	display: inline-block;
+	border-radius: var(--input-border-radius);
+	font-size: var(--input-font-size);
+	background: var(--input-bg);
+	color: var(--bgl-black);
+	text-align: center;
+	margin: 8px 5px;
+	cursor: pointer;
+	user-select: none;
 }
 
 .bagel-input .radio-wrap label::after {
-  background: transparent;
+	background: transparent;
 }
 
 .radio-wrap input {
-  display: none;
+	display: none;
 }
 
-.radio-wrap input:checked:checked + label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-wrap input:checked:checked+label {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .checkbox {
-  position: relative;
+	position: relative;
 }
 
 .switch {
-  position: relative;
-  display: inline-block;
-  height: calc(var(--input-height) / 2);
-  width: var(--input-height);
-  border-radius: var(--input-height);
+	position: relative;
+	display: inline-block;
+	height: calc(var(--input-height) / 2);
+	width: var(--input-height);
+	border-radius: var(--input-height);
 }
 
 .switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+	opacity: 0;
+	width: 0;
+	height: 0;
 }
 
 .bagel-input.checkbox.check {
-  margin: 0;
+	margin: 0;
 }
 
 .bagel-input.checkbox.check .switch {
-  width: calc(var(--input-height) / 2);
-  height: calc(var(--input-height) / 2);
-  transition: 0.2s;
+	width: calc(var(--input-height) / 2);
+	height: calc(var(--input-height) / 2);
+	transition: 0.2s;
 }
 
 .bagel-input.checkbox.check .slider:before {
-  position: absolute;
-  font-family: "Material Symbols Outlined", serif;
-  content: "";
-  color: var(--bgl-white);
-  background: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	position: absolute;
+	font-family: "Material Symbols Outlined", serif;
+	content: "";
+	color: var(--bgl-white);
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-.bagel-input.checkbox.check input:checked + .slider:before {
-  transform: none;
-  content: "check";
+.bagel-input.checkbox.check input:checked+.slider:before {
+	transform: none;
+	content: "check";
 }
 
 .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;
+	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;
+	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 {
+	background: var(--bgl-primary);
 }
 
-input:checked + .slider:before {
-  transform: translateX(calc(var(--input-height) / 2));
+input:checked+.slider:before {
+	transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as LangText } from './LangText.vue';
 export { default as RTXEditor } from './RTXEditor.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
+export { default as Icon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
@@ -18,6 +19,8 @@ export { default as DataPreview } from './DataPreview.vue';
 export { default as Card } from './Card.vue';
 export { default as Avatar } from './Avatar.vue';
 export { default as Title } from './Title.vue';
+export { default as Accordion } from './Accordion.vue';
+export { default as ComboBox } from './ComboBox.vue';
 
 export * from './charts';
 export * from './form';

package/src/plugins/bagel.ts

@@ -1,6 +1,9 @@
+// import { vTooltip } from 'floating-vue';
+import FloatingVue from 'floating-vue';
 import { inject } from 'vue';
 import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
+import clickOutside from '../utils/clickOutside';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
@@ -29,11 +32,20 @@ export interface BagelOptions {
 	// eslint-disable-next-line no-unused-vars
 	i18nT?: (key: string) => string
 }
-
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
 		const bagel = new Bagel({ host: options.host, onError: options.onError });
-
+		app.directive('click-outside', clickOutside);
+
+		app.use(FloatingVue, {
+			themes: {
+				'bgl-theme': {
+					triggers: ['click'],
+					autoHide: true,
+					placement: 'bottom',
+				},
+			},
+		});
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
 		app.config.globalProperties.$i18T = options?.i18nT || ((key?: string) => key);

package/src/plugins/modal.ts

@@ -6,39 +6,39 @@ import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
 import { Modal, ModalForm } from '@bagelink/vue';
 
 export interface ModalOptions {
-	title?: string;
-	dismissable?: boolean;
-	side?: boolean;
-	actions?: BtnOptions[];
-	class?: string;
+  title?: string;
+  dismissable?: boolean;
+  side?: boolean;
+  actions?: BtnOptions[];
+  class?: string;
 }
 
 export interface ModalFormOptions {
-	side?: boolean;
-	title?: string;
-	dismissable?: boolean;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
-	onSubmit?: (formData: any) => Promise<any>;
-	onDelete?: (id: string) => Promise<void>;
-	onError?: ((err: any) => void);
-	modelValue?: Record<string, any>;
-	'onUpdate:modelValue'?: (val: any) => void;
+  side?: boolean;
+  title?: string;
+  dismissable?: boolean;
+  schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
+  onSubmit?: (formData: any) => Promise<void>;
+  onDelete?: (id: string) => Promise<void>;
+  onError?: ((err: any) => void);
+  modelValue?: Record<string, any>;
+  'onUpdate:modelValue'?: (val: any) => void;
 }
 
 export interface ModalComponentProps {
-	componentSlots: Record<string, any>,
-	modalType: 'modal' | 'modalForm',
-	modalOptions: ModalOptions | ModalFormOptions
+  componentSlots: Record<string, any>,
+  modalType: 'modal' | 'modalForm',
+  modalOptions: ModalOptions | ModalFormOptions
 }
 export interface ModalFormComponentProps {
-	componentSlots: Record<string, any>,
-	modalType: 'modalForm',
-	modalOptions: ModalFormOptions
+  componentSlots: Record<string, any>,
+  modalType: 'modalForm',
+  modalOptions: ModalFormOptions
 }
 export interface ModalApi {
-	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
-	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
-	hideModal: (index?: number) => void;
+  showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
+  showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
+  hideModal: (index?: number) => void;
 }
 
 export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');

package/src/styles/buttons.css

@@ -1,61 +1,59 @@
-button,
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-    font-family: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    box-sizing: border-box;
-    user-select: none;
-    border: none;
-    transition: var(--bgl-transition);
-    border-radius: var(--btn-border-radius);
-    line-height: var(--btn-height);
-    font-size: var(--input-font-size);
-    display: inline-block;
-    height: var(--btn-height);
-    padding: 0
+	font-family: inherit;
+	white-space: nowrap;
+	cursor: pointer;
+	box-sizing: border-box;
+	user-select: none;
+	border: none;
+	transition: var(--bgl-transition);
+	border-radius: var(--btn-border-radius);
+	line-height: var(--btn-height);
+	font-size: var(--input-font-size);
+	display: inline-block;
+	height: var(--btn-height);
+	padding: 0;
 }
 
 .btn-close {
-    margin-top: -20px;
-    margin-inline-end: -20px;
-    margin-inline-start: auto;
-    margin-bottom: 15px;
-    transition: var(--bgl-transition);
-    height: 30px;
-    width: 30px;
-    opacity: 0.6;
-    cursor: pointer;
-    border-radius: 100%;
-    outline: 2px solid transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	margin-top: -20px;
+	margin-inline-end: -20px;
+	margin-inline-start: auto;
+	margin-bottom: 15px;
+	transition: var(--bgl-transition);
+	height: 30px;
+	width: 30px;
+	opacity: 0.6;
+	cursor: pointer;
+	border-radius: 100%;
+	outline: 2px solid transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .btn-close:hover {
-    background: var(--bgl-gray-light);
-    opacity: 1;
+	background: var(--bgl-gray-light);
+	opacity: 1;
 }
 
 .btn-close:active {
-    background: var(--bgl-gray);
+	background: var(--bgl-gray);
 }
 
 .btn-close::before {
-    content: "close";
-    font-family: "Material Symbols Outlined", serif;
+	content: "close";
+	font-family: "Material Symbols Outlined", serif;
 }
 
-
 .bgl_btn.thin {
-    height: calc(var(--btn-height) * 0.7);
-    line-height: calc(var(--btn-height) * 0.7);
+	height: calc(var(--btn-height) * 0.7);
+	line-height: calc(var(--btn-height) * 0.7);
 }
 
 @media screen and (max-width: 910px) {
-    .bgl_btn {
-        padding: 0 20px;
-    }
-}
+	.bgl_btn {
+		padding: 0 20px;
+	}
+}