vue-cesium/es/components/ui/slider/index.mjs.map

Vue 3.x components for CesiumJS.

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/ui/slider/index.ts"],"sourcesContent":["import { h, ref, computed, watch, getCurrentInstance, defineComponent, VNode, ComponentPublicInstance } from 'vue'\n\nimport useSlider, { useSliderProps, useSliderEmits, keyCodes } from './use-slider'\n\nimport { between } from '@vue-cesium/utils/private/format'\nimport { stopAndPrevent } from '@vue-cesium/utils/private/event'\nimport { useFormAttrs } from '@vue-cesium/composables/private/use-form'\nimport { platform } from '@vue-cesium/utils/platform'\nimport { VueClassProp, VueStyleObjectProp } from '@vue-cesium/utils/types'\n\nconst getNodeData = () => ({})\n\nexport const sliderProps = {\n  ...useSliderProps,\n\n  modelValue: {\n    required: true,\n    default: null,\n    validator: v => typeof v === 'number' || v === null\n  },\n\n  labelValue: [String, Number]\n}\nexport default defineComponent({\n  name: 'VcSlider',\n\n  props: sliderProps,\n\n  emits: useSliderEmits,\n\n  setup(props: any, { emit }) {\n    const { state, methods } = useSlider({\n      updateValue,\n      updatePosition,\n      getDragging,\n      formAttrs: useFormAttrs(props)\n    })\n\n    const rootRef = ref(null)\n    const curRatio = ref(0)\n    const model = ref(0)\n\n    function normalizeModel() {\n      model.value = props.modelValue === null ? state.innerMin.value : between(props.modelValue, state.innerMin.value, state.innerMax.value)\n    }\n\n    watch(() => `${props.modelValue}|${state.innerMin.value}|${state.innerMax.value}`, normalizeModel)\n\n    normalizeModel()\n\n    const modelRatio = computed(() => methods.convertModelToRatio(model.value))\n    const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))\n\n    const selectionBarStyle = computed(() => {\n      const acc: any = {\n        [state.positionProp.value]: `${100 * state.innerMinRatio.value}%`,\n        [state.sizeProp.value]: `${100 * (ratio.value - state.innerMinRatio.value)}%`\n      }\n      if (props.selectionImg !== void 0) {\n        acc.backgroundImage = `url(${props.selectionImg}) !important`\n      }\n      return acc\n    })\n\n    const getThumb = methods.getThumbRenderFn({\n      focusValue: true,\n      getNodeData,\n      ratio,\n      label: computed(() => (props.labelValue !== void 0 ? props.labelValue : model.value)),\n      thumbColor: computed(() => props.thumbColor || props.color),\n      labelColor: computed(() => props.labelColor),\n      labelTextColor: computed(() => props.labelTextColor)\n    })\n\n    const trackContainerEvents = computed(() => {\n      if (state.editable.value !== true) {\n        return {}\n      }\n\n      return platform().isPhone === true\n        ? { onClick: methods.onMobileClick }\n        : {\n            onMousedown: methods.onActivate,\n            onFocus,\n            onBlur: methods.onBlur,\n            onKeydown,\n            onKeyup: methods.onKeyup\n          }\n    })\n\n    function updateValue(change?: boolean) {\n      if (model.value !== props.modelValue) {\n        emit('update:modelValue', model.value)\n      }\n      change === true && emit('change', model.value)\n    }\n\n    function getDragging() {\n      return rootRef.value.getBoundingClientRect()\n    }\n\n    function updatePosition(event, dragging = state.dragging.value) {\n      const ratio = methods.getDraggingRatio(event, dragging)\n\n      model.value = methods.convertRatioToModel(ratio)\n\n      curRatio.value = props.snap !== true || props.step === 0 ? ratio : methods.convertModelToRatio(model.value)\n    }\n\n    function onFocus() {\n      state.focus.value = true\n    }\n\n    function onKeydown(evt) {\n      if (!keyCodes.includes(evt.keyCode)) {\n        return\n      }\n\n      stopAndPrevent(evt)\n\n      const stepVal = ([34, 33].includes(evt.keyCode) ? 10 : 1) * state.step.value,\n        offset =\n          ([34, 37, 40].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * (props.vertical === true ? -1 : 1) * stepVal\n\n      model.value = between(parseFloat((model.value + offset).toFixed(state.decimals.value)), state.innerMin.value, state.innerMax.value)\n\n      updateValue()\n    }\n\n    return () => {\n      const content = methods.getContent(selectionBarStyle, state.tabindex, trackContainerEvents, node => {\n        node.push(getThumb())\n      })\n\n      return h(\n        'div',\n        {\n          ref: rootRef,\n          class: state.classes.value + (props.modelValue === null ? ' vc-slider--no-value' : ''),\n          ...state.attributes.value,\n          'aria-valuenow': props.modelValue\n        },\n        content\n      )\n    }\n  }\n})\n\ninterface SliderMarkerLabelPartialDefinition {\n  label?: number | string\n  classes?: VueClassProp\n  style?: VueStyleObjectProp\n}\n\ninterface SliderMarkerLabelDefinition extends SliderMarkerLabelPartialDefinition {\n  value?: number\n}\n\ninterface SliderMarkerLabelDefinitionRequiredValue extends SliderMarkerLabelPartialDefinition {\n  value: number\n}\n\ninterface SliderMarkerLabelObjectDefinition {\n  [value: number]: string | SliderMarkerLabelDefinition\n}\n\nexport type SliderMarkerLabels =\n  | boolean\n  | Array<SliderMarkerLabelDefinitionRequiredValue>\n  | SliderMarkerLabelObjectDefinition\n  | ((value: number) => string | SliderMarkerLabelDefinition)\n\nexport interface VcSliderProps {\n  /**\n   * Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL\n   */\n  name?: string | undefined\n  /**\n   * Minimum value of the model; Set track's minimum value\n   */\n  min?: number | undefined\n  /**\n   * Maximum value of the model; Set track's maximum value\n   * Default value: 100\n   */\n  max?: number | undefined\n  /**\n   * Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop\n   */\n  innerMin?: number | undefined\n  /**\n   * Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop\n   */\n  innerMax?: number | undefined\n  /**\n   * Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity\n   * Default value: 1\n   */\n  step?: number | undefined\n  /**\n   * Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop\n   */\n  snap?: boolean | undefined\n  /**\n   * Work in reverse (changes direction)\n   */\n  reverse?: boolean | undefined\n  /**\n   * Display in vertical direction\n   */\n  vertical?: boolean | undefined\n  /**\n   * Color name for component from the Quasar Color Palette\n   */\n  color?: string | undefined\n  /**\n   * Color name for the track (can be 'transparent' too) from the Quasar Color Palette\n   */\n  trackColor?: string | undefined\n  /**\n   * Apply a pattern image on the track\n   */\n  trackImg?: string | undefined\n  /**\n   * Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette\n   */\n  innerTrackColor?: string | undefined\n  /**\n   * Apply a pattern image on the inner track\n   */\n  innerTrackImg?: string | undefined\n  /**\n   * Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette\n   */\n  selectionColor?: string | undefined\n  /**\n   * Apply a pattern image on the selection bar\n   */\n  selectionImg?: string | undefined\n  /**\n   * Popup a label when user clicks/taps on the slider thumb and moves it\n   */\n  label?: boolean | undefined\n  /**\n   * Color name for component from the Quasar Color Palette\n   */\n  labelColor?: string | undefined\n  /**\n   * Color name for component from the Quasar Color Palette\n   */\n  labelTextColor?: string | undefined\n  /**\n   * Switch the position of the label (top <-> bottom or left <-> right)\n   */\n  switchLabelSide?: boolean | undefined\n  /**\n   * Always display the label\n   */\n  labelAlways?: boolean | undefined\n  /**\n   * Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)\n   */\n  markers?: boolean | number | undefined\n  /**\n   * Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition\n   * @param value The marker value to transform\n   * @returns Marker definition Object or directly a String for the label of the marker\n   */\n  markerLabels?: SliderMarkerLabels | undefined\n  /**\n   * CSS class(es) to apply to the marker labels container\n   */\n  markerLabelsClass?: string | undefined\n  /**\n   * Switch the position of the marker labels (top <-> bottom or left <-> right)\n   */\n  switchMarkerLabelsSide?: boolean | undefined\n  /**\n   * Track size (including CSS unit)\n   * Default value: 4px\n   */\n  trackSize?: string | undefined\n  /**\n   * Thumb size (including CSS unit)\n   * Default value: 20px\n   */\n  thumbSize?: string | undefined\n  /**\n   * Color name for component from the Quasar Color Palette\n   */\n  thumbColor?: string | undefined\n  /**\n   * Set custom thumb svg path\n   * Default value: M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0\n   */\n  thumbPath?: string | undefined\n  /**\n   * Notify the component that the background is a dark color\n   */\n  dark?: boolean | undefined\n  /**\n   * Dense mode; occupies less space\n   */\n  dense?: boolean | undefined\n  /**\n   * Put component in disabled mode\n   */\n  disable?: boolean | undefined\n  /**\n   * Put component in readonly mode\n   */\n  readonly?: boolean | undefined\n  /**\n   * Tabindex HTML attribute value\n   */\n  tabindex?: number | string | undefined\n  /**\n   * Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive\n   */\n  modelValue: number | null | undefined\n  /**\n   * Override default label value\n   */\n  labelValue?: string | number | undefined\n  /**\n   * Emitted on lazy model value change (after user slides then releases the thumb)\n   * @param value New model value\n   */\n  onChange?: (value: any) => void\n  /**\n   * Triggered when user starts panning on the component\n   * @param phase Phase of panning\n   */\n  onPan?: (phase: 'start' | 'end') => void\n  /**\n   * Emitted when the component needs to change the model; Is also used by v-model\n   * @param value New model value\n   */\n  'onUpdate:modelValue'?: (value: number | null) => void\n}\n\nexport type SliderMarkerLabelConfig = {\n  index: number\n  value: number\n  label: number | string\n  classes: string\n  style: VueStyleObjectProp\n}\n\nexport type SliderMarkerLabelArrayConfig = SliderMarkerLabelConfig[]\n\nexport interface SliderMarkerLabelObjectConfig {\n  [value: number]: SliderMarkerLabelConfig\n}\n\nexport interface QSliderSlots {\n  /**\n   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>\n   * @param scope\n   */\n  'marker-label': (scope: {\n    /**\n     * Config for current marker label\n     */\n    marker: SliderMarkerLabelConfig\n    /**\n     * Array of marker label configs\n     */\n    markerList: SliderMarkerLabelArrayConfig[]\n    /**\n     * Object with key-value where key is the model and the value is the marker label config\n     */\n    markerMap: SliderMarkerLabelObjectConfig\n    /**\n     * Required CSS classes to be applied to the marker element\n     */\n    classes: string\n    /**\n     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap\n     * @param value The marker label equivalent model value\n     * @returns CSS style Object to apply to a marker element at respective model value\n     */\n    getStyle: (value: number) => any\n  }) => VNode[]\n  /**\n   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>\n   * @param scope\n   */\n  'marker-label-group': (scope: {\n    /**\n     * Array of marker label configs\n     */\n    markerList: SliderMarkerLabelArrayConfig[]\n    /**\n     * Object with key-value where key is the model and the value is the marker label config\n     */\n    markerMap: SliderMarkerLabelObjectConfig\n    /**\n     * Required CSS classes to be applied to the marker element\n     */\n    classes: string\n    /**\n     * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap\n     * @param value The marker label equivalent model value\n     * @returns CSS style Object to apply to a marker element at respective model value\n     */\n    getStyle: (value: number) => any\n  }) => VNode[]\n}\n\nexport type VcSliderRef = ComponentPublicInstance<VcSliderProps>\n"],"names":["ratio"],"mappings":"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"}