@bagelink/vue 0.0.342 → 0.0.346

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

@@ -0,0 +1,219 @@
+<template>
+  <div v-if="editor">
+    <Btn :flat="!editor.isActive(item.name, item.option)" @click="item.command" thin v-for="item in config"
+      v-tooltip="item.name" :key="item.name" :icon="item.icon" :disabled="item.disabled?.()" />
+  </div>
+  <editor-content :editor="editor" />
+</template>
+
+<script setup lang="ts">
+import { Btn } from '@bagelink/vue';
+import { onMounted, onBeforeUnmount } from 'vue';
+import StarterKit from '@tiptap/starter-kit';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import type { MaterialIcons } from '@bagelink/vue';
+
+let editor = $ref<Editor>();
+
+const props = defineProps<{ modelValue: string }>();
+
+const focus = () => {
+  if (!editor) throw new Error('editor is not defined');
+  return editor.chain().focus();
+};
+
+const config: { name: string, command: any, icon: MaterialIcons, option?: Record<string, any>, disabled?: () => boolean }[] = [
+  {
+    name: 'bold',
+    command: () => focus()?.toggleBold().run(),
+    icon: 'format_bold',
+    disabled: () => !editor?.can().chain().focus().toggleBold()
+      .run(),
+  },
+  {
+    name: 'italic',
+    command: () => focus().toggleItalic().run(),
+    icon: 'format_italic',
+    disabled: () => !editor?.can().chain().focus().toggleItalic()
+      .run(),
+  },
+  {
+    name: 'strike',
+    command: () => focus().toggleStrike().run(),
+    icon: 'format_strikethrough',
+    disabled: () => !editor?.can().chain().focus().toggleStrike()
+      .run(),
+  },
+  {
+    name: 'code',
+    command: () => focus().toggleCode().run(),
+    icon: 'code',
+  },
+  {
+    name: 'clearMarks',
+    command: () => focus().unsetAllMarks(),
+    icon: 'clear',
+
+  },
+  {
+    name: 'clearNodes',
+    command: () => focus().clearNodes().run(),
+    icon: 'clear',
+  },
+  {
+    name: 'paragraph',
+    command: () => focus().setParagraph().run(),
+    icon: 'format_paragraph',
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 1 }).run(),
+    icon: 'format_h1',
+    option: { level: 1 },
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 2 }).run(),
+    icon: 'format_h2',
+    option: { level: 2 },
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 3 }).run(),
+    icon: 'format_h3',
+    option: { level: 3 },
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 4 }).run(),
+    icon: 'format_h4',
+    option: { level: 4 },
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 5 }).run(),
+    icon: 'format_h5',
+    option: { level: 5 },
+  },
+  {
+    name: 'heading',
+    command: () => focus().toggleHeading({ level: 6 }).run(),
+    icon: 'format_h6',
+    option: { level: 6 },
+  },
+  {
+    name: 'bulletList',
+    command: () => focus().toggleBulletList().run(),
+    icon: 'format_list_bulleted',
+  },
+  {
+    name: 'orderedList',
+    command: () => focus().toggleOrderedList().run(),
+    icon: 'format_list_numbered',
+  },
+  {
+    name: 'codeBlock',
+    command: () => focus().toggleCodeBlock().run(),
+    icon: 'code',
+  },
+  {
+    name: 'blockquote',
+    command: () => focus().toggleBlockquote().run(),
+    icon: 'format_quote',
+  },
+  {
+    name: 'horizontalRule',
+    command: () => focus().setHorizontalRule().run(),
+    icon: 'horizontal_rule',
+  },
+  {
+    name: 'hardBreak',
+    command: () => focus().setHardBreak().run(),
+    icon: 'keyboard_return',
+
+  },
+  {
+    name: 'undo',
+    command: () => focus().undo().run(),
+    icon: 'undo',
+    disabled: () => !editor?.can().chain().focus().undo()
+      .run(),
+  },
+  {
+    name: 'redo',
+    command: () => focus().redo().run(),
+    icon: 'redo',
+    disabled: () => !editor?.can().chain().focus().redo()
+      .run(),
+  },
+];
+
+const emit = defineEmits(['update:modelValue']);
+
+onMounted(() => {
+  editor = new Editor({
+    extensions: [StarterKit],
+    content: props.modelValue,
+    onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
+  });
+});
+
+onBeforeUnmount(() => editor?.destroy());
+</script>
+
+<style>
+/* Basic editor styles */
+.tiptap>*+* {
+  margin-top: 0.75em;
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding: 0 1rem;
+}
+
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  line-height: 1.1;
+}
+
+.tiptap code {
+  background-color: rgba(97, 97, 97, 0.1);
+  color: #616161;
+}
+
+.tiptap pre {
+  background: #0d0d0d;
+  color: #fff;
+  font-family: 'JetBrainsMono', monospace;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+}
+
+.tiptap pre code {
+  color: inherit;
+  padding: 0;
+  background: none;
+  font-size: 0.8rem;
+}
+
+.tiptap img {
+  max-width: 100%;
+  height: auto;
+}
+
+.tiptap blockquote {
+  padding-left: 1rem;
+  border-left: 2px solid rgba(13, 13, 13, 0.1);
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 2px solid rgba(13, 13, 13, 0.1);
+  margin: 2rem 0;
+}
+</style>

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

