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

package/dist/bundled/v2/components/OrAvatar/OrAvatar.js

@@ -1,105 +1 @@
-import { defineComponent } from 'vue-demi';
-import { OR_AVATAR_SIZE } from './constants.js';
-import __vue_component__$1 from '../OrIcon/OrIcon.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-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 { __vue_component__ as default };
+export { _ as default } from '../OrAvatar-56c993c9.js';

package/dist/bundled/v2/components/OrAvatar/constants.js

@@ -1,8 +1 @@
-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 = {}));
-
-export { OR_AVATAR_SIZE };
+export { O as OR_AVATAR_SIZE } from '../OrAvatar-56c993c9.js';

package/dist/bundled/v2/components/OrAvatar/index.js

@@ -1,2 +1 @@
-export { default as OrAvatar } from './OrAvatar.js';
-export { OR_AVATAR_SIZE } from './constants.js';
+export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-56c993c9.js';

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

@@ -0,0 +1,209 @@
+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/OrAvatar.js

@@ -1,106 +1,2 @@
-import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
-import { hslToColorString, generateHslFromString } from '../../utils/functions/color.js';
-import { AvatarSize, AvatarColor } from './props.js';
-import { Avatar, AvatarSizes, AvatarIconSizes, AvatarTextSizes, AvatarColors } from './styles.js';
-import __vue_component__$1 from '../OrIconV3/OrIcon.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-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 { __vue_component__ as default };
+export { _ as default } from '../OrAvatarV3-3f78b50a.js';
+import '../OrAvatar-56c993c9.js';

package/dist/bundled/v2/components/OrAvatarV3/index.js

@@ -1,2 +1 @@
-export { default as OrAvatarV3 } from './OrAvatar.js';
-export { AvatarColor, AvatarSize } from './props.js';
+export { L as AvatarColor, K as AvatarSize, _ as OrAvatarV3 } from '../OrAvatarV3-3f78b50a.js';

package/dist/bundled/v2/components/OrAvatarV3/props.js

@@ -1,19 +1 @@
-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 = {}));
-
-export { AvatarColor, AvatarSize };
+export { L as AvatarColor, K as AvatarSize } from '../OrAvatarV3-3f78b50a.js';

package/dist/bundled/v2/components/OrAvatarV3/styles.js

@@ -1,84 +1 @@
-import { AvatarSize, AvatarColor } from './props.js';
-
-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']
-};
-
-export { Avatar, AvatarColors, AvatarIconSizes, AvatarSizes, AvatarTextSizes };
+export { M as Avatar, Q as AvatarColors, O as AvatarIconSizes, N as AvatarSizes, P as AvatarTextSizes } from '../OrAvatarV3-3f78b50a.js';