@onereach/ui-components 8.1.0 → 8.1.1-beta.3637.0

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled"
+  >
+    <div
+      ref="rail"
+      :class="railStyles"
+      :disabled="disabled"
+    >
+      <div
+        :class="offsetStyles"
+        :style="offsetComputedStyles"
+        :disabled="disabled"
+      />
+
+      <OrTooltip
+        :class="['relative', 'z-1']"
+        :is-open="isDraggingFrom"
+        :content="proxyModelValue && String(proxyModelValue[0])"
+        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :offset="8"
+        :external-control="true"
+      >
+        <div
+          ref="thumbFrom"
+          :class="thumbStyles"
+          :disabled="disabled"
+        />
+      </OrTooltip>
+
+      <div
+        :class="trackStyles"
+        :style="trackComputedStyles"
+        :disabled="disabled"
+      />
+
+      <OrTooltip
+        :class="['relative', 'z-1']"
+        :is-open="isDraggingTo"
+        :content="proxyModelValue && String(proxyModelValue[1])"
+        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :offset="8"
+        :external-control="true"
+      >
+        <div
+          ref="thumbTo"
+          :class="thumbStyles"
+          :disabled="disabled"
+        />
+      </OrTooltip>
+    </div>
+
+    <div :class="labelStyles">
+      <div :class="labelMarkStyles">
+        {{ minValue }}
+      </div>
+
+      <div :class="['grow']" />
+
+      <div :class="labelMarkStyles">
+        {{ maxValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Position, clamp, useDraggable, useElementBounding } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
+import { RangeSliderColor, RangeSliderOrientation } from './props';
+import { RangeSlider, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors } from './styles';
+
+export default defineComponent({
+  components: {
+    OrTooltip,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Object as PropType<[number, number]>,
+      default: undefined,
+    },
+
+    minValue: {
+      type: Number,
+      default: 0,
+    },
+
+    maxValue: {
+      type: Number,
+      default: 100,
+    },
+
+    steps: {
+      type: Number,
+      default: undefined,
+    },
+
+    color: {
+      type: String as PropType<`${RangeSliderColor}`>,
+      default: RangeSliderColor.Primary,
+    },
+
+    orientation: {
+      type: String as PropType<`${RangeSliderOrientation}`>,
+      default: RangeSliderOrientation.Horizontal,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const rail = ref<HTMLElement>();
+    const thumbFrom = ref<HTMLElement>();
+    const thumbTo = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-range-slider-v3',
+      ...RangeSlider,
+      ...RangeSliderOrientations[props.orientation],
+    ]);
+
+    const railStyles = computed(() => [
+      ...RangeSliderRail,
+      ...RangeSliderRailOrientations[props.orientation],
+    ]);
+
+    const offsetStyles = computed(() => [
+      ...RangeSliderOffset,
+      ...RangeSliderOffsetOrientations[props.orientation],
+    ]);
+
+    const offsetComputedStyles = computed(() => ({
+      [props.orientation === RangeSliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`,
+    }));
+
+    const trackStyles = computed(() => [
+      ...RangeSliderTrack,
+      ...RangeSliderTrackColors[props.color],
+    ]);
+
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === RangeSliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`,
+    }));
+
+    const thumbStyles = computed(() => [
+      ...RangeSliderThumb,
+      ...RangeSliderThumbColors[props.color],
+    ]);
+
+    const labelStyles = computed(() => [
+      ...RangeSliderLabel,
+      ...RangeSliderLabelOrientations[props.orientation],
+    ]);
+
+    const labelMarkStyles = computed(() => [
+      ...RangeSliderLabelMark,
+    ]);
+
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+
+    const internalModelValueFrom = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.minValue;
+        }
+
+        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+      },
+
+      set: (value) => {
+        proxyModelValue.value = [
+          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
+          Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue),
+        ];
+      },
+    });
+
+    const internalModelValueTo = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.maxValue;
+        }
+
+        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+      },
+
+      set: (value) => {
+        proxyModelValue.value = [
+          Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue),
+          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
+        ];
+      },
+    });
+
+    const railBoundingBox = useElementBounding(rail);
+
+    // Handlers
+    function onDragFrom(position: Position, event: MouseEvent | PointerEvent): void {
+      if (props.disabled) {
+        return;
+      }
+
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+
+      internalModelValueFrom.value = props.orientation === RangeSliderOrientation.Horizontal
+        ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth
+        : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+    }
+
+    function onDragTo(position: Position, event: MouseEvent | PointerEvent): void {
+      if (props.disabled) {
+        return;
+      }
+
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+
+      internalModelValueTo.value = props.orientation === RangeSliderOrientation.Horizontal
+        ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth
+        : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+    }
+
+    // Effects
+    const { isDragging: isDraggingFrom } = useDraggable(rail, {
+      handle: thumbFrom,
+
+      onStart: onDragFrom,
+      onMove: onDragFrom,
+      onEnd: onDragFrom,
+    });
+
+    const { isDragging: isDraggingTo } = useDraggable(rail, {
+      handle: thumbTo,
+
+      onStart: onDragTo,
+      onMove: onDragTo,
+      onEnd: onDragTo,
+    });
+
+    return {
+      root,
+      rail,
+      thumbFrom,
+      thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+
+      proxyModelValue,
+      internalModelValueFrom,
+      internalModelValueTo,
+
+      isDraggingFrom,
+      isDraggingTo,
+    };
+  },
+});
+</script>

