vuestic-ui/dist/web-components/src/composables/useSize.js

Vue 3 UI Framework

import { computed, getCurrentInstance } from "vue";
import { i as isNilValue } from "../utils/isNilValue.js";
import { u as useGlobalConfig } from "./useGlobalConfig.js";
const sizesConfig = {
  defaultSize: 48,
  sizes: {
    small: 32,
    medium: 48,
    large: 64
  }
};
const fontSizesConfig = {
  defaultSize: 1,
  sizes: {
    small: 0.75,
    medium: 1,
    large: 1.25
  }
};
const useSizeProps = {
  size: {
    type: [String, Number],
    default: "",
    validator: (size) => {
      return typeof size === "string" || typeof size === "number";
    }
  },
  sizesConfig: {
    type: Object,
    default: () => sizesConfig
  },
  fontSizesConfig: {
    type: Object,
    default: () => fontSizesConfig
  }
};
const fontRegex = /(?<fontSize>\d+)(?<extension>px|rem)/i;
const convertToRem = (px) => px / 16 - 0.5;
const sizeToAbsolute = (size) => {
  if (typeof size === "number") {
    return `${size}px`;
  }
  return String(size);
};
const doHaveSizesConfig = (props) => "sizesConfig" in props;
const useSizeRef = (props) => {
  const sizePropName = "size";
  return computed(() => {
    let sizePropValue = props[sizePropName];
    if (doHaveSizesConfig(props)) {
      const { defaultSize, sizes } = props.sizesConfig;
      if (isNilValue(sizePropValue)) {
        sizePropValue = defaultSize;
      }
      if (sizes) {
        const sizeFromConfig = sizes[sizePropValue];
        if (sizeFromConfig) {
          return sizeToAbsolute(sizeFromConfig);
        }
      }
    }
    return sizeToAbsolute(sizePropValue);
  });
};
const useSize = (props, componentName = ((_a) => (_a = getCurrentInstance()) == null ? void 0 : _a.type.name)()) => {
  const { getGlobalConfig } = useGlobalConfig();
  const sizesConfigGlobal = computed(() => {
    var _a2, _b;
    return componentName ? (_b = (_a2 = getGlobalConfig().components) == null ? void 0 : _a2[componentName]) == null ? void 0 : _b.sizesConfig : void 0;
  });
  const sizeComputed = computed(() => {
    var _a2, _b, _c;
    const { defaultSize, sizes } = props.sizesConfig;
    const defaultSizeGlobal = (_a2 = sizesConfigGlobal.value) == null ? void 0 : _a2.defaultSize;
    if (!props.size) {
      return `${defaultSize || defaultSizeGlobal}px`;
    }
    if (typeof props.size === "string") {
      const sizeFromGlobalConfig = (_c = (_b = sizesConfigGlobal.value) == null ? void 0 : _b.sizes) == null ? void 0 : _c[props.size];
      const sizeFromProps = sizes[props.size];
      if (sizeFromProps) {
        return `${sizeFromProps}px`;
      }
      if (sizeFromGlobalConfig) {
        return `${sizeFromGlobalConfig}px`;
      }
      return props.size;
    }
    return `${props.size}px`;
  });
  const fontSizeInRem = computed(() => {
    const { defaultSize, sizes } = props.fontSizesConfig;
    if (!props.size) {
      return defaultSize;
    }
    if (typeof props.size === "string") {
      if (props.size in sizes) {
        return sizes[props.size];
      }
      const fontSizeParsed = props.size.match(fontRegex);
      if (!fontSizeParsed || !fontSizeParsed.groups) {
        throw new Error("Size prop should be either valid string or number");
      }
      const { extension, fontSize } = fontSizeParsed.groups;
      return extension === "rem" ? +fontSize : convertToRem(+fontSize);
    }
    return convertToRem(props.size);
  });
  const fontSizeComputed = computed(() => `${fontSizeInRem.value}rem`);
  return {
    sizeComputed,
    fontSizeComputed,
    fontSizeInRem
  };
};
export {
  useSize as a,
  useSizeRef as b,
  useSizeProps as u
};
//# sourceMappingURL=useSize.js.map