@onereach/ui-components 2.70.0-beta.2204.0 → 2.70.0-beta.2206.0

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

@@ -0,0 +1,120 @@
+import { defineComponent } from 'vue-demi';
+import _ from 'lodash';
+import { OR_AVATAR_SIZE } from './constants.js';
+import __vue_component__$1 from '../OrIcon/OrIcon.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { c as createInjector } from '../../browser-82dea9ed.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
+import '../OrTooltipContent/OrTooltipContent.js';
+import '../OrFloating/OrFloating.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrTeleportVue2/OrTeleportVue2.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.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,
+      validator: value => _.includes(_.values(OR_AVATAR_SIZE), value)
+    },
+    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;
+    }
+  }
+});
+
+/* 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__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-3fcd748d_0", {
+    source: "@keyframes spinAround-data-v-3fcd748d{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-3fcd748d{from{opacity:1}to{opacity:0}}.or-avatar[data-v-3fcd748d],.or-avatar>.image[data-v-3fcd748d]{border-radius:9999px;object-fit:cover}.or-avatar.is-small-size[data-v-3fcd748d],.or-avatar.is-small-size>.image[data-v-3fcd748d]{width:32px;height:32px}.or-avatar.is-small-size[data-v-3fcd748d]  .or-icon{font-size:2rem;line-height:2rem}.or-avatar.is-medium-size[data-v-3fcd748d],.or-avatar.is-medium-size>.image[data-v-3fcd748d]{width:40px;height:40px}.or-avatar.is-medium-size[data-v-3fcd748d]  .or-icon{font-size:2.5rem;line-height:2.5rem}.or-avatar.is-large-size[data-v-3fcd748d],.or-avatar.is-large-size>.image[data-v-3fcd748d]{width:80px;height:80px}.or-avatar.is-large-size[data-v-3fcd748d]  .or-icon{font-size:5rem;line-height:5rem}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-3fcd748d";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* 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, createInjector, undefined, undefined);
+
+export { __vue_component__ as default };

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

@@ -0,0 +1,8 @@
+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 };

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

@@ -0,0 +1,17 @@
+export { default as OrAvatar } from './OrAvatar.js';
+export { OR_AVATAR_SIZE } from './constants.js';
+import 'vue-demi';
+import 'lodash';
+import '../OrIcon/OrIcon.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
+import '../OrTooltipContent/OrTooltipContent.js';
+import '../../normalize-component-6e8e3d80.js';
+import '../../browser-82dea9ed.js';
+import '../OrFloating/OrFloating.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrTeleportVue2/OrTeleportVue2.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';

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

@@ -0,0 +1,121 @@
+import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
+import { hslToColorString, generateHslFromString } from '../../utils/functions/color.js';
+import { AvatarSize, AvatarColor } from './props.js';
+import { AvatarRoot, AvatarRootSizes, AvatarRootColors, AvatarRootAbbreviationSizes, AvatarRootIconSizes, AvatarImage } from './styles.js';
+import __vue_component__$1 from '../OrIconV3/OrIconV3.js';
+import { useClassAttribute } from '../../hooks/useClassAttribute.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../../utils/constants/regex.js';
+import '../../utils/functions/hash.js';
+import '../../utils/constants/color.js';
+import '../OrIconV3/props.js';
+import '../OrIconV3/styles.js';
+
+var script = defineComponent({
+  name: 'OrAvatar',
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    src: {
+      type: String,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: AvatarSize.M
+    },
+    icon: {
+      type: String,
+      default: undefined
+    },
+    color: {
+      type: String,
+      default: AvatarColor.auto,
+      required: false
+    },
+    colorSalt: {
+      type: String,
+      default: undefined,
+      required: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    const isIcon = computed(() => {
+      return !props.icon;
+    });
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
+    const imageStyles = computed(() => [...AvatarImage]);
+    // Effects
+    watchPostEffect(() => {
+      var _a;
+      const rootElement = root.value;
+      if (rootElement && !props.src && props.color === AvatarColor.auto) {
+        Object.assign(rootElement.style, {
+          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : '')),
+          color: props.color
+        });
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      imageStyles
+    };
+  }
+});
+
+/* 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', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_vm._t("default", function () {
+    return [_vm.src ? _c('img', {
+      class: _vm.imageStyles,
+      attrs: {
+        "src": _vm.src,
+        "alt": ''
+      }
+    }) : _vm.icon ? _c('or-icon', {
+      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 };

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

@@ -0,0 +1,13 @@
+export { default as OrAvatarV3 } from './OrAvatarV3.js';
+export { AvatarColor, AvatarSize } from './props.js';
+import 'vue-demi';
+import '../../utils/functions/color.js';
+import '../../utils/constants/regex.js';
+import '../../utils/functions/hash.js';
+import '../../utils/constants/color.js';
+import './styles.js';
+import '../OrIconV3/OrIconV3.js';
+import '../OrIconV3/props.js';
+import '../OrIconV3/styles.js';
+import '../../hooks/useClassAttribute.js';
+import '../../normalize-component-6e8e3d80.js';

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

@@ -0,0 +1,19 @@
+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["blue"] = "blue";
+  AvatarColor["yellow"] = "yellow";
+  AvatarColor["red"] = "red";
+  AvatarColor["green"] = "green";
+  AvatarColor["grey"] = "grey";
+  AvatarColor["auto"] = "auto";
+})(AvatarColor || (AvatarColor = {}));
+
+export { AvatarColor, AvatarSize };

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

@@ -0,0 +1,65 @@
+import { AvatarColor } from './props.js';
+
+const AvatarRoot = [
+// Layout
+'flex', 'items-center', 'justify-center', 'overflow-hidden',
+// Box
+'rounded-full',
+// Interactivity
+'interactivity-none'];
+const AvatarImage = [
+// Box
+'w-full', 'h-full', 'object-cover'];
+const AvatarRootSizes = {
+  'xl': [
+  // Box
+  'w-[80px]', 'h-[80px]'],
+  'l': [
+  // Box
+  'w-[64px]', 'h-[64px]'],
+  'm': [
+  // Box
+  'w-[40px]', 'h-[40px]'],
+  's': [
+  // Box
+  'w-[32px]', 'h-[32px]'],
+  'xs': [
+  // Box
+  'w-[24px]', 'h-[24px]']
+};
+const AvatarRootColors = {
+  [AvatarColor.blue]: [
+  // Theme
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  [AvatarColor.yellow]: [
+  // Theme
+  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
+  [AvatarColor.red]: [
+  // Theme
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
+  [AvatarColor.green]: [
+  // Theme
+  'theme-preset-1-success', 'dark:theme-preset-1-success-dark'],
+  [AvatarColor.grey]: [
+  // Theme
+  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
+  [AvatarColor.auto]: [
+  // Theme
+  'text-white', 'dark:text-overlay-dark']
+};
+const AvatarRootAbbreviationSizes = {
+  'xl': ['typography-headline-1'],
+  'l': ['typography-headline-1'],
+  'm': ['typography-body-1-bold'],
+  's': ['typography-body-1-bold'],
+  'xs': ['typography-caption-semibold']
+};
+const AvatarRootIconSizes = {
+  'xl': ['text-[40px]'],
+  'l': ['text-[32px]'],
+  'm': ['text-[20px]'],
+  's': ['text-[16px]'],
+  'xs': ['text-[16px]']
+};
+
+export { AvatarImage, AvatarRoot, AvatarRootAbbreviationSizes, AvatarRootColors, AvatarRootIconSizes, AvatarRootSizes };

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

@@ -0,0 +1,144 @@
+import { usePointerSwipe, onClickOutside, SwipeDirection } from '@vueuse/core';
+import { defineComponent, ref, computed, watch, unref } from 'vue-demi';
+import { BottomSheetRoot, BottomSheetHandle, BottomSheetHeader } from './styles.js';
+import __vue_component__$1 from '../OrOverlayV3/OrOverlayV3.js';
+import { useClassAttribute } from '../../hooks/useClassAttribute.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../OrOverlayV3/styles.js';
+import '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
+import 'portal-vue';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+
+var script = defineComponent({
+  name: 'OrBottomSheet',
+  components: {
+    OrOverlay: __vue_component__$1
+  },
+  inheritAttrs: false,
+  emits: ['update:state'],
+  expose: ['root', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-bottom-sheet', ...BottomSheetRoot, classAttribute.value]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
+    // State
+    const state = ref('closed');
+    // Events
+    watch(state, value => {
+      context.emit('update:state', value);
+    });
+    // Methods
+    function open() {
+      state.value = 'open';
+    }
+    function close() {
+      state.value = 'closed';
+    }
+    // Handlers
+    function onSwipeUp() {
+      state.value = 'full-open';
+    }
+    function onSwipeDown() {
+      state.value = state.value === 'full-open' ? 'open' : 'closed';
+    }
+    // Effects
+    // #region Swipe
+    const swipeOptions = {
+      threshold: 0,
+      onSwipe(event) {
+        const rootElement = unref(root);
+        Object.assign(rootElement.style, {
+          transitionProperty: 'none',
+          minHeight: `${rootElement.clientHeight - event.offsetY}px`,
+          maxHeight: `${rootElement.clientHeight - event.offsetY}px`
+        });
+      },
+      onSwipeEnd(event, direction) {
+        const rootElement = unref(root);
+        switch (direction) {
+          case SwipeDirection.UP:
+            Object.assign(rootElement.style, {
+              transitionProperty: 'min-height, max-height',
+              minHeight: '100%',
+              maxHeight: '100%'
+            });
+            onSwipeUp();
+            break;
+          case SwipeDirection.DOWN:
+            Object.assign(rootElement.style, {
+              transitionProperty: 'min-height, max-height',
+              minHeight: '0',
+              maxHeight: '50%'
+            });
+            onSwipeDown();
+            break;
+        }
+      }
+    };
+    usePointerSwipe(root, swipeOptions);
+    // #endregion
+    // #region Click Outside
+    onClickOutside(root, close);
+    // #endregion
+    return {
+      root,
+      rootStyles,
+      handleStyles,
+      headerStyles,
+      state,
+      open,
+      close
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.state !== 'closed' ? _c('OrOverlay', {
+    attrs: {
+      "fullscreen": _vm.state === 'full-open'
+    }
+  }, [_c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.handleStyles
+  }), _vm._v(" "), _c('div', {
+    class: _vm.headerStyles
+  }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
+    class: [_vm.state === 'full-open' ? 'overflow-y-auto' : 'overflow-hidden']
+  }, [_vm._t("default")], 2)])]) : _vm._e();
+};
+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 };

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

@@ -0,0 +1,12 @@
+export { default as OrBottomSheetV3 } from './OrBottomSheetV3.js';
+import '@vueuse/core';
+import 'vue-demi';
+import './styles.js';
+import '../OrOverlayV3/OrOverlayV3.js';
+import '../OrOverlayV3/styles.js';
+import '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
+import 'portal-vue';
+import '../../normalize-component-6e8e3d80.js';
+import '../../hooks/useClassAttribute.js';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';

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

@@ -0,0 +1,37 @@
+const BottomSheetRoot = [
+// Position
+'fixed', 'left-none', 'right-none', 'bottom-none',
+// Layout
+'layout-column',
+// Box
+'max-h-[50%]',
+// Shape
+'rounded-t-lg',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Animation
+'transition-[min-height]', 'transition-[max-height]'];
+const BottomSheetHandle = [
+// Layout
+'layout-row justify-center',
+// Box
+'after:w-2xl', 'after:h-xs',
+// Shape
+'after:rounded-full',
+// Spacing
+'px-sm', 'py-sm',
+// Interactivity
+'cursor-grab',
+// Theme
+'after:bg-outline', 'after:dark:bg-outline'];
+const BottomSheetHeader = [
+// Layout
+'empty:hidden',
+// Spacing
+'px-lg', 'py-md',
+// Typography
+'typography-headline-3'];
+
+export { BottomSheetHandle, BottomSheetHeader, BottomSheetRoot };