@onereach/ui-components 2.70.0-beta.2159.0 → 2.70.0-beta.2160.0

package/dist/bundled/v2/OrAvatar-2c49e923.js

@@ -0,0 +1,168 @@
+import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
+import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var AvatarSize;
+(function (AvatarSize) {
+  AvatarSize["XL"] = "xl";
+  AvatarSize["L"] = "l";
+  AvatarSize["M"] = "m";
+  AvatarSize["S"] = "s";
+})(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 = {}));
+
+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]',
+  // Typography
+  'text-[32px]'],
+  'l': [
+  // Box
+  'w-[64px]', 'h-[64px]',
+  // Typography
+  'text-[24px]'],
+  'm': [
+  // Box
+  'w-[40px]', 'h-[40px]',
+  // Typography
+  'text-[16px]'],
+  's': [
+  // Box
+  'w-[32px]', 'h-[32px]',
+  // Typography
+  'text-[16px]']
+};
+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']
+};
+
+var script = defineComponent({
+  name: 'OrAvatar',
+  inheritAttrs: false,
+  props: {
+    src: {
+      type: String,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: AvatarSize.M
+    },
+    color: {
+      type: String,
+      default: AvatarColor.auto,
+      required: false
+    },
+    colorSalt: {
+      type: String,
+      default: undefined,
+      required: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], 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 [_c('img', {
+      class: _vm.imageStyles,
+      attrs: {
+        "src": _vm.src,
+        "alt": ''
+      }
+    })];
+  })], 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 { AvatarSize as A, __vue_component__ as _, AvatarColor as a };

package/dist/bundled/v2/OrAvatar-470e8799.js

@@ -0,0 +1,116 @@
+import { defineComponent } from 'vue-demi';
+import _ from 'lodash';
+import { _ as __vue_component__$1 } from './OrIcon-bb0cf737.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+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,
+      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 { OR_AVATAR_SIZE as O, __vue_component__ as _ };

package/dist/bundled/v2/OrButton-1c43f4bf.js

@@ -0,0 +1,188 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1 } from './OrLoader-5cf41b7d.js';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var ButtonVariant;
+(function (ButtonVariant) {
+  ButtonVariant["Contained"] = "contained";
+  ButtonVariant["Outlined"] = "outlined";
+  ButtonVariant["Text"] = "text";
+  ButtonVariant["Link"] = "link";
+})(ButtonVariant || (ButtonVariant = {}));
+var ButtonColor;
+(function (ButtonColor) {
+  ButtonColor["Primary"] = "primary";
+  ButtonColor["Danger"] = "danger";
+  ButtonColor["Inherit"] = "inherit";
+})(ButtonColor || (ButtonColor = {}));
+var ButtonType;
+(function (ButtonType) {
+  ButtonType["Button"] = "button";
+  ButtonType["Submit"] = "submit";
+  ButtonType["Reset"] = "reset";
+})(ButtonType || (ButtonType = {}));
+
+const ButtonRoot = [
+// Layout
+'layout-inline-row justify-center',
+// Shape
+'rounded-md',
+// Interactivity
+'interactivity-auto',
+// Typography
+'typography-button'];
+const ButtonRootVariants = {
+  'contained': [
+  // Spacing
+  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
+  // Theme
+  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
+  'outlined': [
+  // Spacing
+  'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
+  'text': [
+  // Spacing
+  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
+  'link': [
+  // Spacing
+  'gap-sm md:gap-xs']
+};
+const ButtonRootColors = {
+  'primary-contained': [
+  // Theme
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  'danger-contained': [
+  // Theme
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
+  'inherit-contained': [],
+  'primary-outlined': [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-border-1-primary', 'dark:theme-border-1-primary-dark'],
+  'danger-outlined': [
+  // Theme
+  'theme-preset-3-error', 'dark:theme-preset-3-error-dark', 'theme-border-1-error', 'dark:theme-border-1-error-dark'],
+  'inherit-outlined': [],
+  'primary-text': [
+  // Theme
+  'theme-preset-4-primary', 'dark:theme-preset-4-primary-dark'],
+  'danger-text': [
+  // Theme
+  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
+  'inherit-text': [],
+  'primary-link': [
+  // Theme
+  'theme-preset-4-primary', 'dark:theme-preset-4-primary-dark'],
+  'danger-link': [
+  // Theme
+  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
+  'inherit-link': []
+};
+
+var script = defineComponent({
+  name: 'OrButton',
+  components: {
+    OrLoader: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    type: {
+      type: String,
+      default: ButtonType.Button
+    },
+    variant: {
+      type: String,
+      default: ButtonVariant.Contained
+    },
+    color: {
+      type: String,
+      default: ButtonColor.Primary
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingText: {
+      type: String,
+      default: 'Loading'
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-button', ...ButtonRoot, ...ButtonRootVariants[props.variant], ...ButtonRootColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none', classAttribute.value]);
+    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('button', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "type": _vm.type,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('click', $event);
+      },
+      "focus": function ($event) {
+        return _vm.$emit('focus', $event);
+      },
+      "blur": function ($event) {
+        return _vm.$emit('blur', $event);
+      }
+    }
+  }, 'button', _vm.$attrs, false), [_c('div', {
+    class: ['contents', _vm.loading && 'invisible']
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.loading ? [_c('div', {
+    class: ['absolute']
+  }, [_vm.variant !== 'link' ? [_c('OrLoader', {
+    attrs: {
+      "variant": 'circular',
+      "color": 'inherit',
+      "size": 's'
+    }
+  })] : [_vm._v("\n        " + _vm._s(_vm.loadingText) + "…\n      ")]], 2)] : _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 { ButtonColor as B, __vue_component__ as _, ButtonVariant as a, ButtonType as b };