@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

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

@@ -0,0 +1 @@
+export { a as default } from '../OrAvatar-bfa6fd65.js';

package/dist/bundled/v3/components/OrAvatar/OrAvatar.vue.d.ts

@@ -0,0 +1,47 @@
+import { PropType } from 'vue-demi';
+import { OR_AVATAR_SIZE } from './constants';
+declare const _default: import("vue-demi").DefineComponent<{
+    src: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    size: {
+        type: PropType<OR_AVATAR_SIZE>;
+        default: OR_AVATAR_SIZE;
+        required: false;
+    };
+    icon: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+}, unknown, {
+    showImg: boolean;
+}, {
+    avatarClasses(): any[];
+}, {
+    showImage(): void;
+    hideImage(): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    src: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+    size: {
+        type: PropType<OR_AVATAR_SIZE>;
+        default: OR_AVATAR_SIZE;
+        required: false;
+    };
+    icon: {
+        type: PropType<string>;
+        default: string;
+        required: false;
+    };
+}>>, {
+    src: string;
+    size: OR_AVATAR_SIZE;
+    icon: string;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrAvatar/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum OR_AVATAR_SIZE {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}

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

@@ -0,0 +1 @@
+export { O as OR_AVATAR_SIZE } from '../OrAvatar-bfa6fd65.js';

package/dist/bundled/v3/components/OrAvatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrAvatar } from './OrAvatar.vue';
+export * from './constants';

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

@@ -0,0 +1 @@
+export { O as OR_AVATAR_SIZE, a as OrAvatar } from '../OrAvatar-bfa6fd65.js';

package/dist/bundled/v3/components/OrAvatar-bfa6fd65.js

@@ -0,0 +1,115 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock } from 'vue';
+import { defineComponent } from 'vue-demi';
+import { OrIcon as script$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));
+  }
+}
+
+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: script$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;
+    }
+  }
+});
+
+const _hoisted_1 = ["src"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.avatarClasses)
+  }, [_ctx.showImg ? (openBlock(), createElementBlock("img", {
+    key: 0,
+    src: _ctx.src,
+    class: "image",
+    alt: "avatar",
+    onLoad: _cache[0] || (_cache[0] = function () {
+      return _ctx.showImage && _ctx.showImage(...arguments);
+    }),
+    onError: _cache[1] || (_cache[1] = function () {
+      return _ctx.hideImage && _ctx.hideImage(...arguments);
+    })
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1)) : (openBlock(), createBlock(_component_or_icon, {
+    key: 1,
+    icon: _ctx.icon
+  }, null, 8 /* PROPS */, ["icon"]))], 2 /* CLASS */);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-ed355150 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-ed355150 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-avatar[data-v-ed355150], .or-avatar > .image[data-v-ed355150] {\n  border-radius: 9999px;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.or-avatar.is-small-size[data-v-ed355150], .or-avatar.is-small-size > .image[data-v-ed355150] {\n  width: 32px;\n  height: 32px;\n}\n.or-avatar.is-small-size[data-v-ed355150] .or-icon {\n  font-size: 2rem;\n  line-height: 2rem;\n}\n.or-avatar.is-medium-size[data-v-ed355150], .or-avatar.is-medium-size > .image[data-v-ed355150] {\n  width: 40px;\n  height: 40px;\n}\n.or-avatar.is-medium-size[data-v-ed355150] .or-icon {\n  font-size: 2.5rem;\n  line-height: 2.5rem;\n}\n.or-avatar.is-large-size[data-v-ed355150], .or-avatar.is-large-size > .image[data-v-ed355150] {\n  width: 80px;\n  height: 80px;\n}\n.or-avatar.is-large-size[data-v-ed355150] .or-icon {\n  font-size: 5rem;\n  line-height: 5rem;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-ed355150";
+script.__file = "src/components/or-avatar/OrAvatar.vue";
+
+export { OR_AVATAR_SIZE as O, script as a, styleInject as s };

package/dist/bundled/v3/components/OrAvatarV3/OrAvatar.js

@@ -0,0 +1 @@
+export { K as default } from '../OrAvatarV3-fad0711b.js';

package/dist/bundled/v3/components/OrAvatarV3/OrAvatar.vue.d.ts

@@ -0,0 +1,55 @@
+import { PropType } from 'vue-demi';
+import { AvatarColor, AvatarSize } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"xl" | "l" | "m" | "s" | "xs">;
+        default: AvatarSize;
+    };
+    color: {
+        type: PropType<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
+        default: AvatarColor;
+    };
+    colorSalt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"xl" | "l" | "m" | "s" | "xs">;
+        default: AvatarSize;
+    };
+    color: {
+        type: PropType<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
+        default: AvatarColor;
+    };
+    colorSalt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    src: string;
+    icon: string;
+    size: "xl" | "l" | "m" | "s" | "xs";
+    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
+    colorSalt: string;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrAvatarV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrAvatarV3 } from './OrAvatar.vue';
+export * from './props';

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

@@ -0,0 +1 @@
+export { M as AvatarColor, L as AvatarSize, K as OrAvatarV3 } from '../OrAvatarV3-fad0711b.js';

package/dist/bundled/v3/components/OrAvatarV3/props.d.ts

@@ -0,0 +1,15 @@
+export declare enum AvatarSize {
+    XL = "xl",
+    L = "l",
+    M = "m",
+    S = "s",
+    XS = "xs"
+}
+export declare enum AvatarColor {
+    Auto = "auto",
+    Blue = "blue",
+    Grey = "grey",
+    Green = "green",
+    Yellow = "yellow",
+    Red = "red"
+}

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

@@ -0,0 +1 @@
+export { M as AvatarColor, L as AvatarSize } from '../OrAvatarV3-fad0711b.js';

package/dist/bundled/v3/components/OrAvatarV3/styles.d.ts

@@ -0,0 +1,6 @@
+import { AvatarColor, AvatarSize } from './props';
+export declare const Avatar: string[];
+export declare const AvatarSizes: Record<AvatarSize, string[]>;
+export declare const AvatarIconSizes: Record<AvatarSize, string[]>;
+export declare const AvatarTextSizes: Record<AvatarSize, string[]>;
+export declare const AvatarColors: Record<AvatarColor, string[]>;

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

@@ -0,0 +1 @@
+export { N as Avatar, S as AvatarColors, P as AvatarIconSizes, O as AvatarSizes, Q as AvatarTextSizes } from '../OrAvatarV3-fad0711b.js';

package/dist/bundled/v3/components/OrAvatarV3-fad0711b.js

@@ -0,0 +1,281 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
+import { s as script$1 } from './OrIconV3-85d7d26b.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: script$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
+    };
+  }
+});
+
+const _hoisted_1 = ["src"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
+    key: 0,
+    class: normalizeClass(['w-full', 'h-full', 'object-cover']),
+    src: _ctx.src,
+    alt: ''
+  }, null, 8 /* PROPS */, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(_component_OrIcon, {
+    key: 1,
+    icon: _ctx.icon,
+    size: 'inherit'
+  }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)])], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-avatar-v3/OrAvatar.vue";
+
+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, script as K, AvatarSize as L, AvatarColor as M, Avatar as N, AvatarSizes as O, AvatarIconSizes as P, AvatarTextSizes as Q, RX_ABBREVIATION_FROM_STRING as R, AvatarColors as S, 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 };

package/dist/bundled/v3/components/OrBottomSheetV3/OrBottomSheet.js

@@ -0,0 +1 @@
+export { Z as default } from '../OrBottomSheetV3-199292db.js';