origam 2.2.1 → 2.5.0

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

@@ -1,384 +0,0 @@
-<template>
-	<div
-			:aria-orientation="direction"
-			:aria-readonly="!!readonly"
-			:aria-valuemax="max"
-			:aria-valuemin="min"
-			:aria-valuenow="modelValue"
-			:class="sliderFieldThumbClasses"
-			:style="sliderFieldThumbStyles"
-			:tabindex="isDisabled ? -1 : 0"
-			role="slider"
-			@keydown="!isReadonly ? handleKeydown : undefined"
-	>
-		<div
-				:class="sliderFieldThumbSurfaceClasses"
-				:style="sliderFieldThumbSurfaceStyles"
-		/>
-
-		<div
-				v-ripple="rippleProps"
-				:class="sliderFieldThumbRippleClasses"
-				:style="sliderFieldThumbRippleStyles"
-		/>
-
-		<origam-translate-scale origin="bottom center">
-			<div
-					v-show="showLabel"
-					class="origam-slider-field-thumb__label-container"
-			>
-				<div class="origam-slider-field-thumb__label">
-					<slot
-							name="default"
-							v-bind="{ modelValue: modelValue }"
-					>
-						<span>{{ label }}</span>
-					</slot>
-				</div>
-			</div>
-		</origam-translate-scale>
-	</div>
-</template>
-
-<script setup>
-import { computed, inject, StyleValue } from "vue";
-import { OrigamTranslateScale } from "../../components";
-import {
-  useBorder,
-  useElevation,
-  useProps,
-  useRounded,
-  useStyle,
-  useTextColor
-} from "../../composables";
-import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts";
-import { vRipple } from "../../directives";
-import { KEYBOARD_VALUES } from "../../enums";
-import { clamp, convertToUnit, int } from "../../utils";
-const props = defineProps({
-  label: { type: [Boolean, String], required: false },
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  focused: { type: Boolean, required: false },
-  modelValue: { type: Number, required: false, default: 0 },
-  position: { type: Number, required: false, default: 0 },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, 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 },
-  size: { type: null, required: false, default: 20 },
-  ripple: { type: [Boolean, Object], required: false, default: true },
-  elevation: { type: [Number, String], required: false },
-  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  direction: { type: null, required: false }
-});
-const emits = defineEmits(["update:modelValue"]);
-const { filterProps } = useProps(props);
-const slider = inject(ORIGAM_SLIDER_FIELD_KEY);
-if (!slider) throw new Error("[Origam] -slider-thumb must be used inside -slider");
-const {
-  step,
-  error,
-  color: sliderColor,
-  elevation: sliderElevation,
-  rounded: sliderRounded,
-  border: sliderBorder,
-  ripple: sliderRipple,
-  disabled,
-  readonly,
-  isReversed,
-  isVertical,
-  mousePressed,
-  decimals,
-  indexFromEnd
-} = slider;
-const isDisabled = computed(() => {
-  return props.disabled ?? disabled.value;
-});
-const isReadonly = computed(() => {
-  return props.readonly ?? readonly.value;
-});
-const color = computed(() => {
-  if (isDisabled.value) return void 0;
-  if (error.value) return "danger";
-  return sliderColor.value || props.color;
-});
-const size = computed(() => {
-  if (typeof props?.size === "number") {
-    return int(props.size);
-  }
-  return 20;
-});
-const positionPercentage = computed(() => {
-  return convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, "%");
-});
-const elevationProps = computed(() => {
-  return !isDisabled.value ? props.elevation ?? sliderElevation.value : void 0;
-});
-const roundedProps = computed(() => {
-  return props.rounded ?? sliderRounded.value;
-});
-const borderProps = computed(() => {
-  return props.border ?? sliderBorder.value;
-});
-const rippleProps = computed(() => {
-  return !isDisabled.value && !isReadonly.value ? [props.ripple || sliderRipple, null, [
-    "circle",
-    "center"
-  ]] : void 0;
-});
-const { elevationClasses } = useElevation(elevationProps);
-const { borderClasses, borderStyles } = useBorder(borderProps);
-const { roundedClasses, roundedStyles } = useRounded(roundedProps);
-const { textColorClasses, textColorStyles } = useTextColor(color);
-const relevantKeys = [KEYBOARD_VALUES.PAGEUP, KEYBOARD_VALUES.PAGEDOWN, KEYBOARD_VALUES.END, KEYBOARD_VALUES.HOME, KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP];
-const multipliers = computed(() => {
-  if (step.value) return [1, 2, 3];
-  else return [1, 5, 10];
-});
-const parseKeydown = (e, value) => {
-  if (!relevantKeys.includes(e.key)) return;
-  e.preventDefault();
-  const _step = step.value || 0.1;
-  const steps = (props.max - props.min) / _step;
-  const keyValue = [KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP];
-  if (keyValue.includes(e.key)) {
-    const increase = isVertical.value ? [KEYBOARD_VALUES.RIGHT, isReversed.value ? KEYBOARD_VALUES.DOWN : KEYBOARD_VALUES.UP] : [KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.UP];
-    const direction = increase.includes(e.key) ? 1 : -1;
-    const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
-    value = value + direction * _step * multipliers.value[multiplier];
-  } else if (e.key === KEYBOARD_VALUES.HOME) {
-    value = props.min;
-  } else if (e.key === KEYBOARD_VALUES.END) {
-    value = props.max;
-  } else {
-    const direction = e.key === KEYBOARD_VALUES.PAGEDOWN ? 1 : -1;
-    value = value - direction * _step * (steps > 100 ? steps / 10 : 10);
-  }
-  return clamp(value, props.min, props.max);
-};
-const handleKeydown = (e) => {
-  const newValue = parseKeydown(e, props.modelValue);
-  if (newValue !== null && newValue !== void 0) {
-    emits("update:modelValue", newValue);
-  }
-};
-const showLabel = computed(() => {
-  return props.label && props.focused || props.label === "always";
-});
-const label = computed(() => {
-  return props.modelValue.toFixed(step.value ? decimals.value : 1);
-});
-const sliderFieldThumbStyles = computed(() => {
-  return [
-    {
-      "--origam-slider-field-thumb---position": positionPercentage.value,
-      "--origam-slider-field-thumb---size": convertToUnit(size.value)
-    },
-    props.style
-  ];
-});
-const sliderFieldThumbClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb",
-    {
-      "origam-slider-field-thumb--focused": props.focused,
-      "origam-slider-field-thumb--pressed": props.focused && mousePressed.value
-    },
-    props.class
-  ];
-});
-const sliderFieldThumbSurfaceStyles = computed(() => {
-  return [
-    borderStyles.value,
-    roundedStyles.value,
-    textColorStyles.value,
-    props.style
-  ];
-});
-const sliderFieldThumbSurfaceClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb__surface",
-    elevationClasses.value,
-    borderClasses.value,
-    roundedClasses.value,
-    textColorClasses.value
-  ];
-});
-const sliderFieldThumbRippleClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb__ripple",
-    textColorClasses.value
-  ];
-});
-const sliderFieldThumbRippleStyles = computed(() => {
-  return [
-    textColorStyles.value,
-    props.style
-  ];
-});
-const { id, css, load, isLoaded, unload } = useStyle(sliderFieldThumbStyles);
-defineExpose({
-  filterProps,
-  css,
-  id,
-  load,
-  unload,
-  isLoaded
-});
-</script>
-
-<style lang="scss" scoped>
-	.origam-slider-field-thumb {
-		$this: &;
-
-		touch-action: none;
-		color: rgba(66, 66, 66, 1);
-		outline: none;
-		position: absolute;
-		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-
-		&__label {
-			background: rgba(66, 66, 66, 0.7);
-			color: rgba(66, 66, 66, 1);
-
-			&:before {
-				color: rgba(66, 66, 66, 0.7);
-			}
-		}
-
-		&__surface {
-			cursor: pointer;
-			width: var(--origam-slider-field-thumb---size, 20);
-			height: var(--origam-slider-field-thumb---size, 20);
-			border: 1px solid var(--origam-slider-field-thumb__surface---border-color, rgba(0, 0, 0, 0.18));
-			border-radius: 50%;
-			user-select: none;
-			background-color: currentColor;
-			box-shadow: none;
-			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1), 0.2s border-color cubic-bezier(0.4, 0, 0.2, 1);
-
-			@media (forced-colors: active) {
-				background-color: highlight;
-			}
-
-			&:before {
-				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-				content: "";
-				color: inherit;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-				background: currentColor;
-				position: absolute;
-				pointer-events: none;
-				opacity: 0;
-			}
-
-			&:after {
-				content: "";
-				width: 42px;
-				height: 42px;
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-			}
-		}
-
-		&__label-container {
-			position: absolute;
-			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
-		}
-
-		&__label {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 0.75rem;
-			min-width: 35px;
-			height: 25px;
-			border-radius: 4px;
-			padding: 6px;
-			position: absolute;
-			user-select: none;
-			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
-
-			&:before {
-				content: "";
-				width: 0;
-				height: 0;
-				position: absolute;
-			}
-		}
-
-		&__ripple {
-			position: absolute;
-			left: calc(var(--origam-slider-field-thumb---size, 20) / -2);
-			top: calc(var(--origam-range-slider-thumb---size, 20) / -2);
-			width: calc(var(--origam-range-slider-thumb---size, 20) * 2);
-			height: calc(var(--origam-range-slider-thumb---size, 20) * 2);
-			background: inherit;
-		}
-
-		&--focused {
-			#{$this}__surface {
-				&:before {
-					transform: scale(2);
-					opacity: 0.12;
-				}
-			}
-		}
-
-		&--pressed {
-			transition: none;
-
-			#{$this}__surface {
-				&:before {
-					opacity: 0.12;
-				}
-			}
-		}
-
-		@media (hover: hover) {
-			&:hover {
-				#{$this}__surface {
-					&:before {
-						transform: scale(2);
-					}
-				}
-
-				&:not(#{$this}--focused) {
-					#{$this}__surface {
-						&:before {
-							opacity: 0.04;
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/consts/SliderField/slider-field.const.cjs

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ORIGAM_SLIDER_FIELD_KEY = void 0;
-const ORIGAM_SLIDER_FIELD_KEY = exports.ORIGAM_SLIDER_FIELD_KEY = Symbol.for("origam:range-slider");

package/dist/src/consts/SliderField/slider-field.const.d.ts

@@ -1,3 +0,0 @@
-import type { ISliderFieldProvide } from "../../interfaces";
-import type { InjectionKey } from 'vue';
-export declare const ORIGAM_SLIDER_FIELD_KEY: InjectionKey<ISliderFieldProvide>;

package/dist/src/consts/SliderField/slider-field.const.js

@@ -1 +0,0 @@
-export const ORIGAM_SLIDER_FIELD_KEY = Symbol.for("origam:range-slider");

package/dist/src/enums/Charts/chart.enum.cjs

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CHART_TYPE = void 0;
-var CHART_TYPE = exports.CHART_TYPE = /* @__PURE__ */(CHART_TYPE2 => {
-  CHART_TYPE2["TREND"] = "trend";
-  CHART_TYPE2["BAR"] = "bar";
-  CHART_TYPE2["LINE"] = "line";
-  return CHART_TYPE2;
-})(CHART_TYPE || {});

package/dist/src/enums/Charts/chart.enum.d.ts

@@ -1,5 +0,0 @@
-export declare enum CHART_TYPE {
-    TREND = "trend",
-    BAR = "bar",
-    LINE = "line"
-}

package/dist/src/enums/Charts/chart.enum.js

@@ -1,6 +0,0 @@
-export var CHART_TYPE = /* @__PURE__ */ ((CHART_TYPE2) => {
-  CHART_TYPE2["TREND"] = "trend";
-  CHART_TYPE2["BAR"] = "bar";
-  CHART_TYPE2["LINE"] = "line";
-  return CHART_TYPE2;
-})(CHART_TYPE || {});

package/dist/src/globals.d.ts

@@ -1,172 +0,0 @@
-import 'vue/jsx'
-
-// Types
-import type { Events } from 'vue'
-import type { TouchStoredHandlers } from './directives/touch'
-
-declare global {
-    interface HTMLCollection {
-        [Symbol.iterator] (): IterableIterator<Element>
-    }
-
-    interface Element {
-        _clickOutside?: Record<number, {
-            onClick: EventListener
-            onMousedown: EventListener
-        } | undefined> & { lastMousedownWasOutside: boolean }
-        _onResize?: Record<number, {
-            handler: () => void
-            options: AddEventListenerOptions
-        } | undefined>
-        _ripple?: {
-            enabled?: boolean
-            centered?: boolean
-            class?: string
-            circle?: boolean
-            touched?: boolean
-            isTouch?: boolean
-            showTimer?: number
-            showTimerCommit?: (() => void) | null
-        }
-        _observe?: Record<number, {
-            init: boolean
-            observer: IntersectionObserver
-        } | undefined>
-        _mutate?: Record<number, {
-            observer: MutationObserver
-        } | undefined>
-        _onScroll?: Record<number, {
-            handler: EventListenerOrEventListenerObject
-            options: AddEventListenerOptions
-            target?: EventTarget
-        } | undefined>
-        _touchHandlers?: {
-            [_uid: number]: TouchStoredHandlers
-        }
-        _transitionInitialStyles?: {
-            position: string
-            top: string
-            left: string
-            width: string
-            height: string
-        }
-
-        getElementsByClassName (classNames: string): NodeListOf<HTMLElement>
-    }
-
-    interface WheelEvent {
-        path?: Array<EventTarget>
-    }
-
-    interface UIEvent {
-        initUIEvent (
-            typeArg: string,
-            canBubbleArg: boolean,
-            cancelableArg: boolean,
-            viewArg: Window,
-            detailArg: number
-        ): void
-    }
-
-    interface MouseEvent {
-        sourceCapabilities?: { firesTouchEvents: boolean }
-    }
-
-    interface ColorSelectionOptions {
-        signal?: AbortSignal
-    }
-
-    interface ColorSelectionResult {
-        sRGBHex: string
-    }
-
-    interface EyeDropper {
-        open: (options?: ColorSelectionOptions) => Promise<ColorSelectionResult>
-    }
-
-    interface EyeDropperConstructor {
-        new (): EyeDropper
-    }
-
-    interface Window {
-        EyeDropper: EyeDropperConstructor
-    }
-
-    function parseInt (s: string | number, radix?: number): number
-
-    function parseFloat (string: string | number): number
-
-    export const __ORIGAM_VERSION__: string
-    export const __REQUIRED_VUE__: string
-    export const __VUE_OPTIONS_API__: boolean | undefined
-}
-
-declare module '@vue/runtime-core' {
-    export interface ComponentCustomProperties {
-        _: ComponentInternalInstance
-    }
-
-    export interface ComponentInternalInstance {
-        provides: Record<string, unknown>
-        setupState: any
-    }
-
-    export interface FunctionalComponent {
-        aliasName?: string
-    }
-
-
-    export interface ComponentOptionsBase<_Props, _RawBindings, _D, _C extends ComputedOptions, _M extends MethodOptions, _Mixin extends ComponentOptionsMixin, _Extends extends ComponentOptionsMixin, _E extends EmitsOptions, _EE extends string = string, _Defaults = Record<string, never>> {
-        aliasName?: string
-    }
-
-    export interface App {
-        $nuxt?: { hook: (name: string, fn: () => void) => void }
-    }
-
-    export interface VNode {
-        ctx: ComponentInternalInstance | null
-    }
-}
-
-declare module '@vue/runtime-dom' {
-    type UnionToIntersection<U> =
-        (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
-
-    type Combine<T extends string> = T | {
-        [K in T]: {
-            [L in Exclude<T, K>]: `${K}${Exclude<T, K>}` | `${K}${L}${Exclude<T, K | L>}`
-        }[Exclude<T, K>]
-    }[T]
-
-    type Modifiers = Combine<'Passive' | 'Capture' | 'Once'>
-
-    type ModifiedEvents = UnionToIntersection<{
-        [K in keyof Events]: { [L in `${K}${Modifiers}`]: Events[K] }
-    }[keyof Events]>
-
-    type EventHandlers<E> = {
-        [K in keyof E]?: E[K] extends (...args: any[]) => any ? E[K] : (payload: E[K]) => void
-    }
-
-    export interface HTMLAttributes extends EventHandlers<ModifiedEvents> {
-        onScrollend?: (e: Event) => void
-    }
-
-    type CustomProperties = {
-        [k in `--${string}`]: any
-    }
-
-    export interface CSSProperties extends CustomProperties {
-    }
-}
-
-declare module 'expect' {
-    interface Matchers<R> {
-        /** console.warn */
-        toHaveBeenTipped (): R
-
-        /** console.error */
-        toHaveBeenWarned (): R
-    }
-}

package/dist/src/interfaces/Charts/chart-bar.interface.d.ts

@@ -1,4 +0,0 @@
-import type { IChartCommonProps } from "../../interfaces";
-export interface IChartBarProps extends IChartCommonProps {
-    autoLineWidth?: boolean;
-}

package/dist/src/interfaces/Charts/chart-line.interface.d.ts

@@ -1,15 +0,0 @@
-import type { IChartCommonProps } from "../../interfaces";
-export interface IChartLineProps extends IChartCommonProps {
-    fill?: boolean;
-}
-export interface IBoundary {
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
-}
-export interface IPoint {
-    x: number;
-    y: number;
-    value: number;
-}

package/dist/src/interfaces/Charts/chart.interface.d.ts

@@ -1,21 +0,0 @@
-import type { IChartBarProps, IChartLineProps, IColorProps, ICommonsComponentProps, IDimensionProps, IPaddingProps } from "../../interfaces";
-import type { TChartItem, TChartType, TDirectionBoth } from "../../types";
-export interface IChartProps extends ICommonsComponentProps, IChartLineProps, IChartBarProps {
-    type?: TChartType;
-}
-export interface IChartCommonProps extends ICommonsComponentProps, IColorProps, IDimensionProps, IPaddingProps {
-    autoDraw?: boolean;
-    autoDrawDuration?: number | string;
-    autoDrawEasing?: string;
-    gradient?: Array<string>;
-    gradientDirection?: TDirectionBoth;
-    labels?: Array<TChartItem>;
-    labelSize?: number | string;
-    lineWidth?: number | string;
-    itemValue?: string;
-    modelValue?: Array<TChartItem>;
-    min?: number | string;
-    max?: number | string;
-    showLabels?: boolean;
-    smooth?: boolean | string | number;
-}

package/dist/src/interfaces/SliderField/slider-field-thumb.interface.d.ts

@@ -1,12 +0,0 @@
-import type { IBorderProps, IColorProps, ICommonsComponentProps, IDirectionProps, IElevationProps, IRippleProps, IRoundedProps, ISizeProps } from '../../interfaces';
-import type { TAlways } from '../../types';
-export interface ISliderFieldThumbProps extends ICommonsComponentProps, IColorProps, ISizeProps, IRippleProps, IElevationProps, IRoundedProps, IBorderProps, IDirectionProps {
-    label?: TAlways;
-    min?: number;
-    max?: number;
-    focused?: boolean;
-    modelValue?: number;
-    position?: number;
-    readonly?: boolean;
-    disabled?: boolean;
-}

package/dist/src/shims.d.ts

@@ -1,36 +0,0 @@
-import 'vue/jsx'
-import type { UnwrapNestedRefs, VNodeChild } from 'vue'
-
-// These already exist in scope in the final bundle
-// @skip-build
-import type { IDateInstance, IDisplayInstance, ILocaleInstance, IRtlInstance } from './interfaces'
-import type { TIconOptions } from './types'
-
-declare global {
-    namespace JSX {
-        interface ElementChildrenAttribute {
-            $children: unknown
-        }
-    }
-}
-
-declare module 'vue' {
-    interface Origam {
-        display: UnwrapNestedRefs<IDisplayInstance>
-        icons: TIconOptions
-        locale: UnwrapNestedRefs<ILocaleInstance & IRtlInstance>
-        date: IDateInstance
-    }
-
-    export interface ComponentCustomProperties {
-        $vuetify: Origam
-    }
-
-    export interface HTMLAttributes {
-        $children?: VNodeChild
-    }
-
-    export interface SVGAttributes {
-        $children?: VNodeChild
-    }
-}

package/dist/src/types/Charts/chart.type.d.ts

@@ -1,5 +0,0 @@
-import { CHART_TYPE } from "../../enums";
-export type TChartType = `${CHART_TYPE}`;
-export type TChartItem = string | number | {
-    value: number;
-};