@bagelink/vue 0.0.1016 → 0.0.1023

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1016",
+  "version": "0.0.1023",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -23,6 +23,7 @@ const props = withDefaults(
 		href?: string
 		round?: boolean
 		is?: string
+		ripple?: boolean
 		onClick?: (e: MouseEvent) => void
 	}>(),
 	{
@@ -34,7 +35,8 @@ const props = withDefaults(
 		role: 'button',
 		is: 'button',
 		border: false,
-		outline: false
+		outline: false,
+		ripple: true,
 	},
 )
 
@@ -54,13 +56,13 @@ const bind = $computed(() => {
 	}
 	return obj
 })
-const slots: SetupContext["slots"] = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
 	<component
 		:is="isComponent"
-		v-ripple v-bind="bind" :disabled="disabled"
+		v-ripple="ripple" v-bind="bind" :disabled="disabled"
 		class="bgl_btn"
 		:class="{
 			'bgl_btn-icon': icon && !slots.default && !value,

package/src/components/form/BglField.vue

@@ -11,6 +11,7 @@ import {
 	ToggleInput,
 	bindAttrs,
 	classify,
+	BagelForm
 } from '@bagelink/vue'
 import TabsNav from '../layout/TabsNav.vue'
 
@@ -42,6 +43,7 @@ const is = $computed(() => {
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	if (props.field.$el === 'tabs') return TabsNav
+	if (props.field.$el === 'form') return BagelForm
 	return props.field.$el ?? 'div'
 })
 
@@ -68,6 +70,8 @@ function setFieldData(key: string, val: any) {
 	return data
 }
 
