init component

node_modules/buetify/lib/components/icons/utils/useFontAwesomeIconComponent.js

@@ -0,0 +1,175 @@
+import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core';
+import { h, defineComponent } from 'vue'; // import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+
+import { camelize } from '../../../utils/helpers';
+import { mergeClasses } from '../../../utils/mergeClasses';
+import { BIcon } from '../../icon';
+import { BIconPropsDefinition } from '../../icon/BIcon'; //replace iconDefinition with actual definition from fontawesome. causing some typescript issues at the moment
+
+function objectWithKey(key, value) {
+  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? {
+    [key]: value
+  } : {};
+} // eslint-disable-next-line
+
+
+function classList(props) {
+  const classes = {
+    'fa-spin': props.spin,
+    'fa-pulse': props.pulse,
+    'fa-fw': props.fixedWidth,
+    'fa-border': props.border,
+    'fa-li': props.listItem,
+    'fa-inverse': props.inverse,
+    'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
+    'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
+    [`fa-${props.size}`]: props.size !== undefined,
+    [`fa-rotate-${props.rotation}`]: props.rotation !== undefined,
+    [`fa-pull-${props.pull}`]: props.pull !== undefined,
+    'fa-swap-opacity': props.swapOpacity
+  };
+  return Object.keys(classes).map(key => classes[key] ? key : null).filter(key => key);
+}
+
+function styleToObject(style) {
+  return style.split(';').map(s => s.trim()).filter(s => s).reduce((acc, pair) => {
+    const i = pair.indexOf(':');
+    const prop = camelize(pair.slice(0, i));
+    const value = pair.slice(i + 1).trim();
+    acc[prop] = value;
+    return acc;
+  }, {}); // eslint-disable-line
+}
+
+function classToObject(cls) {
+  return cls.split(/\s+/).reduce((acc, c) => {
+    acc[c] = true;
+    return acc;
+  }, {}); // eslint-disable-line
+} // eslint-disable-next-line
+
+
+function normalizeIconArgs(icon) {
+  if (icon === null) {
+    return null;
+  }
+
+  if (typeof icon === 'object' && icon.prefix && icon.iconName) {
+    return icon;
+  }
+
+  if (Array.isArray(icon) && icon.length === 2) {
+    return {
+      prefix: icon[0],
+      iconName: icon[1]
+    };
+  }
+
+  if (typeof icon === 'string') {
+    return {
+      prefix: 'fas',
+      iconName: icon
+    };
+  }
+} // eslint-disable-next-line
+
+
+function convert(element, attrs = {}) {
+  if (typeof element === 'string') {
+    return h(element);
+  }
+
+  const mixins = Object.keys(element.attributes || {}).reduce((acc, key) => {
+    const val = element.attributes[key];
+
+    switch (key) {
+      case 'class':
+        acc['class'] = classToObject(val);
+        break;
+
+      case 'style':
+        acc['style'] = styleToObject(val);
+        break;
+
+      default:
+        acc[key] = val;
+    }
+
+    return acc;
+  }, {
+    class: {},
+    style: {}
+  } // eslint-disable-line
+  );
+  const {
+    class: dClass = {},
+    style: dStyle = {},
+    ...remainingData
+  } = attrs;
+  const {
+    class: mClass = {},
+    style: mStyle = {},
+    ...mRemainingData
+  } = mixins;
+  return h(element.tag, { ...attrs,
+    class: mergeClasses(mClass, dClass),
+    style: { ...mStyle,
+      ...dStyle
+    },
+    ...mRemainingData,
+    ...remainingData
+  }, (element.children || []).map(convert));
+} // eslint-disable-next-line
+
+
+function useFontAwesomeIconComponent_(iconArgs) {
+  return function FontAwesomeIcon(_, {
+    attrs
+  }) {
+    const {
+      mask: maskArgs,
+      symbol,
+      title
+    } = attrs; // eslint-disable-line
+
+    const icon = normalizeIconArgs(iconArgs);
+    const classes = objectWithKey('classes', classList(attrs));
+    const transform = objectWithKey('transform', typeof attrs.transform === 'string' ? faParse.transform(attrs.transform) : attrs.transform);
+    const mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
+    const {
+      abstract
+    } = faIcon(icon, { ...classes,
+      ...transform,
+      ...mask,
+      symbol,
+      title
+    });
+    return convert(abstract[0], attrs);
+  };
+}
+
+const SIZE_MAP = {
+  'is-small': '',
+  '': '',
+  'is-medium': 'fa-lg',
+  'is-large': 'fa-2x'
+}; // eslint-disable-next-line
+
+export function useFontAwesomeIconComponent(name, iconDefinition) {
+  const icon = useFontAwesomeIconComponent_(iconDefinition);
+  return defineComponent({
+    props: { ...BIconPropsDefinition,
+      iconClass: {
+        type: String
+      }
+    },
+
+    setup(props) {
+      return () => h(BIcon, props, () => h(icon, {
+        class: [props.iconClass, SIZE_MAP[props.size]]
+      }));
+    }
+
+  }); // eslint-disable-line
+}
+//# sourceMappingURL=useFontAwesomeIconComponent.js.map