@onereach/ui-components 2.70.0-beta.2180.0 → 2.70.0

package/dist/bundled/v2/OrCollapse-3aa9a9b7.js

@@ -0,0 +1,173 @@
+import './index-fa6eb4ca.js';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import { s as setStyle, r as requestAF, a as reflow, b as removeStyle, c as cancelAF, g as getBCR } from './dom-3a15d036.js';
+import _ from 'lodash';
+import { defineComponent, ref, computed, onBeforeUnmount, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+var script = defineComponent({
+  name: 'OrCollapse',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    },
+    keepState: {
+      type: Boolean,
+      default: false,
+      required: false,
+      validator: _.isBoolean
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, {
+    emit
+  }) {
+    // data
+    const isActive = ref(props.modelValue || props.isVisible);
+    const reqAF = ref(null);
+    const slotScope = computed(() => ({
+      isVisible: isActive,
+      hide
+    }));
+    // methods
+    function hide() {
+      isActive.value = false;
+    }
+    function beforeEnter(el) {
+      setStyle(el, 'height', 0);
+      setStyle(el, 'overflow', 'hidden');
+    }
+    function enter(el) {
+      const {
+        scrollHeight
+      } = el;
+      reqAF.value = requestAF(() => {
+        reflow(el);
+        setStyle(el, 'height', pxToRem(scrollHeight));
+      });
+    }
+    function afterEnter(el) {
+      removeStyle(el, 'height');
+      removeStyle(el, 'overflow');
+      cancelAF(reqAF.value);
+    }
+    function beforeLeave(el) {
+      setStyle(el, 'overflow', 'hidden');
+    }
+    function leave(el) {
+      setStyle(el, 'height', 'auto');
+      setStyle(el, 'display', 'block');
+      reqAF.value = requestAF(() => {
+        var _a;
+        setStyle(el, 'height', pxToRem((_a = getBCR(el)) === null || _a === void 0 ? void 0 : _a.height));
+        reflow(el);
+        setStyle(el, 'height', 0);
+      });
+    }
+    function afterLeave(el) {
+      removeStyle(el, 'height');
+      removeStyle(el, 'overflow');
+      cancelAF(reqAF.value);
+    }
+    // hooks
+    onBeforeUnmount(() => {
+      isActive.value = false;
+      reqAF.value = null;
+    });
+    // watchers
+    watch([() => props.modelValue, () => props.isVisible], ([newValue, newIsVisible]) => {
+      if (newValue !== isActive.value || newIsVisible !== isActive.value) {
+        isActive.value = newValue || newIsVisible;
+      }
+    });
+    watch(isActive, (nv, ov) => {
+      if (nv !== ov) {
+        emit('update:modelValue', nv);
+      }
+    });
+    return {
+      // data
+      isActive,
+      slotScope,
+      // methods
+      beforeEnter,
+      enter,
+      afterEnter,
+      beforeLeave,
+      leave,
+      afterLeave
+    };
+  }
+});
+
+/* 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('transition', {
+    on: {
+      "before-enter": _vm.beforeEnter,
+      "enter": _vm.enter,
+      "after-enter": _vm.afterEnter,
+      "before-leave": _vm.beforeLeave,
+      "leave": _vm.leave,
+      "after-leave": _vm.afterLeave
+    }
+  }, [_vm.keepState ? [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isActive,
+      expression: "isActive"
+    }],
+    staticClass: "or-collapse"
+  }, [_vm._t("default", null, null, _vm.slotScope)], 2)] : [_vm.isActive ? _c('div', {
+    staticClass: "or-collapse"
+  }, [_vm._t("default", null, null, _vm.slotScope)], 2) : _vm._e()]], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-55ba4cbb_0", {
+    source: ".or-collapse[data-v-55ba4cbb]{padding:0;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:height}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-55ba4cbb";
+/* 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);
+var OrCollapse = __vue_component__;
+
+export { OrCollapse as O };

package/dist/bundled/v2/OrColorPicker-a1a37e83.js

@@ -0,0 +1,497 @@
+import './index-fa6eb4ca.js';
+import { useToggle, onClickOutside } from '@vueuse/core';
+import { O as OrFloating, a as OrFloatingPlacements } from './OrFloating-554d6f58.js';
+import { defineComponent, ref } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+const red = {
+  50: '#FFEBEE',
+  100: '#FFCDD2',
+  200: '#EF9A9A',
+  300: '#E57373',
+  400: '#EF5350',
+  500: '#F44336',
+  600: '#E53935',
+  700: '#D32F2F',
+  800: '#C62828',
+  900: '#B71C1C',
+  A100: '#FF8A80',
+  A200: '#FF5252',
+  A400: '#FF1744',
+  A700: '#D50000'
+};
+const pink = {
+  50: '#FCE4EC',
+  100: '#F8BBD0',
+  200: '#F48FB1',
+  300: '#F06292',
+  400: '#EC407A',
+  500: '#E91E63',
+  600: '#D81B60',
+  700: '#C2185B',
+  800: '#AD1457',
+  900: '#880E4F',
+  A100: '#FF80AB',
+  A200: '#FF4081',
+  A400: '#F50057',
+  A700: '#C51162'
+};
+const purple = {
+  50: '#F3E5F5',
+  100: '#E1BEE7',
+  200: '#CE93D8',
+  300: '#BA68C8',
+  400: '#AB47BC',
+  500: '#9C27B0',
+  600: '#8E24AA',
+  700: '#7B1FA2',
+  800: '#6A1B9A',
+  900: '#4A148C',
+  A100: '#EA80FC',
+  A200: '#E040FB',
+  A400: '#D500F9',
+  A700: '#AA00FF'
+};
+const deepPurple = {
+  50: '#EDE7F6',
+  100: '#D1C4E9',
+  200: '#B39DDB',
+  300: '#9575CD',
+  400: '#7E57C2',
+  500: '#673AB7',
+  600: '#5E35B1',
+  700: '#512DA8',
+  800: '#4527A0',
+  900: '#311B92',
+  A100: '#B388FF',
+  A200: '#7C4DFF',
+  A400: '#651FFF',
+  A700: '#6200EA'
+};
+const indigo = {
+  50: '#E8EAF6',
+  100: '#C5CAE9',
+  200: '#9FA8DA',
+  300: '#7986CB',
+  400: '#5C6BC0',
+  500: '#3F51B5',
+  600: '#3949AB',
+  700: '#303F9F',
+  800: '#283593',
+  900: '#1A237E',
+  A100: '#8C9EFF',
+  A200: '#536DFE',
+  A400: '#3D5AFE',
+  A700: '#304FFE'
+};
+const blue = {
+  50: '#E3F2FD',
+  100: '#BBDEFB',
+  200: '#90CAF9',
+  300: '#64B5F6',
+  400: '#42A5F5',
+  500: '#2196F3',
+  600: '#1E88E5',
+  700: '#1976D2',
+  800: '#1565C0',
+  900: '#0D47A1',
+  A100: '#82B1FF',
+  A200: '#448AFF',
+  A400: '#2979FF',
+  A700: '#2962FF'
+};
+const lightBlue = {
+  50: '#E1F5FE',
+  100: '#B3E5FC',
+  200: '#81D4FA',
+  300: '#4FC3F7',
+  400: '#29B6F6',
+  500: '#03A9F4',
+  600: '#039BE5',
+  700: '#0288D1',
+  800: '#0277BD',
+  900: '#01579B',
+  A100: '#80D8FF',
+  A200: '#40C4FF',
+  A400: '#00B0FF',
+  A700: '#0091EA'
+};
+const cyan = {
+  50: '#E0F7FA',
+  100: '#B2EBF2',
+  200: '#80DEEA',
+  300: '#4DD0E1',
+  400: '#26C6DA',
+  500: '#00BCD4',
+  600: '#00ACC1',
+  700: '#0097A7',
+  800: '#00838F',
+  900: '#006064',
+  A100: '#84FFFF',
+  A200: '#18FFFF',
+  A400: '#00E5FF',
+  A700: '#00B8D4'
+};
+const teal = {
+  50: '#E0F2F1',
+  100: '#B2DFDB',
+  200: '#80CBC4',
+  300: '#4DB6AC',
+  400: '#26A69A',
+  500: '#009688',
+  600: '#00897B',
+  700: '#00796B',
+  800: '#00695C',
+  900: '#004D40',
+  A100: '#A7FFEB',
+  A200: '#64FFDA',
+  A400: '#1DE9B6',
+  A700: '#00BFA5'
+};
+const green = {
+  50: '#E8F5E9',
+  100: '#C8E6C9',
+  200: '#A5D6A7',
+  300: '#81C784',
+  400: '#66BB6A',
+  500: '#4CAF50',
+  600: '#43A047',
+  700: '#388E3C',
+  800: '#2E7D32',
+  900: '#1B5E20',
+  A100: '#B9F6CA',
+  A200: '#69F0AE',
+  A400: '#00E676',
+  A700: '#00C853'
+};
+const lightGreen = {
+  50: '#F1F8E9',
+  100: '#DCEDC8',
+  200: '#C5E1A5',
+  300: '#AED581',
+  400: '#9CCC65',
+  500: '#8BC34A',
+  600: '#7CB342',
+  700: '#689F38',
+  800: '#558B2F',
+  900: '#33691E',
+  A100: '#CCFF90',
+  A200: '#B2FF59',
+  A400: '#76FF03',
+  A700: '#64DD17'
+};
+const lime = {
+  50: '#F9FBE7',
+  100: '#F0F4C3',
+  200: '#E6EE9C',
+  300: '#DCE775',
+  400: '#D4E157',
+  500: '#CDDC39',
+  600: '#C0CA33',
+  700: '#AFB42B',
+  800: '#9E9D24',
+  900: '#827717',
+  A100: '#F4FF81',
+  A200: '#EEFF41',
+  A400: '#C6FF00',
+  A700: '#AEEA00'
+};
+const yellow = {
+  50: '#FFFDE7',
+  100: '#FFF9C4',
+  200: '#FFF59D',
+  300: '#FFF176',
+  400: '#FFEE58',
+  500: '#FFEB3B',
+  600: '#FDD835',
+  700: '#FBC02D',
+  800: '#F9A825',
+  900: '#F57F17',
+  A100: '#FFFF8D',
+  A200: '#FFFF00',
+  A400: '#FFEA00',
+  A700: '#FFD600'
+};
+const amber = {
+  50: '#FFF8E1',
+  100: '#FFECB3',
+  200: '#FFE082',
+  300: '#FFD54F',
+  400: '#FFCA28',
+  500: '#FFC107',
+  600: '#FFB300',
+  700: '#FFA000',
+  800: '#FF8F00',
+  900: '#FF6F00',
+  A100: '#FFE57F',
+  A200: '#FFD740',
+  A400: '#FFC400',
+  A700: '#FFAB00'
+};
+const orange = {
+  50: '#FFF3E0',
+  100: '#FFE0B2',
+  200: '#FFCC80',
+  300: '#FFB74D',
+  400: '#FFA726',
+  500: '#FF9800',
+  600: '#FB8C00',
+  700: '#F57C00',
+  800: '#EF6C00',
+  900: '#E65100',
+  A100: '#FFD180',
+  A200: '#FFAB40',
+  A400: '#FF9100',
+  A700: '#FF6D00'
+};
+const deepOrange = {
+  50: '#FBE9E7',
+  100: '#FFCCBC',
+  200: '#FFAB91',
+  300: '#FF8A65',
+  400: '#FF7043',
+  500: '#FF5722',
+  600: '#F4511E',
+  700: '#E64A19',
+  800: '#D84315',
+  900: '#BF360C',
+  A100: '#FF9E80',
+  A200: '#FF6E40',
+  A400: '#FF3D00',
+  A700: '#DD2C00'
+};
+const brown = {
+  50: '#EFEBE9',
+  100: '#D7CCC8',
+  200: '#BCAAA4',
+  300: '#A1887F',
+  400: '#8D6E63',
+  500: '#795548',
+  600: '#6D4C41',
+  700: '#5D4037',
+  800: '#4E342E',
+  900: '#3E2723'
+};
+const blueGrey = {
+  50: '#ECEFF1',
+  100: '#CFD8DC',
+  200: '#B0BEC5',
+  300: '#90A4AE',
+  400: '#78909C',
+  500: '#607D8B',
+  600: '#546E7A',
+  700: '#455A64',
+  800: '#37474F',
+  900: '#263238'
+};
+// export const grey = {
+//   50: '#FAFAFA',
+//   100: '#F5F5F5',
+//   200: '#EEEEEE',
+//   300: '#E0E0E0',
+//   400: '#BDBDBD',
+//   500: '#9E9E9E',
+//   600: '#757575',
+//   700: '#616161',
+//   800: '#424242',
+//   900: '#212121',
+// };
+const black = {
+  default: '#000000'
+};
+const white = {
+  default: '#FFFFFF'
+};
+var Palette = {
+  red,
+  pink,
+  purple,
+  deepPurple,
+  indigo,
+  blue,
+  lightBlue,
+  cyan,
+  teal,
+  green,
+  lightGreen,
+  lime,
+  yellow,
+  amber,
+  orange,
+  deepOrange,
+  brown,
+  blueGrey,
+  // grey,
+  black,
+  white
+};
+
+const defaultTones = ['900', '700', '500', '300', '100'];
+function defaultPalette() {
+  return Object.entries(Palette).reduce((acc, [color, schema]) => {
+    if (color === 'black' || color === 'white') {
+      acc.push([Palette[color].default]);
+    } else {
+      acc.push(defaultTones === null || defaultTones === void 0 ? void 0 : defaultTones.map(tone => schema[tone]));
+    }
+    return acc;
+  }, []);
+}
+
+var script = defineComponent({
+  name: 'OrColorPicker',
+  components: {
+    OrFloating
+  },
+  props: {
+    palette: {
+      type: Object,
+      default: defaultPalette
+    },
+    defaultColor: {
+      type: String,
+      default: '#fff'
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.BOTTOM_START
+    }
+  },
+  emits: ['select'],
+  setup() {
+    const selected = ref(null);
+    const [isActive, toggle] = useToggle(false);
+    const trigger = ref(null);
+    onClickOutside(trigger, () => {
+      if (isActive.value) toggle();
+    });
+    return {
+      trigger,
+      toggle,
+      isActive,
+      selected
+    };
+  },
+  computed: {},
+  methods: {
+    getClass(tone) {
+      return ['or-color-picker-color-it', {
+        'or-color-picker-color--white': tone === Palette.white.default
+      }];
+    },
+    handlerClick(color) {
+      this.selected = color;
+      this.$emit('select', color);
+    }
+  }
+});
+
+/* 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', {
+    staticClass: "color-container"
+  }, [_c('div', {
+    ref: "trigger",
+    staticClass: "tag__color",
+    style: {
+      backgroundColor: _vm.selected || _vm.defaultColor
+    },
+    on: {
+      "click": function ($event) {
+        $event.preventDefault();
+        return _vm.toggle.apply(null, arguments);
+      }
+    }
+  }), _vm._v(" "), _vm.isActive ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.trigger,
+      "offset": 8,
+      "placement": _vm.placement,
+      "is-using-shift": "",
+      "is-using-flip": ""
+    }
+  }, [_c('div', {
+    staticClass: "or-color-picker-box"
+  }, _vm._l(_vm.palette, function (group, idx) {
+    return _c('div', {
+      key: idx,
+      staticClass: "or-color-picker-color-group"
+    }, _vm._l(group, function (color) {
+      return _c('div', {
+        key: color,
+        class: _vm.getClass(color),
+        style: {
+          background: color
+        },
+        attrs: {
+          "role": "option",
+          "aria-label": 'Color:' + color,
+          "aria-selected": color === _vm.selected,
+          "data-color": color
+        },
+        on: {
+          "click": function ($event) {
+            $event.preventDefault();
+            return _vm.handlerClick(color);
+          }
+        }
+      }, [_c('div', {
+        directives: [{
+          name: "show",
+          rawName: "v-show",
+          value: color === _vm.selected,
+          expression: "color === selected"
+        }],
+        staticClass: "or-color-picker-pick"
+      }, [_c('svg', {
+        staticStyle: {
+          "width": "24px",
+          "height": "24px"
+        },
+        attrs: {
+          "viewBox": "0 0 24 24"
+        }
+      }, [_c('path', {
+        attrs: {
+          "d": "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+        }
+      })])])]);
+    }), 0);
+  }), 0)]) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-7932e202_0", {
+    source: "@keyframes spinAround-data-v-7932e202{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7932e202{from{opacity:1}to{opacity:0}}.color-container[data-v-7932e202]{position:relative}.color-container .tag__color[data-v-7932e202]{width:20px;height:20px;margin-right:10px;border:var(--s-1) solid var(--c-neutral-0-darken-3);border-radius:50%;cursor:pointer}.or-color-picker-box[data-v-7932e202]{max-height:244px;max-width:312px;overflow-y:scroll;background-color:var(--c-neutral-0);box-shadow:0 2px 10px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.16);padding:var(--s-4);display:flex;gap:var(--s-3);flex-wrap:wrap}.or-color-picker-box .or-color-picker-color-group[data-v-7932e202]{width:40px;float:left}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color-it[data-v-7932e202]{box-sizing:border-box;width:40px;height:24px;cursor:pointer;margin-bottom:1px;overflow:hidden;border-radius:var(--s-1) var(--s-1) 0 0}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white[data-v-7932e202]{border:1px solid #ddd}.or-color-picker-box .or-color-picker-color-group .or-color-picker-pick[data-v-7932e202]{fill:#fff;margin-left:8px;display:block}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white .or-color-picker-pick[data-v-7932e202]{fill:#333}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-7932e202";
+/* 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);
+var __vue_component__$1 = __vue_component__;
+
+export { __vue_component__$1 as _, purple as a, blue as b, cyan as c, deepPurple as d, lightGreen as e, lime as f, green as g, amber as h, indigo as i, deepOrange as j, brown as k, lightBlue as l, blueGrey as m, black as n, orange as o, pink as p, red as r, teal as t, white as w, yellow as y };