@@ -1,29 +1,29 @@
 <template>
-	<Dropdown ref="dropdown" placement="bottom-start" class="bagel-input selectinput">
-		<label>
-			{{ label }}
-			<button :disabled="disabled" type="button" class="selectinput-btn">
-				{{ selecteLabel }}
-				<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="selectedItems" required>
-		</label>
-		<template #popper="{ hide }">
-			<Card class="selectinput-options p-05" :style="{ width: fullWidth ? '100%' : 'auto' }">
-				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-				<div class="selectinput-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`"
-					@click="select(option)" :class="{ selected: isSelected(option) }">
-					<Icon v-if="isSelected(option)" icon="check" />
-					<Icon class="opacity-3" v-if="!isSelected(option)" icon="fiber_manual_record" />
-					<span>
-						{{ getLabel(option) }}
-					</span>
-				</div>
-				<slot name="last" />
-			</Card>
-		</template>
-	</Dropdown>
+  <Dropdown @hide="updateOpen(false)" ref="dropdown" placement="bottom-start" class="bagel-input selectinput">
+    <label>
+      {{ label }}
+      <button @click="updateOpen(true)" :disabled="disabled" type="button" class="selectinput-btn">
+        {{ selecteLabel }}
+        <Icon 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="selectedItems" required>
+    </label>
+    <template #popper="{ hide }">
+      <Card class="selectinput-options p-05" :style="{ width: fullWidth ? '100%' : 'auto' }">
+        <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+        <div class="selectinput-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`"
+          @click="select(option)" :class="{ selected: isSelected(option) }">
+          <Icon v-if="isSelected(option)" icon="check" />
+          <Icon class="opacity-3" v-if="!isSelected(option)" icon="fiber_manual_record" />
+          <span>
+            {{ getLabel(option) }}
+          </span>
+        </div>
+        <slot name="last" />
+      </Card>
+    </template>
+  </Dropdown>
 </template>
 
 <script lang="ts" setup>
@@ -31,176 +31,177 @@ import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
 import {
-	TextInput, Card, Icon, MaterialIcon,
+  TextInput, Card, Icon,
 } 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;
-	multiselect?: boolean;
+  options: Option[];
+  placeholder?: string;
+  disabled?: boolean;
+  modelValue?: Option;
+  searchable?: boolean;
+  required?: boolean;
+  label?: string;
+  fullWidth?: boolean;
+  multiselect?: boolean;
 }>();
+
 const selectedItems = $ref<Option[]>([]);
 let search = $ref('');
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
 
