@bagelink/vue 0.0.1020 → 0.0.1023

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1020",
+  "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/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<{
@@ -76,7 +75,7 @@ function addItem() {
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-		<div class="ps-05 border-start">
+		<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

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/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/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;
     }