+const isForm = $computed(() => props.field.$el === 'form' || props.field.$el === BagelForm)
+
 function getFieldData(obj: any, key: string) {
 	if (typeof obj !== 'object' || obj === null) return obj
 	const keys = key.split(objPathRegex)
@@ -84,12 +88,17 @@ function getFieldData(obj: any, key: string) {
 
 const fieldData = $computed({
 	set: (val: any) => {
+		if (isForm) {
+			emit('update:modelValue', val)
+			return
+		}
 		if (!props.field.id) return
 		const data = setFieldData(props.field.id, val)
 		emit('update:modelValue', data)
 	},
 	get: () => {
 		if (props.field.id) return getFieldData(props.modelValue, props.field.id)
+		if (isForm) return props.modelValue
 		return props.field.defaultValue ?? ''
 	},
 })

package/src/components/form/FieldArray.vue

@@ -8,7 +8,6 @@ import type {
 	Field,
 } from '@bagelink/vue'
 import { BglForm, Btn } from '@bagelink/vue'
-import Card from '../Card.vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -54,21 +53,21 @@ function addItem() {
 	emitValue()
 }
 
-const computedField = $computed(
-	() => ({
-		label: props.label,
-		placeholder: props.placeholder,
-		children: props.children,
-		class: props.class,
-		attrs: props.attrs,
-		required: props.required,
-		disabled: props.disabled,
-		helptext: props.helptext,
-		options: props.options,
-		defaultValue: props.defaultValue,
-		$el: props.el,
-	}) as Field<T>
-) as Field<Record<string, any>>
+// const computedField = $computed(
+// 	() => ({
+// 		label: props.label,
+// 		placeholder: props.placeholder,
+// 		children: props.children,
+// 		class: props.class,
+// 		attrs: props.attrs,
+// 		required: props.required,
+// 		disabled: props.disabled,
+// 		helptext: props.helptext,
+// 		options: props.options,
+// 		defaultValue: props.defaultValue,
+// 		$el: props.el,
+// 	}) as Field<T>
+// ) as Field<Record<string, any>>
 </script>
 
 <template>
@@ -76,8 +75,8 @@ const computedField = $computed(
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-		<div>
-			<Card v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox bg-white transition">
+		<div class="-ms-05 ps-05 border-start">
+			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
 				<BglForm v-if="schema" v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
 				<Btn
 					v-if="props.delete"
@@ -88,16 +87,25 @@ const computedField = $computed(
 					flat
 					@click="deleteItem(i)"
 				/>
-			</Card>
-			<Btn v-if="add" icon="add" color="gray" class="w-100" @click="addItem">
+			</div>
+			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
 				<p>Add {{ label }}</p>
 			</Btn>
 		</div>
 	</div>
 </template>
 
-<style scoped>
-.itemBox:hover {
-	outline: 1px solid var(--bgl-primary);
+<style>
+.itemBox{
+	/* border-top: 2px solid var(--bgl-gray); */
+	/* border-bottom: 2px solid var(--bgl-gray); */
+	background: var(--input-bg);
+}
+
+.itemBox .bagel-input input,
+.itemBox .bagel-input textarea,
+.itemBox .bagel-input select,
+.itemBox .custom-select .input {
+	background: var(--bgl-white) !important;
 }
 </style>

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

@@ -1,110 +1,175 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { watch } from 'vue'
 
-interface RangeInputProps {
-	min?: number
-	max?: number
+interface props {
+	min: number
+	max: number
+	modelValue: number | [number, number]
 	step?: number
+	required?: boolean
+	label?: string
 	disabled?: boolean
 	id?: string
-	name?: string
-	required?: boolean
-	thickness?: string
+	rtl?: boolean
 }
-const { min, max, step, thickness = '8px' } = defineProps<RangeInputProps>()
-const val = defineModel<number>({ default: 0 })
-const range = $ref<HTMLInputElement>()
-
-const direction = $computed(() => {
-	if (!range) return 'ltr'
-	const parent = range.parentElement
-	return getComputedStyle(parent!).direction
-})
 
-const background = $computed(() => {
-	const minVal = min ?? 0
-	const maxVal = max ?? 100
-	const percentage = ((val.value - minVal) / (maxVal - minVal)) * 100
+const { min = 0, max = 100, step = 1, modelValue, label, disabled, id, rtl } = defineProps<props>()
 
-	if (direction === 'rtl') {
-		return `linear-gradient(to left, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`
-	}
-	return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`
-})
+const emit = defineEmits(['update:modelValue'])
+
+const isRange = $computed(() => Array.isArray(modelValue))
+
+let from = $ref<number>(min)
+let to = $ref<number>(max)
+
+const validFrom = $computed(() => Math.min(Math.max(from, min), to)) as number
+const validTo = $computed(() => Math.max(Math.min(to, max), from)) as number
 
-watch(() => val.value, (newValue: number) => {
-	if (min !== undefined && newValue < min) val.value = min
-	if (max !== undefined && newValue > max) val.value = max
+function emitValue() {
+	emit('update:modelValue', isRange ? [validFrom, validTo] : validFrom)
+}
+
+watch(() => validFrom, (newVal) => {
+	if (from !== newVal) from = newVal
+})
+watch(() => validTo, (newVal) => {
+	if (to !== newVal) to = newVal
 })
 
-const height = $computed(() => {
-	return Number.isNaN(Number(thickness)) ? thickness : `${thickness}px`
+const fromPercentage = $computed(() => ((validFrom - min) / (max - min)) * 100)
+const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
+
+const rangeStyle = $computed(() => {
+	const width = ((validTo - validFrom) / (max - min)) * 100
+	if (rtl || isRange)	return { left: `${fromPercentage}%`, width: `${width}%` }
+	return { right: `${width}%`, width: `${fromPercentage}%` }
 })
 </script>
 
 <template>
-	<div class="flex gap-1 align-center range-slide" :class="{ disabled }">
-		<p v-if="min !== undefined">
-			{{ min }}
-		</p>
-		<input
-			:id
-			ref="range"
-			v-model="val"
-			:disabled="disabled"
-			:style="{ background, height }"
-			:max :min
-			:step
-			:required
-			type="range"
-			:name
-		>
-		<p v-if="max !== undefined">
-			{{ max }}
+	<div>
+		<label class="label">{{ label }}</label>
+		<div class="range-slider relative w-100">
+			<input
+				:id="id"
+				v-model="from"
+				class="from"
+				type="range"
+				:min="min"
+				:max="max"
+				:step="step"
+				:required="required"
+				:disabled="disabled"
+				aria-label="Minimum value"
+				@change="emitValue"
+			>
+			<input
+				v-if="isRange"
+				v-model="to"
+				class="to"
+				type="range"
+				:min="min"
+				:max="max"
+				:step="step"
+				:required="required"
+				:disabled="disabled"
+				aria-label="Maximum value"
+				@change="emitValue"
+			>
+			<div class="track absolute pointer-events-none overflow-hidden round">
+				<div
+					class="active-range absolute h-100 pointer-events-none bg-primary"
+					:style="rangeStyle"
+				/>
+			</div>
+			<p
+				v-if="from !== min"
+				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0 "
+				:style="{ marginInlineStart: `calc(${fromPercentage}% - 4px)` }"
+			>
+				<span>
+					{{ from }}
+				</span>
+			</p>
+			<p
+				v-if="isRange && to !== max"
+				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
+				:style="{ marginInlineStart: `calc(${toPercentage}% - 12px)` }"
+			>
+				<span>
+					{{ to }}
+				</span>
+			</p>
+		</div>
+		<p class="txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05">
+			<span>
+				{{ min }}
+			</span>
+			<span>
+				{{ max }}
+			</span>
 		</p>
 	</div>
 </template>
 
 <style scoped>
-.range-slide input {
-  -webkit-appearance: none;
-  width: 100%;
-  border-radius: 5px;
-  outline: none;
-  transition: background 0.3s ease;
+.range-slider-position-txt{
+	top: calc(var(--bgl-range-thumb-size) / 2 ) ;
+	transition: transform 0.1s, opacity 0.5s;
+	transform: scale(0.5);
+}
+.range-slider:hover .range-slider-position-txt{
+	opacity: 1;
+	transform: scale(1);
+}
+.range-slider {
+	height: var(--bgl-range-track-size);
+	display: flex;
+	align-items: center;
+	margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
+}
+.range-slider-txt{
+	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
 
-.range-slide input::-webkit-slider-thumb {
-  -webkit-appearance: none;
+input[type="range"] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  height: var(--bgl-range-thumb-size);
+  background: transparent;
+  pointer-events: none;
   appearance: none;
-  /* margin-top: calc(-1 * var(--thickness, 8px) / 2); */
-  margin-top: 0;
-  width: 16px;
-  height: 16px;
-  background: var(--bgl-primary);
-  border: 1px solid var(--input-bg);
-  border-radius: 50%;
-  cursor: pointer;
+  margin: 0;
 }
 
-.range-slide input::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  margin-top: calc(-1 * var(--thickness, 8px) / 2);
-  background: var(--bgl-primary);
-  border: 1px solid var(--input-bg);
+input[type="range"]::-webkit-slider-thumb {
+  pointer-events: all;
+  appearance: none;
+  width: var(--bgl-range-thumb-size);
+  height: var(--bgl-range-thumb-size);
+  background: var(--bgl-white);
   border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 2;
   cursor: pointer;
+  transition: var(--bgl-transition);
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
+	filter: brightness(90%);
 }
 
-.range-slide.disabled input[type='range']::-webkit-slider-thumb {
-  display: none;
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline: none;
+  box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
 }
 
-.range-slide input::-webkit-slider-runnable-track,
-.range-slide input::-moz-range-track {
-  width: 100%;
-  background: transparent;
-  border-radius: 5px;
+.track {
+  height: var(--bgl-range-track-height);
+  background: var(--bgl-bg);
+  margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
+  width: calc(100% - var(--bgl-range-thumb-size));
 }
 </style>

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

@@ -50,7 +50,7 @@ watch(() => editor.state.content, (newValue) => {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 		<Toolbar
 			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 			@action="editor.handleToolbarAction"
@@ -148,4 +148,4 @@ line-height: 1.65;
 .fullscreen-mode .code-editor{
 	height: 100% !important;
 }
-</style
+</style>

package/src/components/layout/TabsBody.vue

@@ -9,7 +9,7 @@ const { currentTab } = useTabs(props.group)
 </script>
 
 <template>
-	<div v-if="currentTab">
+	<template v-if="currentTab">
 		<slot :name="currentTab" />
-	</div>
+	</template>
 </template>

package/src/components/layout/TabsNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Icon, type MaterialIcons } from '@bagelink/vue'
+import type { MaterialIcons } from '@bagelink/vue'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useTabs } from './tabsManager'
 
@@ -80,17 +80,19 @@ onBeforeUnmount(() => {
 		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden"
 		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
 	>
-		<button
-			v-for="(tab, i) in props.tabs"
-			:key="i"
-			type="button"
-			:class="{ active: isActive(tab) }"
-			class="bgl_tab relative z-1"
-			@click="selectTab(tab)"
-		>
-			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-			{{ tabLabel(tab) }}
-		</button>
+		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
+			<button
+				v-for="(tab, i) in props.tabs"
+				:key="i"
+				type="button"
+				:class="{ active: isActive(tab) }"
+				class="bgl_tab relative z-1"
+				@click="selectTab(tab)"
+			>
+				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+				{{ tabLabel(tab) }}
+			</button>
+		</slot>
 	</div>
 </template>
 

package/src/components/lightbox/index.ts

@@ -11,7 +11,6 @@ let clickHandler: ((e: MouseEvent) => any) = (_e: MouseEvent) => void 0
 
 const lightboxDirective: Directive = {
 	mounted(el: HTMLElement, binding) {
-		el.classList.add('hover')
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
 		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }

package/src/styles/appearance.css

@@ -497,6 +497,10 @@
     box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
 }
 
+.shadow-none {
+    box-shadow: none !important;
+}
+
 .shadow-30 {
     box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
 }
@@ -1151,6 +1155,10 @@
         box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
     }
 
+    .m_shadow-none {
+        box-shadow: none !important;
+    }
+
     .m_shadow-30 {
         box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
     }