-const toggle = () => {
-	dropdown?.hide();
-	open = !open;
-	if (!open) search = '';
-	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
-};
+let open = $ref(false);
+
+function updateOpen(visible: boolean) {
+  open = visible;
+  if (!open) search = '';
+  else setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+}
 
 const selecteLabel = $computed(() => {
-	if (selectedItems.length === 0) return props.placeholder || 'Select';
-	if (selectedItems.length > 4) {
-		const str = selectedItems.slice(0, 4).map((item) => getLabel(item)).join(', ');
-		return `${str}... +${selectedItems.length - 4}`;
-	}
-	return selectedItems.map((item) => getLabel(item)).join(', ');
+  if (selectedItems.length === 0) return props.placeholder || 'Select';
+  if (selectedItems.length > 4) {
+    const str = selectedItems.slice(0, 4).map((item) => getLabel(item)).join(', ');
+    return `${str}... +${selectedItems.length - 4}`;
+  }
+  return selectedItems.map((item) => getLabel(item)).join(', ');
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const getLabel = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
+  if (typeof option === 'string') return option;
+  if (typeof option === 'number') return `${option}`;
+  return option.label;
 };
 
 const getValue = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return option;
-	return option.value;
+  if (typeof option === 'string') return option;
+  if (typeof option === 'number') return option;
+  return option.value;
 };
 
 const isSelected = (option: Option) => selectedItems.includes(getValue(option));
 
 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 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) => {
-	const existingIndex = selectedItems.findIndex((item) => {
-		if (typeof item === 'string' || typeof item === 'number') return item === option;
-		return item.value === option;
-	});
-	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
-	else if (props.multiselect) {
-		selectedItems.push(getValue(option));
-	} else {
-		selectedItems.splice(0, selectedItems.length, getValue(option));
-		toggle();
-	}
-	emitUpdate();
+  const existingIndex = selectedItems.findIndex((item) => {
+    if (typeof item === 'string' || typeof item === 'number') return item === option;
+    return item.value === option;
+  });
+  if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+  else if (props.multiselect) {
+    selectedItems.push(getValue(option));
+  } else {
+    selectedItems.splice(0, selectedItems.length, getValue(option));
+    dropdown?.hide();
+  }
+  emitUpdate();
 };
 
 function emitUpdate() {
-	if (props.multiselect) {
-		emit('update:modelValue', selectedItems);
-	} else {
-		selectedItems.splice(1, selectedItems.length);
-		emit('update:modelValue', selectedItems[0]);
-	}
+  if (props.multiselect) {
+    emit('update:modelValue', selectedItems);
+  } else {
+    selectedItems.splice(1, selectedItems.length);
+    emit('update:modelValue', selectedItems[0]);
+  }
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
-	return isSame;
+  const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
+  return isSame;
 }
 
 watch(
-	() => props.modelValue,
-	(newVal: Option | Option[]) => {
-		if (!newVal) return;
-		if (!props.multiselect) {
-			if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
-		} else {
-			const isSame = compareArrays([newVal].flat(), selectedItems);
-			if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
-		}
-	},
-	{ immediate: true },
+  () => props.modelValue,
+  (newVal: Option | Option[]) => {
+    if (!newVal) return;
+    if (!props.multiselect) {
+      if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
+    } else {
+      const isSame = compareArrays([newVal].flat(), selectedItems);
+      if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
+    }
+  },
+  { immediate: true },
 );
 </script>
 
 <style scoped>
 .selectinput {
-	width: 100%;
+  width: 100%;
 }
 
 .selectinput-option {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns: 10px 1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: all 0.2s;
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--input-font-size);
 }
 
 .selectinput-options {
-	max-height: 300px;
-	overflow-y: auto;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .selectinput-option:hover {
-	background: var(--bgl-gray-20);
+  background: var(--bgl-gray-20);
 }
 </style>
 
 <style>
 .bagel-input label {
-	font-size: var(--label-font-size);
+  font-size: var(--label-font-size);
 }
 
 .selectinput-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;
+  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;
 }
 
 .selectinput-btn:disabled {
-	background: var(--input-disabled-bg);
-	color: var(--input-disabled-color);
+  background: var(--input-disabled-bg);
+  color: var(--input-disabled-color);
 }
 
 .selectinput-btn:focus {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
+  outline: none;
+  box-shadow: inset 0 0 10px #00000012;
 }
 
 .v-popper__arrow-container {
-	display: none;
+  display: none;
 }
 
 .v-popper--theme-dropdown .v-popper__inner {
-	border: none;
-	background: transparent;
-	border-radius: var(--card-border-radius);
+  border: none;
+  background: transparent;
+  border-radius: var(--card-border-radius);
 }
 </style>

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

