origam 2.2.1 → 2.5.0

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -14,11 +14,11 @@
 		/>
 
 		<div
-				v-if="showTicks"
+				v-if="showTicks && parsedTicks.length"
 				:class="sliderFieldTrackTicksClasses"
 		>
 			<template
-					v-for="(tick, index) in ticks"
+					v-for="(tick, index) in parsedTicks"
 					:key="index"
 			>
 				<div
@@ -48,24 +48,31 @@
 </template>
 
 <script setup>
-import { computed, inject, StyleValue, useSlots } from "vue";
+import { computed, StyleValue, useSlots } from "vue";
 import {
   useBackgroundColor,
   useProps,
   useRounded,
   useStyle
 } from "../../composables";
-import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts";
 import { convertToUnit, int } from "../../utils";
 const props = defineProps({
   start: { type: Number, required: false, default: 0 },
   stop: { type: Number, required: false, default: 100 },
   disabled: { type: Boolean, required: false },
+  error: { type: Boolean, required: false },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 },
+  isVertical: { type: Boolean, required: false, default: false },
+  indexFromEnd: { type: Boolean, required: false, default: false },
+  showTicks: { type: [Boolean, String], required: false, default: false },
+  tickSize: { type: [Number, String], required: false, default: 2 },
+  ticks: { type: Array, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false, default: 4 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
@@ -74,35 +81,19 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
-const slider = inject(ORIGAM_SLIDER_FIELD_KEY);
-if (!slider) throw new Error("[Origam] -slider-track must be inside -slider");
 const slots = useSlots();
-const {
-  color: sliderColor,
-  bgColor: sliderBgColor,
-  error,
-  disabled,
-  rounded: sliderRounded,
-  showTicks: sliderShowTicks,
-  tickSize: sliderTickSize,
-  parsedTicks,
-  min,
-  max,
-  isVertical,
-  indexFromEnd
-} = slider;
 const isDisabled = computed(() => {
-  return props.disabled ?? disabled.value;
+  return !!props.disabled;
 });
 const color = computed(() => {
   if (isDisabled.value) return void 0;
-  if (error.value) return "danger";
-  return sliderColor.value || props.color;
+  if (props.error) return "danger";
+  return props.color;
 });
 const bgColor = computed(() => {
   if (isDisabled.value) return void 0;
-  if (error.value) return "danger";
-  return sliderBgColor.value || props.bgColor;
+  if (props.error) return "danger";
+  return props.bgColor;
 });
 const size = computed(() => {
   if (typeof props?.size === "number") {
@@ -111,10 +102,14 @@ const size = computed(() => {
   return 4;
 });
 const showTicks = computed(() => {
-  return !!sliderShowTicks.value;
+  return !!props.showTicks;
 });
 const roundedProps = computed(() => {
-  return props.rounded ?? sliderRounded.value;
+  return props.rounded;
+});
+const parsedTicks = computed(() => {
+  const ticks = props.ticks ?? [];
+  return props.isVertical ? ticks.slice().reverse() : ticks;
 });
 const { roundedClasses, roundedStyles } = useRounded(roundedProps);
 const {
@@ -122,8 +117,8 @@ const {
   backgroundColorStyles: trackFillColorStyles
 } = useBackgroundColor(color);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(bgColor);
-const startDir = computed(() => `inset-${isVertical.value ? "block" : "inline"}-${indexFromEnd.value ? "end" : "start"}`);
-const endDir = computed(() => isVertical.value ? "height" : "width");
+const startDir = computed(() => `inset-${props.isVertical ? "block" : "inline"}-${props.indexFromEnd ? "end" : "start"}`);
+const endDir = computed(() => props.isVertical ? "height" : "width");
 const backgroundStyles = computed(() => {
   return {
     [startDir.value]: "0%",
@@ -139,14 +134,11 @@ const trackFillStyles = computed(() => {
     [endDir.value]: convertToUnit(trackFillWidth.value, "%")
   };
 });
-const ticks = computed(() => {
-  return isVertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
-});
 const sliderFieldTickStyles = (tick) => {
-  const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, "%") : void 0;
+  const directionValue = tick.value !== props.min && tick.value !== props.max ? convertToUnit(tick.position, "%") : void 0;
   return [
     {
-      "--origam-slider-field-track__tick---size": convertToUnit(sliderTickSize.value),
+      "--origam-slider-field-track__tick---size": convertToUnit(props.tickSize),
       [startDir.value]: directionValue
     },
     props.style
@@ -157,8 +149,8 @@ const sliderFieldTickClasses = (tick) => {
     "origam-slider-field-track__tick",
     {
       "origam-slider-field-track__tick--filled": tick.position >= props.start && tick.position <= props.stop,
-      "origam-slider-field-track__tick--first": tick.value === min.value,
-      "origam-slider-field-track__tick--last": tick.value === max.value
+      "origam-slider-field-track__tick--first": tick.value === props.min,
+      "origam-slider-field-track__tick--last": tick.value === props.max
     }
   ];
 };
@@ -209,7 +201,7 @@ const sliderFieldTrackTicksClasses = computed(() => {
   return [
     "origam-slider-field-track__ticks",
     {
-      "origam-slider-field-track__ticks--always-show": sliderShowTicks.value === "always"
+      "origam-slider-field-track__ticks--always-show": props.showTicks === "always"
     }
   ];
 });
@@ -228,7 +220,9 @@ defineExpose({
 	.origam-slider-field-track {
 		$this: &;
 
+		position: relative;
 		border-radius: 9999px;
+		pointer-events: none;
 
 		@media (forced-colors: active) {
 			border: thin solid buttontext;
@@ -303,9 +297,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/SliderField/index.cjs

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "OrigamSliderField", {
     return _OrigamSliderField.default;
   }
 });
-Object.defineProperty(exports, "OrigamSliderFieldThumb", {
-  enumerable: true,
-  get: function () {
-    return _OrigamSliderFieldThumb.default;
-  }
-});
 Object.defineProperty(exports, "OrigamSliderFieldTrack", {
   enumerable: true,
   get: function () {
@@ -23,5 +17,4 @@ Object.defineProperty(exports, "OrigamSliderFieldTrack", {
 });
 var _OrigamSliderField = _interopRequireDefault(require("./OrigamSliderField.vue"));
 var _OrigamSliderFieldTrack = _interopRequireDefault(require("./OrigamSliderFieldTrack.vue"));
-var _OrigamSliderFieldThumb = _interopRequireDefault(require("./OrigamSliderFieldThumb.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/SliderField/index.d.ts

@@ -1,3 +1,2 @@
 export { default as OrigamSliderField } from './OrigamSliderField.vue';
 export { default as OrigamSliderFieldTrack } from './OrigamSliderFieldTrack.vue';
-export { default as OrigamSliderFieldThumb } from './OrigamSliderFieldThumb.vue';

package/dist/src/components/SliderField/index.js

@@ -1,3 +1,2 @@
 export { default as OrigamSliderField } from "./OrigamSliderField.vue";
 export { default as OrigamSliderFieldTrack } from "./OrigamSliderFieldTrack.vue";
-export { default as OrigamSliderFieldThumb } from "./OrigamSliderFieldThumb.vue";