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

package/dist/bundled/v2/OrChipsInput-8b18de32.js

@@ -1,151 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import __vue_component__$1 from './components/OrChip/OrChip.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-const OR_CHIPS_VALUE_PROP = {
-  type: Array,
-  default: () => []
-};
-const PLACEHOLDER_PROP = {
-  type: String,
-  default: ''
-};
-
-var script = defineComponent({
-  name: 'OrChipsInput',
-  components: {
-    OrChip: __vue_component__$1
-  },
-  props: {
-    chips: OR_CHIPS_VALUE_PROP,
-    placeholder: PLACEHOLDER_PROP,
-    input: {
-      type: String,
-      default: ''
-    },
-    duplicateAtIndex: {
-      type: Number,
-      default: -1
-    },
-    isFocused: Boolean,
-    isDisabled: Boolean,
-    isInvalid: Boolean
-  },
-  emits: ['add-chip', 'delete-chip', 'input-change', 'focus', 'blur'],
-  computed: {
-    placeholderText() {
-      return this.chips && this.chips.length ? '' : this.placeholder;
-    },
-    states() {
-      return {
-        error: this.isInvalid,
-        disabled: this.isDisabled
-      };
-    }
-  },
-  watch: {
-    isFocused: {
-      handler(isFocused) {
-        const ref = this.$refs['or-chips-input'];
-        if (ref) {
-          isFocused ? ref.focus() : ref.blur();
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getOrChipColor(index) {
-      return this.duplicateAtIndex === index ? 'error' : '';
-    },
-    /* Help user to put input in focus by clicking on empty space  */
-    handleContentClick(event) {
-      const CONTENT_CLASS = 'or-chips-input';
-      const target = event.target;
-      if (target.classList.contains(CONTENT_CLASS)) {
-        this.$emit('focus');
-      }
-    }
-  }
-});
-
-/* 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('form', {
-    staticClass: "or-chips-input",
-    class: _vm.states,
-    on: {
-      "click": _vm.handleContentClick,
-      "submit": function ($event) {
-        $event.preventDefault();
-        return _vm.$emit('add-chip');
-      }
-    }
-  }, [_vm._l(_vm.chips, function (item, index) {
-    return _c('or-chip', {
-      key: index,
-      attrs: {
-        "content": item,
-        "color": _vm.getOrChipColor(index),
-        "is-disabled": _vm.isDisabled
-      },
-      on: {
-        "delete": function ($event) {
-          return _vm.$emit('delete-chip', index);
-        }
-      }
-    });
-  }), _vm._v(" "), _c('input', {
-    ref: "or-chips-input",
-    staticClass: "or-chips-input-element",
-    attrs: {
-      "placeholder": _vm.placeholderText,
-      "disabled": _vm.isDisabled
-    },
-    domProps: {
-      "value": _vm.input
-    },
-    on: {
-      "input": function ($event) {
-        return _vm.$emit('input-change', $event.target.value);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur');
-      }
-    }
-  })], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-aac65718_0", {
-    source: "@keyframes spinAround-data-v-aac65718{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-aac65718{from{opacity:1}to{opacity:0}}.or-chips-input[data-v-aac65718]{display:flex;flex-wrap:wrap;align-items:center;padding:.125rem .5rem;background-color:var(--c-neutral-1);border:1px solid var(--c-neutral-2);border-radius:.25rem}.or-chips-input.error[data-v-aac65718]{border-color:var(--c-error)}.or-chips-input.disabled[data-v-aac65718]{cursor:not-allowed}.or-chips-input.disabled .or-chips-input-element[data-v-aac65718]{cursor:not-allowed}.or-chips-input-element[data-v-aac65718]{flex:1 1 auto;min-width:0;height:1.875rem;margin:0 .125rem;font-size:var(--fs-1);background:0 0;border:none;outline:0}.or-chips-input .or-chip[data-v-aac65718]{margin:.125rem}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-aac65718";
-/* 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_CHIPS_VALUE_PROP as O, PLACEHOLDER_PROP as P, __vue_component__ as _ };

package/dist/bundled/v2/OrColorPicker-99f6c9e0.js

@@ -1,495 +0,0 @@
-import { defineComponent, ref } from 'vue-demi';
-import { useToggle, onClickOutside } from '@vueuse/core';
-import { _ as __vue_component__$1, O as OrFloatingPlacements } from './OrFloating-0397263c.js';
-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: __vue_component__$1
-  },
-  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);
-
-export { __vue_component__ 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 };