@@ -2,7 +2,6 @@ export { default as CheckInput } from './CheckInput.vue';
 export { default as DateInput } from './DateInput.vue';
 export { default as JSONInput } from './JSONInput.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 TextInput } from './TextInput.vue';
 export { default as Checkbox } from './Checkbox.vue';
@@ -11,3 +10,4 @@ export { default as DatePicker } from './DatePicker.vue';
 export { default as RadioPillsInput } from './RadioPillsInput.vue';
 export { default as FileUpload } from './FileUpload.vue';
 export { default as ToggleInput } from './ToggleInput.vue';
+export { default as RichText } from './RichText.vue';

package/src/components/index.ts

@@ -1,4 +1,3 @@
-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';
@@ -8,7 +7,6 @@ export { default as ModalForm } from './ModalForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
-export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
 export { default as TableSchema } from './TableSchema.vue';
 export { default as TopBar } from './TopBar.vue';

package/src/components/layout/BottomMenu.vue

@@ -0,0 +1,64 @@
+<template>
+	<Card
+		class="hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center
+	overflow-x"
+	>
+    <slot name="brand" />
+    <Btn @click="nav.onClick" :to="nav.to" v-for="(nav, i) in navLinks" :key="i"
+    class="m_h-auto">
+      <Icon :icon="nav.icon" :size="1.4" class="m-0" />
+      <p class="m-0 pb-025  txt14 line-height-1">
+        {{ nav.label }}
+      </p>
+    </Btn>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+  Icon, Btn, type NavLink, Card,
+} from '@bagelink/vue';
+
+defineProps<{
+  navLinks: NavLink[];
+}>();
+</script>
+
+<style>
+.bgl_bottombar .bgl_btn-flex{
+  flex-direction: column;
+  height: 60px;
+  gap: 0;
+}
+
+</style>
+<style scoped>
+.bgl_bottombar {
+  background-color: var(--bgl-primary);
+  color: var(--bgl-white);
+  grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
+  grid-auto-flow: column;
+	border-radius: 0;
+	padding: 0;
+	--bgl_bottombar-btn-width: 62px;
+}
+
+
+.bgl_bottombar>* {
+  width: var(--bgl_bottombar-btn-width);
+}
+
+.bgl_bottombar::-webkit-scrollbar {
+  display: none;
+}
+
+.bgl_bottombar .nav-button {
+  border-radius: var(--card-border-radius);
+
+}
+
+.bgl_bottombar .router-link-active {
+  background: var(--bgl-white);
+  color: var(--bgl-primary) !important;
+}
+</style>

package/src/components/layout/SidebarMenu.vue

@@ -51,7 +51,8 @@ function toggleMenu() {
 }
 
 .nav-button.router-link-active {
-  background-color: var(--bgl-primary-tint) !important;
+  background: var(--bgl-white) !important;
+  color: var(--bgl-primary);
 }
 </style>
 

package/src/components/layout/Tabs.vue

@@ -1,8 +1,8 @@
 <template>
-  <TabsNav :tabs="tabs" :group="group" />
-  <div v-if="currentTab">
-    <slot :name="currentTab" />
-  </div>
+	<TabsNav :tabs="tabs" :group="group" class="mb-05" />
+	<div v-if="currentTab">
+		<slot :name="currentTab" />
+	</div>
 </template>
 
 <script setup lang="ts">