@onereach/ui-components 8.4.0-beta.3653.0 → 8.4.0

package/dist/bundled/v2/components/OrAvatar-56c993c9.js

@@ -1,209 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { OrIcon as __vue_component__$1 } from './OrIcon/index.js';
-
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
-    return;
-  }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    const options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    let hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            const originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            const existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
-}
-
-var OR_AVATAR_SIZE;
-(function (OR_AVATAR_SIZE) {
-  OR_AVATAR_SIZE["SMALL"] = "small";
-  OR_AVATAR_SIZE["MEDIUM"] = "medium";
-  OR_AVATAR_SIZE["LARGE"] = "large";
-})(OR_AVATAR_SIZE || (OR_AVATAR_SIZE = {}));
-
-var script = defineComponent({
-  name: 'OrAvatar',
-  components: {
-    OrIcon: __vue_component__$1
-  },
-  props: {
-    src: {
-      type: String,
-      default: '',
-      required: false
-    },
-    size: {
-      type: String,
-      default: OR_AVATAR_SIZE.MEDIUM,
-      required: false
-    },
-    icon: {
-      type: String,
-      default: 'account_circle',
-      required: false
-    }
-  },
-  data(props) {
-    return {
-      showImg: !!props.src
-    };
-  },
-  computed: {
-    avatarClasses() {
-      return ['or-avatar', {
-        [`is-${this.size}-size`]: !!this.size
-      }];
-    }
-  },
-  watch: {
-    src(val) {
-      this.showImg = !!val;
-    }
-  },
-  methods: {
-    showImage() {
-      this.showImg = true;
-    },
-    hideImage() {
-      this.showImg = false;
-    }
-  }
-});
-
-var css_248z = "@keyframes spinAround-data-v-70042eb2{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-70042eb2{from{opacity:1}to{opacity:0}}.or-avatar[data-v-70042eb2],.or-avatar>.image[data-v-70042eb2]{border-radius:9999px;-o-object-fit:cover;object-fit:cover}.or-avatar.is-small-size[data-v-70042eb2],.or-avatar.is-small-size>.image[data-v-70042eb2]{width:32px;height:32px}.or-avatar.is-small-size[data-v-70042eb2]  .or-icon{font-size:2rem;line-height:2rem}.or-avatar.is-medium-size[data-v-70042eb2],.or-avatar.is-medium-size>.image[data-v-70042eb2]{width:40px;height:40px}.or-avatar.is-medium-size[data-v-70042eb2]  .or-icon{font-size:2.5rem;line-height:2.5rem}.or-avatar.is-large-size[data-v-70042eb2],.or-avatar.is-large-size>.image[data-v-70042eb2]{width:80px;height:80px}.or-avatar.is-large-size[data-v-70042eb2]  .or-icon{font-size:5rem;line-height:5rem}";
-styleInject(css_248z);
-
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    class: _vm.avatarClasses
-  }, [_vm.showImg ? _c('img', {
-    staticClass: "image",
-    attrs: {
-      "src": _vm.src,
-      "alt": "avatar"
-    },
-    on: {
-      "load": _vm.showImage,
-      "error": _vm.hideImage
-    }
-  }) : _c('or-icon', {
-    attrs: {
-      "icon": _vm.icon
-    }
-  })], 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = "data-v-70042eb2";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { OR_AVATAR_SIZE as O, __vue_component__ as _, normalizeComponent as n, styleInject as s };

package/dist/bundled/v2/components/OrAvatarV3-3f78b50a.js

