@opentiny/vue-renderless 3.6.8 → 3.8.2

package/radio-button/index.js

@@ -29,11 +29,19 @@ const toggleEvents = ({ refs, props }) => (isUnBind = false) => {
     radioEl[(isUnBind ? "remove" : "add") + "EventListener"](ev, props.events[ev]);
   });
 };
+const keydownHandle = ({ state, props }) => () => {
+  state.value = state.isDisabled ? state.value : props.label;
+};
+const handleFocus = (state) => () => state.focus = true;
+const handleBlur = (state) => () => state.focus = false;
 export {
   getGroup,
   getStyle,
   getValue,
+  handleBlur,
   handleChange,
+  handleFocus,
+  keydownHandle,
   setValue,
   toggleEvents
 };

package/radio-button/vue.js

@@ -1,7 +1,17 @@
 import "../chunk-PKUHTIDK.js";
-import { handleChange, getValue, setValue, getGroup, getStyle, toggleEvents } from "./index";
+import {
+  handleChange,
+  getValue,
+  setValue,
+  getGroup,
+  getStyle,
+  toggleEvents,
+  keydownHandle,
+  handleFocus,
+  handleBlur
+} from "./index";
 const api = ["state", "handleChange"];
-const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, { emit, parent, dispatch, constants, nextTick, refs }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, inject }, { emit, parent, dispatch, constants, nextTick, refs }) => {
   const api2 = {
     getGroup: getGroup({ constants, parent }),
     toggleEvents: toggleEvents({ refs, props })
@@ -16,14 +26,19 @@ const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, {
     activeStyle: computed(() => api2.getStyle()),
     size: computed(() => state.radioGroup.state.radioGroupSize),
     isDisabled: computed(() => props.disabled || state.radioGroup.disabled),
-    tabIndex: computed(() => state.isDisabled || state.radioGroup && state.value !== props.label ? -1 : 0)
+    tabIndex: computed(() => state.isDisabled || state.radioGroup && state.value !== props.label ? -1 : 0),
+    showTips: inject("showTips", null),
+    tipContent: props.tipContent
   });
   Object.assign(api2, {
     state,
     getValue: getValue(state),
     getStyle: getStyle(state),
     setValue: setValue({ emit, state }),
-    handleChange: handleChange({ constants, dispatch, nextTick, state })
+    handleChange: handleChange({ constants, dispatch, nextTick, state }),
+    keydownHandle: keydownHandle({ state, props }),
+    handleFocus: handleFocus(state),
+    handleBlur: handleBlur(state)
   });
   onMounted(api2.toggleEvents);
   onBeforeUnmount(() => {

package/radio-group/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { KEY_CODE } from "../common";
 const handleKeydown = ({ parent }) => (event) => {
   const target = event.target;
   const className = target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]";

package/radio-group/vue.js

@@ -1,10 +1,11 @@
 import "../chunk-PKUHTIDK.js";
 import { handleKeydown, mounted } from "./index";
 const api = ["state", "handleKeydown"];
-const renderless = (props, { computed, onMounted, reactive, watch }, { parent, dispatch }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, provide }, { parent, dispatch }) => {
   const state = reactive({
     radioGroupSize: computed(() => props.size),
-    tag: "div"
+    tag: "div",
+    activeStyle: props.fill
   });
   parent.$on("handleChange", (value) => {
     parent.$emit("change", value);
@@ -22,6 +23,8 @@ const renderless = (props, { computed, onMounted, reactive, watch }, { parent, d
     }
   );
   onMounted(api2.onMounted);
+  provide("radioVertical", props.vertical);
+  provide("showTips", props.showTips);
   return api2;
 };
 export {

package/rate/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { KEY_CODE } from "../common";
 const computedActiveColor = (props) => (state) => {
   let result = "";
   if (state.currentValue <= props.lowThreshold) {
@@ -146,7 +146,9 @@ const computedDecimalStyle = ({ props, state }) => {
   let fontSize = "";
   if (props.disabled) {
     width = `${props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 100}%`;
-  } else if (props.allowHalf) {
+  }
+  if (props.allowHalf) {
+    width = "";
     const reactSize = props.size ? Math.ceil(parseInt(props.size) / 2) + "px" : "6px";
     clip = `rect(0px, ${reactSize}, ${props.size || "14px"}, 0px)`;
     clipPath = "inset(0 50% 0 0)";

package/rate/vue.js

@@ -18,7 +18,7 @@ import {
   computedActiveColor,
   computedActiveClass
 } from "./index";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { on, off } from "../common/deps/dom";
 const api = ["state", "showDecimalIcon", "getIconStyle", "getTextStyle", "selectValue", "handelKey", "setCurrentValue", "resetCurrentValue"];
 const useChangeValue = ({ constants, emit, props, reactive, toRefs, watch, onMounted, onUnmounted, parent }) => {
   const state = reactive({

package/record/index.js

@@ -0,0 +1,190 @@
+import "../chunk-PKUHTIDK.js";
+class Record {
+  constructor(config) {
+    this.recorder = null;
+    this.mediaStream = null;
+    this.recorderFile = null;
+    this.audioContext = null;
+    this.timeId = null;
+    this.config = config;
+  }
+  start() {
+    return this.getUserMedia().then(({ stream }) => {
+      if (stream) {
+        this.initMideaRecoder(stream);
+        this.initAudioContext(stream);
+      }
+      return !!stream;
+    });
+  }
+  getUserMedia() {
+    return new Promise((resolve) => {
+      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia;
+      const containers = { audio: true };
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices.getUserMedia(containers).then((stream) => resolve({ stream })).catch(resolve);
+      } else if (navigator.getUserMedia) {
+        navigator.getUserMedia(containers, (stream) => resolve({ stream }), resolve);
+      } else {
+        resolve(new Error("Not support userMedia"));
+      }
+    });
+  }
+  initMideaRecoder(stream) {
+    this.recorder = new MediaRecorder(stream);
+    this.mediaStream = stream;
+    let chunks = [];
+    this.recorder.onpause = () => {
+    };
+    this.recorder.onresume = () => {
+    };
+    this.recorder.ondataavailable = (e) => {
+      chunks.push(e.data);
+    };
+    this.recorder.onstop = () => {
+      this.recorderFile = new Blob(chunks, { "type": this.recorder.mimeType });
+      chunks = [];
+      const { onstop } = this.config;
+      onstop && onstop(this.recorderFile);
+    };
+    this.recorder.onerror = () => {
+    };
+    this.recorder.start();
+  }
+  stop() {
+    if (this.recorder.state !== "inactive") {
+      this.recorder.stop();
+      this.closeStream(this.mediaStream);
+      this.audioContext.close();
+    }
+    clearInterval(this.timeId);
+    this.timeId = null;
+  }
+  closeStream(stream) {
+    if (typeof stream.stop === "function") {
+      stream.stop();
+    } else {
+      let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];
+      trackList.forEach(
+        (tracks) => tracks && tracks.forEach((track) => typeof track.stop === "function" && track.stop())
+      );
+    }
+  }
+  pause() {
+    this.recorder.pause();
+    this.audioContext.suspend();
+    clearInterval(this.timeId);
+    this.timeId = null;
+  }
+  resume() {
+    this.recorder.resume();
+    this.audioContext.resume();
+    clearInterval(this.timeId);
+    this.timeId = setInterval(() => this.getRealTimeAudio(), 100);
+  }
+  initAudioContext(stream) {
+    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const source = this.audioContext.createMediaStreamSource(stream);
+    this.analyser = this.audioContext.createAnalyser();
+    source.connect(this.analyser);
+    clearInterval(this.timeId);
+    this.timeId = setInterval(() => this.getRealTimeAudio(), 100);
+  }
+  getRealTimeAudio() {
+    const { onMediaProgress } = this.config;
+    onMediaProgress && onMediaProgress(this.analyser, this.audioContext);
+  }
+}
+const toogleRecord = ({ state, api, emit, constants }) => () => {
+  if (state.record.status === constants.STATUS.READY) {
+    !state.recorder && (state.recorder = new Record({
+      onMediaProgress: api.renderAudioGraph,
+      onstop: (file) => emit("confirm", file)
+    }));
+    state.recorder.start().then((isSuccess) => {
+      if (!isSuccess) {
+        return emit("error");
+      }
+      state.record.status = constants.STATUS.RECORDING;
+    });
+  } else if (state.record.status === constants.STATUS.PAUSE) {
+    state.record.status = constants.STATUS.RECORDING;
+    state.recorder.resume();
+  } else {
+    state.record.status = constants.STATUS.PAUSE;
+    state.recorder.pause();
+  }
+};
+const handleConfirm = ({ state, emit }) => () => {
+  state.isClickConfirm = true;
+  emit("update:modelValue", false);
+};
+const watchModelValue = ({ api }) => (value) => !value && api.resetRecord();
+const calcVoice = (analyser) => {
+  const dataArray = new Uint8Array(analyser.fftSize);
+  analyser.getByteTimeDomainData(dataArray);
+  let highValue = 0;
+  let lowValue = 0;
+  for (let i = 0; i < analyser.fftSize; i++) {
+    highValue += dataArray[i] > 128 ? dataArray[i] - 128 : 0;
+    lowValue += dataArray[i] < 128 ? 128 - dataArray[i] : 0;
+  }
+  let voiceNum = 1;
+  const voiceMatch = [0, 100, 500, 1e3, 1e4];
+  const ismatch = voiceMatch.some((val2, idx) => {
+    if (highValue <= val2) {
+      return voiceNum = idx + 1 + (val2 === 0 ? lowValue / 1e3 : highValue / val2);
+    }
+  });
+  !ismatch && (voiceNum = 6);
+  const val = voiceNum * 5;
+  let result = [-val, 2 * val, -3 * val];
+  return result.concat(
+    result.slice().reverse().map((times) => -times)
+  );
+};
+const renderAudioGraph = ({ vm, state }) => (analyser, audioContext) => {
+  state.record.currentTime = audioContext.currentTime;
+  let canvas = vm.$refs.canvas;
+  if (canvas) {
+    const height = canvas.offsetHeight;
+    const width = canvas.offsetWidth;
+    canvas.height = height;
+    canvas.width = width;
+    const canvasCtx = canvas.getContext("2d");
+    canvasCtx.clearRect(0, 0, width, height);
+    canvasCtx.fillStyle = "#fff";
+    canvasCtx.fillRect(0, 0, width, height);
+    canvasCtx.lineWidth = 1;
+    const grd = canvasCtx.createLinearGradient(0, 0, width, 0);
+    grd.addColorStop(0, "rgba(0, 103, 209, 0.1)");
+    grd.addColorStop(0.5, "rgba(0, 103, 209, 1)");
+    grd.addColorStop(1, "rgba(0, 103, 209, 0.1)");
+    canvasCtx.strokeStyle = grd;
+    let x = 0;
+    canvasCtx.beginPath();
+    canvasCtx.moveTo(x, height / 2);
+    const tops = calcVoice(analyser);
+    const space = width / 12;
+    for (let j = 0; j < 6; j++) {
+      canvasCtx.quadraticCurveTo(x += space, height / 2 - tops[j], x += space, height / 2);
+    }
+    canvasCtx.lineTo(width, height / 2);
+    canvasCtx.stroke();
+  }
+};
+const resetRecord = ({ state, constants }) => () => {
+  state.record.status = constants.STATUS.READY;
+  state.record.currentTime = 0;
+  state.isClickConfirm && state.recorder && state.recorder.stop();
+  state.isClickConfirm = false;
+};
+const unmounted = ({ api }) => () => api.resetRecord();
+export {
+  handleConfirm,
+  renderAudioGraph,
+  resetRecord,
+  toogleRecord,
+  unmounted,
+  watchModelValue
+};

package/record/vue.js

@@ -0,0 +1,44 @@
+import "../chunk-PKUHTIDK.js";
+import { toogleRecord, handleConfirm, watchModelValue, renderAudioGraph, unmounted, resetRecord } from "./index";
+const api = ["state", "toogleRecord", "handleConfirm"];
+const initState = ({ api: api2, reactive, computed }) => {
+  const state = reactive({
+    record: {
+      status: "ready",
+      currentTime: 0
+    },
+    recodeTime: computed(() => {
+      const time = parseInt(state.record.currentTime);
+      const minute = Math.floor(time / 60);
+      const second = Math.floor(time % 60);
+      return `${minute.toString().padStart(2, 0)}:${second.toString().padStart(2, 0)}`;
+    })
+  });
+  Object.assign(api2, { state });
+  return state;
+};
+const initApi = ({ api: api2, state, emit, vm, constants }) => {
+  Object.assign(api2, {
+    toogleRecord: toogleRecord({ state, api: api2, emit, constants }),
+    handleConfirm: handleConfirm({ state, emit }),
+    watchModelValue: watchModelValue({ api: api2 }),
+    renderAudioGraph: renderAudioGraph({ vm, state }),
+    unmounted: unmounted({ api: api2 }),
+    resetRecord: resetRecord({ state, constants })
+  });
+};
+const initWatch = ({ watch, props, api: api2 }) => {
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+};
+const renderless = (props, { reactive, watch, computed, onUnmounted }, { emit, vm, constants }) => {
+  const api2 = {};
+  const state = initState({ api: api2, reactive, computed });
+  initApi({ api: api2, state, emit, vm, constants });
+  initWatch({ watch, props, api: api2 });
+  onUnmounted(() => api2.unmounted);
+  return api2;
+};
+export {
+  api,
+  renderless
+};