choo-taro-ui-vue3/lib/composables/index.js

Taro UI Rewritten in Vue 3.0

import { computed } from 'vue';
import { propsFactory, convertToUnit, cssStringToObject } from '../utils';

const allDimensionsProps = {
  height: {
    type: [Number, String]
  },
  maxHeight: {
    type: [Number, String]
  },
  maxWidth: {
    type: [Number, String]
  },
  minHeight: {
    type: [Number, String]
  },
  minWidth: {
    type: [Number, String]
  },
  width: {
    type: [Number, String]
  }
};
function dimensionsFactory(...possibleProps) {
  const selectedProps = possibleProps.length ? possibleProps : Object.keys(allDimensionsProps);
  const makeDimensionsProps = propsFactory(selectedProps.reduce((obj, prop) => {
    obj[prop] = allDimensionsProps[prop];
    return obj;
  }, {}));
  const useDimensions = (props) => {
    const dimensions = computed(() => {
      return selectedProps.reduce((obj, key) => {
        const value = props[key];
        if (value) {
          obj.style[key] = convertToUnit(value);
        }
        return obj;
      }, { style: {} });
    });
    return { dimensions };
  };
  return {
    makeDimensionsProps,
    useDimensions
  };
}

const makeElevationProps = propsFactory({
  elevation: {
    type: [Number, String],
    validator(v) {
      const value = parseInt(v);
      return !isNaN(value) && value >= 0 && value <= 24;
    }
  },
  flat: Boolean
});
function useElevationClasses(props) {
  const elevationClasses = computed(() => {
    const { elevation = props.flat ? 0 : void 0 } = props;
    return elevation != null && elevation !== "" ? { [`elevation-${elevation}`]: true } : {};
  });
  return { elevationClasses };
}

function useIconClasses(icon, allowPrefixClass) {
  const iconClasses = computed(() => {
    if (allowPrefixClass) {
      return {
        [`${icon?.prefixClass || "at-icon"}`]: Boolean(icon),
        [`${icon?.prefixClass || "at-icon"}-${icon?.value}`]: Boolean(icon && icon.value),
        [`${icon?.class}`]: Boolean(icon?.class)
      };
    }
    return {
      "at-icon": Boolean(icon),
      [`at-icon-${icon?.value}`]: Boolean(icon && icon.value),
      [`${icon?.class}`]: Boolean(icon?.class)
    };
  });
  return {
    iconClasses
  };
}
function useIconStyle(icon, defaultColor = "", defaultSize, pxTransform) {
  const iconStyle = computed(() => {
    let size;
    if (Boolean(icon && icon.size)) {
      size = pxTransform ? pxTransform(icon.size) : `${icon.size}px`;
    } else {
      size = Boolean(defaultSize) ? `${defaultSize}px` : "";
    }
    const style = Boolean(icon?.style) ? typeof icon.style === "string" ? cssStringToObject(icon.style) : icon.style : {};
    return {
      color: Boolean(icon && icon.color) ? icon.color : defaultColor,
      fontSize: size,
      ...style
    };
  });
  return {
    iconStyle
  };
}

function useModelValue(props, emit, name = "modelValue") {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value)
  });
}

export { dimensionsFactory, makeElevationProps, useElevationClasses, useIconClasses, useIconStyle, useModelValue };