@@ -1,307 +0,0 @@
-import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIconV3-f514dbe4.js';
-import { n as normalizeComponent } from './OrAvatar-56c993c9.js';
-
-/**
- *  Generic
- */
-const RX_ARRAY_NOTATION = /\[(\d+)]/g;
-const RX_BV_PREFIX = /^(BV?)/;
-const RX_DIGITS = /^\d+$/;
-const RX_EXTENSION = /^\..+/;
-const RX_HASH = /^#/;
-const RX_HASH_ID = /^#[A-Za-z]+[\w\-:.]*$/;
-const RX_HTML_TAGS = /(<([^>]+)>)/gi;
-const RX_HYPHENATE = /\B([A-Z])/g;
-const RX_LOWER_UPPER = /([a-z])([A-Z])/g;
-const RX_NUMBER = /^[0-9]*\.?[0-9]+$/;
-const RX_PLUS = /\+/g;
-const RX_REGEXP_REPLACE = /[-/\\^$*+?.()|[\]{}]/g;
-const RX_SPACES = /[\s\uFEFF\xA0]+/g;
-const RX_SPACE_SPLIT = /\s+/;
-const RX_STAR = /\/\*$/;
-const RX_START_SPACE_WORD = /(\s|^)(\w)/g;
-const RX_TRIM_LEFT = /^\s+/;
-const RX_TRIM_RIGHT = /\s+$/;
-const RX_UNDERSCORE = /_/g;
-const RX_UN_KEBAB = /-(\w)/g;
-const RX_ABBREVIATION_FROM_STRING = /[\p{Alpha}\p{Nd}]+/gu;
-/**
- *  Date
- */
-// Loose YYYY-MM-DD matching, ignores any appended time inforation
-// Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
-const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/;
-// Used to split off the date parts of the YYYY-MM-DD string
-const RX_DATE_SPLIT = /-|\s|T/;
-// Time string RegEx (optional seconds)
-const RX_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/;
-/**
- *  URL
- */
-// HREFs must end with a hash followed by at least one non-hash character
-const RX_HREF = /^.*(#[^#]+)$/;
-const RX_ENCODED_COMMA = /%2C/g;
-const RX_ENCODE_REVERSE = /[!'()*]/g;
-const RX_QUERY_START = /^(\?|#|&)/;
-/**
- *  Color
- */
-const RX_SHORT_COLOR = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-const RX_LONG_COLOR = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
-
-function getHashOfString(str) {
-  return Math.abs(str.split('').reduce((hash, char) => char.charCodeAt(0) + ((hash << 5) - hash), 0));
-}
-function normalize(hash, min, max) {
-  return Math.floor(hash % (max - min) + min);
-}
-
-const HSL_LIMITS = {
-  h: {
-    min: 0,
-    max: 360
-  },
-  s: {
-    min: 50,
-    max: 75
-  },
-  l: {
-    min: 60,
-    max: 80
-  }
-};
-
-function hexToRgb(hex) {
-  hex = hex.replace(RX_SHORT_COLOR, (m, r, g, b) => r + r + g + g + b + b);
-  const result = RX_LONG_COLOR.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
-function componentToHex(c) {
-  const hex = c.toString(16);
-  return hex.length == 1 ? '0' + hex : hex;
-}
-function rgbToHex(r, g, b) {
-  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-function generateHslFromString(str) {
-  let limits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : HSL_LIMITS;
-  const hRange = (limits === null || limits === void 0 ? void 0 : limits.h) ? [limits.h.min, limits.h.max] : [0, 360];
-  const sRange = (limits === null || limits === void 0 ? void 0 : limits.s) ? [limits.s.min, limits.s.max] : [0, 100];
-  const lRange = (limits === null || limits === void 0 ? void 0 : limits.l) ? [limits.l.min, limits.l.max] : [0, 100];
-  const hash = getHashOfString(str);
-  const h = normalize(hash, ...hRange);
-  const s = normalize(hash, ...sRange);
-  const l = normalize(hash, ...lRange);
-  return {
-    h,
-    s,
-    l
-  };
-}
-function hslToColorString(hsl) {
-  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
-}
-
-var AvatarSize;
-(function (AvatarSize) {
-  AvatarSize["XL"] = "xl";
-  AvatarSize["L"] = "l";
-  AvatarSize["M"] = "m";
-  AvatarSize["S"] = "s";
-  AvatarSize["XS"] = "xs";
-})(AvatarSize || (AvatarSize = {}));
-var AvatarColor;
-(function (AvatarColor) {
-  AvatarColor["Auto"] = "auto";
-  AvatarColor["Blue"] = "blue";
-  AvatarColor["Grey"] = "grey";
-  AvatarColor["Green"] = "green";
-  AvatarColor["Yellow"] = "yellow";
-  AvatarColor["Red"] = "red";
-})(AvatarColor || (AvatarColor = {}));
-
-const Avatar = [
-// Layout
-'layout-inline-row justify-center',
-// Overflow
-'overflow-hidden',
-// Interactivity
-'interactivity-default',
-// Shape
-'rounded-full'];
-const AvatarSizes = {
-  [AvatarSize.XL]: [
-  // Box
-  'w-[80px]', 'h-[80px]'],
-  [AvatarSize.L]: [
-  // Box
-  'w-[64px]', 'h-[64px]'],
-  [AvatarSize.M]: [
-  // Box
-  'w-[40px]', 'h-[40px]'],
-  [AvatarSize.S]: [
-  // Box
-  'w-[32px]', 'h-[32px]'],
-  [AvatarSize.XS]: [
-  // Box
-  'w-[24px]', 'h-[24px]']
-};
-const AvatarIconSizes = {
-  [AvatarSize.XL]: [
-  // Typography
-  'text-[40px]'],
-  [AvatarSize.L]: [
-  // Typography
-  'text-[32px]'],
-  [AvatarSize.M]: [
-  // Typography
-  'text-[20px]'],
-  [AvatarSize.S]: [
-  // Typography
-  'text-[16px]'],
-  [AvatarSize.XS]: [
-  // Typography
-  'text-[16px]']
-};
-const AvatarTextSizes = {
-  [AvatarSize.XL]: [
-  // Typography
-  'typography-headline-1'],
-  [AvatarSize.L]: [
-  // Typography
-  'typography-headline-1'],
-  [AvatarSize.M]: [
-  // Typography
-  'typography-body-1-bold'],
-  [AvatarSize.S]: [
-  // Typography
-  'typography-body-1-bold'],
-  [AvatarSize.XS]: [
-  // Typography
-  'typography-caption-semibold']
-};
-const AvatarColors = {
-  [AvatarColor.Auto]: [
-  // Theme
-  'theme-foreground-base', 'dark:theme-foreground-base-dark'],
-  [AvatarColor.Blue]: [
-  // Theme
-  'theme-foreground-on-primary', 'dark:theme-foreground-on-primary-dark', 'theme-background-primary', 'dark:theme-background-primary-dark'],
-  [AvatarColor.Grey]: [
-  // Theme
-  'theme-foreground-on-secondary', 'dark:theme-foreground-on-secondary-dark', 'theme-background-secondary', 'dark:theme-background-secondary-dark'],
-  [AvatarColor.Green]: [
-  // Theme
-  'theme-foreground-on-success', 'dark:theme-foreground-on-success-dark', 'theme-background-success', 'dark:theme-background-success-dark'],
-  [AvatarColor.Yellow]: [
-  // Theme
-  'theme-foreground-on-warning', 'dark:theme-foreground-on-warning-dark', 'theme-background-warning', 'dark:theme-background-warning-dark'],
-  [AvatarColor.Red]: [
-  // Theme
-  'theme-foreground-on-error', 'dark:theme-foreground-on-error-dark', 'theme-background-error', 'dark:theme-background-error-dark']
-};
-
-var script = defineComponent({
-  name: 'OrAvatar',
-  components: {
-    OrIcon: __vue_component__$1
-  },
-  props: {
-    src: {
-      type: String,
-      default: undefined
-    },
-    icon: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: AvatarSize.M
-    },
-    color: {
-      type: String,
-      default: AvatarColor.Auto
-    },
-    colorSalt: {
-      type: String,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
-    // Effects
-    watchPostEffect(() => {
-      var _a;
-      const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.Auto) {
-        Object.assign(rootElement.style, {
-          color: props.color,
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
-        });
-      }
-    });
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, [_vm._t("default", function () {
-    return [_vm.src ? [_c('img', {
-      class: ['w-full', 'h-full', 'object-cover'],
-      attrs: {
-        "src": _vm.src,
-        "alt": ''
-      }
-    })] : _vm.icon ? [_c('OrIcon', {
-      attrs: {
-        "icon": _vm.icon,
-        "size": 'inherit'
-      }
-    })] : _vm._e()];
-  })], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { RX_QUERY_START as A, RX_SHORT_COLOR as B, RX_LONG_COLOR as C, hexToRgb as D, rgbToHex as E, generateHslFromString as F, hslToColorString as G, HSL_LIMITS as H, getHashOfString as I, normalize as J, AvatarSize as K, AvatarColor as L, Avatar as M, AvatarSizes as N, AvatarIconSizes as O, AvatarTextSizes as P, AvatarColors as Q, RX_ABBREVIATION_FROM_STRING as R, __vue_component__ as _, RX_ARRAY_NOTATION as a, RX_BV_PREFIX as b, RX_DIGITS as c, RX_EXTENSION as d, RX_HASH as e, RX_HASH_ID as f, RX_HTML_TAGS as g, RX_HYPHENATE as h, RX_LOWER_UPPER as i, RX_NUMBER as j, RX_PLUS as k, RX_REGEXP_REPLACE as l, RX_SPACES as m, RX_SPACE_SPLIT as n, RX_STAR as o, RX_START_SPACE_WORD as p, RX_TRIM_LEFT as q, RX_TRIM_RIGHT as r, RX_UNDERSCORE as s, RX_UN_KEBAB as t, RX_DATE as u, RX_DATE_SPLIT as v, RX_TIME as w, RX_HREF as x, RX_ENCODED_COMMA as y, RX_ENCODE_REVERSE as z };