package/src/components/or-range-slider-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrRangeSliderV3 } from './OrRangeSlider.vue';
+export * from './props';

package/src/components/or-range-slider-v3/props.ts

@@ -0,0 +1 @@
+export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation } from '../or-slider-v3';

package/src/components/or-range-slider-v3/styles.ts

@@ -0,0 +1,175 @@
+import { RangeSliderColor, RangeSliderOrientation } from './props';
+
+export const RangeSlider: string[] = [
+  // Interactivity
+  'interactivity-default',
+];
+
+export const RangeSliderOrientations: Record<RangeSliderOrientation, string[]> = {
+  [RangeSliderOrientation.Horizontal]: [
+    // Layout
+    'layout-column',
+
+    // Box
+    'w-full',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Layout
+    'layout-row',
+
+    // Box
+    'h-full',
+  ],
+};
+
+export const RangeSliderRail: string[] = [
+  // Interactivity
+  'interactivity-click',
+
+  // Shape
+  'rounded-full',
+
+  // Theme
+  'theme-background-disabled',
+  'dark:theme-background-disabled-dark',
+];
+
+export const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[]> = {
+  [RangeSliderOrientation.Horizontal]: [
+    // Layout
+    'layout-row',
+
+    // Box
+    'w-full',
+    'h-xs',
+
+    'mx-none',
+    'my-md+',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Layout
+    'layout-column-reverse items-center',
+
+    'w-xs',
+    'h-full',
+
+    'mx-md+',
+    'my-none',
+  ],
+};
+
+export const RangeSliderOffset: string[] = [];
+
+export const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, string[]> = {
+  [RangeSliderOrientation.Horizontal]: [],
+  [RangeSliderOrientation.Vertical]: [],
+};
+
+export const RangeSliderTrack: string[] = [
+  // Box
+  'w-full',
+  'h-full',
+
+  // Shape
+  'rounded-full',
+];
+
+export const RangeSliderTrackColors: Record<RangeSliderColor, string[]> = {
+  [RangeSliderColor.Primary]: [
+    // Theme
+    'theme-background-primary',
+    'dark:theme-background-primary-dark',
+  ],
+
+  [RangeSliderColor.Secondary]: [
+    // Theme
+    'theme-background-secondary',
+    'dark:theme-background-secondary-dark',
+  ],
+};
+
+export const RangeSliderThumb: string[] = [
+  // Layout
+  'shrink-0',
+
+  // Box
+  'w-[20px]',
+  'h-[20px]',
+
+  '-mx-[10px]',
+  '-my-[10px]',
+
+  // Shape
+  'rounded-full',
+
+  // Theme
+  'theme-background-base',
+  'dark:theme-background-base-dark',
+];
+
+export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
+  [RangeSliderColor.Primary]: [
+    // Theme
+    'theme-border-4-primary',
+    'dark:theme-border-4-primary-dark',
+
+    // Theme (hover)
+    'hover:theme-background-primary',
+    'dark:hover:theme-background-primary-dark',
+
+    // Theme (active)
+    'active:theme-background-primary',
+    'dark:active:theme-background-primary-dark',
+
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
+  ],
+
+  [RangeSliderColor.Secondary]: [
+    // Theme
+    'theme-border-4-secondary',
+    'dark:theme-border-4-secondary-dark',
+
+    // Theme (hover)
+    'hover:theme-background-secondary',
+    'dark:hover:theme-background-secondary-dark',
+
+    // Theme (active)
+    'active:theme-background-secondary',
+    'dark:active:theme-background-secondary-dark',
+
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
+  ],
+};
+
+export const RangeSliderLabel: string[] = [];
+
+export const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]> = {
+  [RangeSliderOrientation.Horizontal]: [
+    // Layout
+    'layout-row',
+
+    // Box
+    'w-full',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Layout
+    'layout-column-reverse items-center',
+
+    // Box
+    'h-full',
+  ],
+};
+
+export const RangeSliderLabelMark: string[] = [
+  // Typography
+  'typography-caption-regular',
+
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
+];

