@bagelink/vue 0.0.322 → 0.0.335

package/src/utils/BagelFormUtils.ts

@@ -52,7 +52,7 @@ export function numField(id: string, label?: string, options?: TextInputOptions)
 export function frmRow(...children: Field[]) {
 	return {
 		$el: 'div',
-		class: 'flex gap-1',
+		class: 'flex gap-1 m_block',
 		children,
 	};
 }

package/src/utils/index.ts

@@ -44,7 +44,6 @@ export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?
 		key,
 		typeof value === 'function' ? value(fieldVal, row) : value,
 	]);
-	if (attrs.options) console.log('arr', arr);
 	const resolvedAttrs = Object.fromEntries(arr);
 	return resolvedAttrs;
 }

package/src/components/ComboBox.vue

@@ -1,165 +0,0 @@
-<template>
-	<Dropdown placement="bottom-start" class="bagel-input combobox">
-		<label>
-			{{ label  }}
-			<button type="button" class="combobox-btn" @click="toggle">
-				{{ valueToLabel(selectedItem) || placeholder || 'Select' }}
-				<MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
-			</button>
-			<input
-				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
-				v-model="selectedItem" required
-			>
-		</label>
-		<template #popper="{ hide }">
-			<Card thin class="combobox-options" :style="{width: fullWidth?'100%':'auto'}">
-				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-				<div
-					class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
-						select(option); hide();
-					}" :class="{ selected: option === selectedItem }"
-				>
-					<span>
-						{{ getLabel(option) }}
-					</span>
-					<Icon v-if="isSelected(option)" icon="check" />
-				</div>
-				<slot name="last" />
-			</Card>
-		</template>
-	</Dropdown>
-</template>
-
-<script lang="ts" setup>
-import { watch } from 'vue';
-import { Dropdown } from 'floating-vue';
-import 'floating-vue/style.css';
-import {
-	TextInput, Card, Icon, MaterialIcon,
-} from '@bagelink/vue';
-
-type Option = string | number | Record<string, any> | { label: string, value: string | number };
-let open = $ref(false);
-
-const searchInput = $ref<HTMLInputElement | null>(null);
-
-const props = defineProps<{
-  options: Option[];
-  placeholder?: string;
-  disabled?: boolean;
-  modelValue?: Option;
-  searchable?: boolean;
-  required?: boolean;
-	label?: string;
-	fullWidth?: boolean;
-}>();
-let selectedItem = $ref<Option>();
-let search = $ref('');
-
-const toggle = () => {
-	open = !open;
-	if (!open) search = '';
-	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
-};
-
-const valueToLabel = (value?: Option) => {
-	if (!value) return '';
-	const option = props.options.find((option) => {
-		if (typeof option === 'string' || typeof option === 'number') return option === value;
-		return option.value === value;
-	});
-	if (!option) return value;
-	return getLabel(option);
-};
-
-const emit = defineEmits(['update:modelValue']);
-
-const getLabel = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
-};
-
-const isSelected = (option: Option) => {
-	if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
-	return option.value === selectedItem;
-};
-
-const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = new RegExp(search, 'gi');
-	if (typeof option === 'string') return option.match(searchTerm);
-	if (typeof option === 'number') return `${option}`.match(searchTerm);
-	return option.label.match(searchTerm);
-}));
-
-const select = (option: Option) => {
-	if (typeof option === 'string') selectedItem = option;
-	else if (typeof option === 'number') selectedItem = option;
-	else selectedItem = option.value;
-	emit('update:modelValue', selectedItem);
-	open = false;
-};
-
-watch(() => props.modelValue, (value) => {
-	if (value !== selectedItem) selectedItem = value;
-}, { immediate: true });
-</script>
-
-<style scoped>
-.combobox {
-  width: 100%;
-}
-
-.combobox-option {
-  padding: 6px 12px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: all 0.2s;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.combobox-options {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.combobox-option:hover {
-  background: var(--bgl-gray-20);
-}
-</style>
-
-<style>
-.bagel-input label {
-  font-size: var(--label-font-size);
-}
-.combobox-btn {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--input-height);
-  border-radius: var(--input-border-radius);
-  border: none;
-  background: var(--input-bg);
-  padding: 0.7rem;
-  color: var(--input-color);
-  width: 100%;
-  font-family: inherit;
-}
-
-.combobox-btn:focus {
-  outline: none;
-  box-shadow: inset 0 0 10px #00000012;
-}
-
-.v-popper__arrow-container {
-  display: none;
-}
-
-.v-popper--theme-dropdown .v-popper__inner {
-  border: none;
-  background: transparent;
-  border-radius: var(--card-border-radius);
-}
-</style>

package/src/components/TabbedLayout.vue

@@ -1,87 +0,0 @@
-<template>
-	<div class="h-100 grid list-view gap-1" :class="{'side-tabs': sideTabs}">
-		<div class="bgl_card tabs-top">
-			<slot name="top-section" />
-			<div class="tabs grid auto-flow-columns fit-content">
-				<div
-					v-for="tab in tabs"
-					:class="{
-						active:
-							tab === activeTab ||
-							tab === router?.currentRoute.value.path.split('/').slice(-1)[0],
-					}"
-					class="tab"
-					:key="tab"
-					@click="changeTab(tab)"
-				>
-					{{ tab }}
-				</div>
-			</div>
-		</div>
-		<div
-			class="list-content"
-			v-for="tab in tabs.filter((item) => item === activeTab)"
-			:key="tab"
-		>
-			<slot :name="tab" :key="tab" />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import type { Router } from 'vue-router';
-
-const emit = defineEmits(['update:modelValue']);
-
-let activeTab = $ref<string>();
-const props = defineProps<{
-  title?: string;
-  tabs: string[];
-  modelValue?: string;
-  router?: Router;
-  sideTabs?: boolean;
-}>();
-
-function changeTab(tab: string) {
-	activeTab = tab;
-	emit('update:modelValue', activeTab);
-	if (!props.router) return;
-	void props.router?.push({
-		path: props.router.currentRoute.value.path,
-		query: { ...props.router.currentRoute.value.query, t: tab },
-		hash: props.router.currentRoute.value.hash,
-	});
-}
-
-onMounted(() => {
-	const firstTab =
-    props.modelValue ||
-    props.router?.currentRoute.value.query.t ||
-    props.tabs[0];
-	activeTab = firstTab as string;
-});
-</script>
-
-<style scoped>
-.tab {
-  text-transform: capitalize;
-}
-
-.side-tabs{
-  display: flex;
-}
-.side-tabs .tabs-top{
- margin-inline-end: 1rem;
-}
-.side-tabs .tabs{
-  display: block;
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.side-tabs .tab{
- border: none;
-}
-</style>