vexip-ui/lib/components/split/split.vue2.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"split.vue2.cjs","sources":["../../../components/split/split.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapper\" :class=\"className\" @transitionend=\"removeTransition\">\n    <div\n      :class=\"[nh.be('panel'), nh.bem('panel', props.vertical ? 'top' : 'left')]\"\n      :style=\"leftPaneStyle\"\n    >\n      <slot name=\"left\"></slot>\n    </div>\n    <div\n      :class=\"[nh.be('panel'), nh.bem('panel', props.vertical ? 'bottom' : 'right')]\"\n      :style=\"rightPaneStyle\"\n    >\n      <slot name=\"right\"></slot>\n    </div>\n    <div :class=\"nh.be('trigger')\" :style=\"triggerStyle\">\n      <div ref=\"handler\" :class=\"nh.be('handler')\">\n        <template v-if=\"props.canFull\">\n          <button\n            type=\"button\"\n            :class=\"[nh.be('button'), nh.bem('button', `${props.vertical ? 'top' : 'left'}-full`)]\"\n            @pointerdown.stop\n            @click.left=\"handleFull(-1)\"\n          >\n            <Icon v-bind=\"fullIcons[0]\" :scale=\"+(fullIcons[0].scale || 1) * 0.6\"></Icon>\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[\n              nh.be('button'),\n              nh.bem('button', `${props.vertical ? 'bottom' : 'right'}-full`)\n            ]\"\n            @pointerdown.stop\n            @click.left=\"handleFull(1)\"\n          >\n            <Icon v-bind=\"fullIcons[1]\" :scale=\"+(fullIcons[1].scale || 1) * 0.6\"></Icon>\n          </button>\n        </template>\n        <template v-else>\n          <slot name=\"handler\">\n            <span v-for=\"n in 6\" :key=\"n\" :class=\"nh.be('pointer')\"></span>\n          </slot>\n        </template>\n      </div>\n    </div>\n    <div ref=\"guide\" :class=\"nh.be('guide')\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { Icon } from '@/components/icon'\n\nimport { computed, defineComponent, ref, watch } from 'vue'\n\nimport { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { useMoving } from '@vexip-ui/hooks'\nimport { splitProps } from './props'\n\nexport default defineComponent({\n  name: 'Split',\n  components: {\n    Icon,\n  },\n  props: splitProps,\n  emits: ['update:value'],\n  setup(_props, { emit }) {\n    const props = useProps('split', _props, {\n      value: {\n        default: 0.5,\n        validator: (value: number) => value > 0 && value < 1,\n        static: true,\n      },\n      min: 0.1,\n      max: 0.9,\n      vertical: false,\n      noTransition: false,\n      lazy: false,\n      canFull: false,\n    })\n\n    const nh = useNameHelper('split')\n    const icons = useIcons()\n    const currentValue = ref(props.value)\n    const currentFull = ref<0 | 1 | -1>(0)\n    const transition = ref(false)\n\n    const wrapper = ref<HTMLElement>()\n    const guide = ref<HTMLElement>()\n\n    const offset = computed(() => {\n      return props.vertical ? 'offsetHeight' : 'offsetWidth'\n    })\n    const position = computed<['top', 'bottom'] | ['left', 'right']>(() => {\n      return props.vertical ? ['top', 'bottom'] : ['left', 'right']\n    })\n\n    const { target: handler, moving } = useMoving({\n      lazy: true,\n      capture: false,\n      onStart: (state, event) => {\n        if (currentFull.value || !wrapper.value || event.button > 0) {\n          return false\n        }\n\n        const { min, max, vertical, lazy } = props\n        const outer = wrapper.value[offset.value]\n        const computedMin = min <= 1 ? min : min / outer\n        const computedMax = max <= 1 ? max : max / outer\n\n        state.outer = outer\n        state.min = computedMin\n        state.max = computedMax\n        state.vertical = vertical\n        state.splitLazy = lazy\n        state.start = currentValue.value * outer\n        state.target = currentValue.value\n\n        if (lazy && guide.value) {\n          guide.value.style[position.value[0]] = `${currentValue.value * 100}`\n          guide.value.style.display = 'block'\n        }\n\n        emitEvent(props.onMoveStart, currentValue.value)\n      },\n      onMove: state => {\n        const outer = state.outer as number\n        const min = state.min as number\n        const max = state.max as number\n        const delta = state.vertical ? state.deltaY : state.deltaX\n        const start = state.start as number\n        const value = Math.min(Math.max(min, (start + delta) / outer), max)\n\n        if (state.splitLazy) {\n          if (guide.value) {\n            guide.value.style[position.value[0]] = `${value * 100}%`\n          }\n\n          state.target = value\n        } else {\n          handleChange(value)\n        }\n\n        emitEvent(props.onMove, value)\n      },\n      onEnd: state => {\n        if (guide.value) {\n          guide.value.style.display = ''\n        }\n\n        if (state.splitLazy) {\n          const target = state.target as number\n\n          if (Math.abs(target - currentValue.value) > 0.01) {\n            setTransition()\n          }\n\n          handleChange(target)\n        }\n\n        emitEvent(props.onMoveEnd, currentValue.value)\n      },\n    })\n\n    const className = computed(() => {\n      let fullType = ''\n\n      if (currentFull.value) {\n        if (props.vertical) {\n          fullType = currentFull.value < 0 ? 'top' : 'bottom'\n        } else {\n          fullType = currentFull.value < 0 ? 'left' : 'right'\n        }\n      }\n\n      return {\n        [nh.b()]: true,\n        [nh.bs('vars')]: true,\n        [nh.bm('inherit')]: props.inherit,\n        [nh.bm(props.vertical ? 'vertical' : 'horizontal')]: true,\n        [nh.bm('moving')]: moving.value,\n        [nh.bm(`${fullType}-full`)]: !!fullType,\n        [nh.bm('transition')]: transition.value,\n      }\n    })\n    const leftPaneStyle = computed(() => {\n      return {\n        [position.value[1]]:\n          currentFull.value < 0\n            ? '0'\n            : currentFull.value > 0\n              ? '100%'\n              : `${(1 - currentValue.value) * 100}%`,\n      }\n    })\n    const rightPaneStyle = computed(() => {\n      return {\n        [position.value[0]]:\n          currentFull.value < 0\n            ? '100%'\n            : currentFull.value > 0\n              ? '0'\n              : `${currentValue.value * 100}%`,\n      }\n    })\n    const triggerStyle = computed(() => {\n      return {\n        [position.value[0]]:\n          currentFull.value < 0\n            ? '100%'\n            : currentFull.value > 0\n              ? '0'\n              : `calc(${currentValue.value * 100}% - var(${nh.cv('handler-size')}) * 0.5)`,\n      }\n    })\n    const fullIcons = computed(() => {\n      return props.vertical\n        ? [icons.value.angleDown, icons.value.angleUp]\n        : [icons.value.angleRight, icons.value.angleLeft]\n    })\n\n    watch(\n      () => props.value,\n      value => {\n        if (value.toFixed(5) !== currentValue.value.toFixed(5)) {\n          currentValue.value = value\n          setTransition()\n        }\n      },\n    )\n    watch(currentValue, value => {\n      if (guide.value) {\n        guide.value.style[position.value[0]] = `${value * 100}%`\n      }\n    })\n    watch(currentFull, value => {\n      setTransition()\n\n      if (value) {\n        let type: 'top' | 'right' | 'bottom' | 'left'\n\n        if (props.vertical) {\n          type = value < 0 ? 'top' : 'bottom'\n        } else {\n          type = value < 0 ? 'left' : 'right'\n        }\n\n        emitEvent(props.onFull, type)\n      } else {\n        emitEvent(props.onReset)\n      }\n    })\n\n    function setTransition() {\n      transition.value = !props.noTransition && !moving.value\n    }\n\n    function removeTransition() {\n      transition.value = false\n    }\n\n    function handleFull(type: 1 | -1) {\n      if (!props.canFull) {\n        return\n      }\n\n      if (currentFull.value) {\n        currentFull.value = 0\n      } else {\n        currentFull.value = type\n      }\n    }\n\n    function handleChange(value: number) {\n      if (value.toFixed(5) !== currentValue.value.toFixed(5)) {\n        currentValue.value = value\n\n        emitEvent(props.onChange, value)\n        emit('update:value', value)\n      }\n    }\n\n    return {\n      props,\n      nh,\n\n      className,\n      position,\n      leftPaneStyle,\n      rightPaneStyle,\n      triggerStyle,\n      fullIcons,\n\n      wrapper,\n      guide,\n      handler,\n\n      removeTransition,\n      handleFull,\n    }\n  },\n})\n</script>\n"],"names":["_sfc_main","defineComponent","Icon","splitProps","_props","emit","props","useProps","value","nh","useNameHelper","icons","useIcons","currentValue","ref","currentFull","transition","wrapper","guide","offset","computed","position","handler","moving","useMoving","state","event","min","max","vertical","lazy","outer","computedMin","computedMax","emitEvent","delta","start","handleChange","target","setTransition","className","fullType","leftPaneStyle","rightPaneStyle","triggerStyle","fullIcons","watch","type","removeTransition","handleFull"],"mappings":"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"}