package/src/components/or-slider-v3/OrSlider.vue

@@ -0,0 +1,211 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled"
+  >
+    <div
+      ref="rail"
+      :class="railStyles"
+      :disabled="disabled"
+    >
+      <div
+        :class="trackStyles"
+        :style="trackComputedStyles"
+        :disabled="disabled"
+      />
+
+      <OrTooltip
+        :class="['relative', 'z-1']"
+        :is-open="isDragging"
+        :content="String(proxyModelValue)"
+        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :offset="8"
+        :external-control="true"
+      >
+        <div
+          ref="thumb"
+          :class="thumbStyles"
+          :disabled="disabled"
+        />
+      </OrTooltip>
+    </div>
+
+    <div :class="labelStyles">
+      <div :class="labelMarkStyles">
+        {{ minValue }}
+      </div>
+
+      <div :class="['grow']" />
+
+      <div :class="labelMarkStyles">
+        {{ maxValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Position, clamp, useDraggable, useElementBounding } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
+import { SliderColor, SliderOrientation } from './props';
+import { Slider, SliderLabel, SliderLabelMark, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors } from './styles';
+
+export default defineComponent({
+  components: {
+    OrTooltip,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Number,
+      default: undefined,
+    },
+
+    minValue: {
+      type: Number,
+      default: 0,
+    },
+
+    maxValue: {
+      type: Number,
+      default: 100,
+    },
+
+    steps: {
+      type: Number,
+      default: undefined,
+    },
+
+    color: {
+      type: String as PropType<`${SliderColor}`>,
+      default: SliderColor.Primary,
+    },
+
+    orientation: {
+      type: String as PropType<`${SliderOrientation}`>,
+      default: SliderOrientation.Horizontal,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const rail = ref<HTMLElement>();
+    const thumb = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-slider-v3',
+      ...Slider,
+      ...SliderOrientations[props.orientation],
+    ]);
+
+    const railStyles = computed(() => [
+      ...SliderRail,
+      ...SliderRailOrientations[props.orientation],
+    ]);
+
+    const trackStyles = computed(() => [
+      ...SliderTrack,
+      ...SliderTrackColors[props.color],
+    ]);
+
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`,
+    }));
+
+    const thumbStyles = computed(() => [
+      ...SliderThumb,
+      ...SliderThumbColors[props.color],
+    ]);
+
+    const labelStyles = computed(() => [
+      ...SliderLabel,
+      ...SliderLabelOrientations[props.orientation],
+    ]);
+
+    const labelMarkStyles = computed(() => [
+      ...SliderLabelMark,
+    ]);
+
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+
+    const internalModelValue = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.minValue;
+        }
+
+        return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
+      },
+
+      set: (value) => {
+        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+      },
+    });
+
+    const railBoundingBox = useElementBounding(rail);
+
+    // Handlers
+    function onDrag(position: Position, event: MouseEvent | PointerEvent): void {
+      if (props.disabled) {
+        return;
+      }
+
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+
+      internalModelValue.value = props.orientation === SliderOrientation.Horizontal
+        ? clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth
+        : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
+    }
+
+    // Effects
+    const { isDragging } = useDraggable(rail, {
+      onStart: onDrag,
+      onMove: onDrag,
+      onEnd: onDrag,
+    });
+
+    return {
+      root,
+      rail,
+      thumb,
+      rootStyles,
+      railStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+
+      proxyModelValue,
+      internalModelValue,
+
+      isDragging,
+    };
+  },
+});
+</script>

package/src/components/or-slider-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrSliderV3 } from './OrSlider.vue';
+export * from './props';

package/src/components/or-slider-v3/props.ts

@@ -0,0 +1,9 @@
+export enum SliderColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+}
+
+export enum SliderOrientation {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+}