@onereach/ui-components 2.68.0-beta.2082.0 → 2.68.0-beta.2084.0

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

@@ -1,102 +1,86 @@
-import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$1, L as LabelVariant } from '../../OrLabel-53f23ecb.js';
-import { u as useClassAttribute } from '../../useClassAttribute-47fdb016.js';
+import { defineComponent, inject, computed } from 'vue-demi';
+import _ from 'lodash';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { c as createInjector } from '../../browser-82dea9ed.js';
 
-const RadioRoot = [
-// Layout
-'flex', 'items-center',
-// Sizing
-'gap-sm+ md:gap-sm'];
-const RadioControl = [
-// Layout
-'flex', 'items-center', 'justify-center',
-// Box
-'w-md+ md:w-md', 'h-md+ md:h-md', 'rounded-full',
-// Interactivity
-'interactivity-auto',
-// Theme
-'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
-// Theme (focus)
-'focus:theme-outline-primary', 'dark:focus:theme-outline-primary-dark',
-// Theme (checked)
-'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
-const RadioControlHandle = [
-// Box
-'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs', 'after:rounded-full',
-// Theme
-'checked:after:bg-on-primary', 'dark:checked:after:bg-on-primary-dark',
-// Theme (disabled)
-'disabled:checked:after:bg-on-disabled', 'dark:disabled:checked:after:bg-on-disabled-dark'];
-
 var script = defineComponent({
-  name: 'OrCheckbox',
-  components: {
-    OrLabel: __vue_component__$1
-  },
+  name: 'OrRadio',
   inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
-      type: String,
-      default: undefined
+      type: null,
+      default: null
     },
     value: {
-      type: String,
-      default: undefined
-    },
-    inputValue: {
-      type: String,
+      type: null,
+      default: null,
       required: true
     },
     label: {
       type: String,
-      default: undefined
+      default: '',
+      required: false
     },
-    labelVariant: {
-      type: String,
-      default: LabelVariant.Toggle
-    },
-    required: {
+    isDisabled: {
       type: Boolean,
-      default: false
+      default: false,
+      required: false
     },
-    disabled: {
+    isUncheckable: {
       type: Boolean,
-      default: false
+      default: false,
+      required: false
     }
   },
-  emits: ['update:modelValue', 'input', 'focus', 'blur'],
-  expose: ['root'],
-  setup(props, context) {
-    var _a;
-    const currentInstance = getCurrentInstance();
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-radio', ...RadioRoot, classAttribute.value]);
-    const controlStyles = computed(() => [...RadioControl, ...RadioControlHandle]);
-    // State
-    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: value => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
+  emits: ['update:modelValue'],
+  setup(props, {
+    emit
+  }) {
+    const radioGroupInstance = inject('radioGroupInstance', null);
+    const hasInjection = computed(() => !!radioGroupInstance);
+    const modifiedIsDisabled = computed(() => {
+      return hasInjection.value ? (radioGroupInstance === null || radioGroupInstance === void 0 ? void 0 : radioGroupInstance.props.isDisabled) || props.isDisabled : props.isDisabled;
+    });
+    const modifiedIsUncheckable = computed(() => {
+      return hasInjection.value ? (radioGroupInstance === null || radioGroupInstance === void 0 ? void 0 : radioGroupInstance.props.isUncheckable) || props.isUncheckable : props.isUncheckable;
+    });
+    const isChecked = computed(() => {
+      var _a;
+      if (hasInjection.value) {
+        return _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue'], null), props.value) || _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue', 'value'], null), props.value);
       }
+      return _.isEqual(props.modelValue, props.value) || _.isEqual((_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.value, props.value);
     });
+    function onClick() {
+      if (!modifiedIsUncheckable.value && isChecked.value || modifiedIsDisabled.value) return;
+      const emitValue = modifiedIsUncheckable.value && isChecked.value ? null : {
+        label: props.label,
+        value: props.value
+      };
+      hasInjection.value ? radioGroupInstance === null || radioGroupInstance === void 0 ? void 0 : radioGroupInstance.emit('update:modelValue', emitValue) : emit('update:modelValue', emitValue);
+    }
     return {
-      root,
-      rootStyles,
-      controlStyles,
-      controlId,
-      proxyModelValue
+      modifiedIsDisabled,
+      modifiedIsUncheckable,
+      isChecked,
+      onClick
     };
+  },
+  computed: {
+    rootClasses() {
+      return ['or-radio', {
+        'is-checked': this.isChecked,
+        'is-uncheckable': !this.modifiedIsUncheckable,
+        'is-disabled': this.modifiedIsDisabled
+      }, this.$attrs.class];
+    },
+    localAttrs() {
+      return _.omit(this.$attrs, 'class');
+    }
   }
 });
 
@@ -108,69 +92,42 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
+  return _c('label', {
+    class: _vm.rootClasses
   }, [_c('input', _vm._b({
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.proxyModelValue,
-      expression: "proxyModelValue"
-    }],
-    class: _vm.controlStyles,
+    staticClass: "or-radio--input visually-hidden",
     attrs: {
-      "id": _vm.controlId,
-      "type": "radio",
-      "required": _vm.required,
-      "disabled": _vm.disabled
+      "disabled": _vm.modifiedIsDisabled,
+      "type": "radio"
     },
     domProps: {
-      "value": _vm.inputValue,
-      "checked": _vm._q(_vm.proxyModelValue, _vm.inputValue)
+      "value": _vm.value,
+      "checked": _vm.isChecked
     },
     on: {
-      "focus": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
-      },
-      "change": function ($event) {
-        _vm.proxyModelValue = _vm.inputValue;
-      }
+      "click": _vm.onClick
     }
-  }, 'input', _vm.$attrs, false)), _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
-    attrs: {
-      "control-id": _vm.controlId,
-      "variant": _vm.labelVariant,
-      "required": _vm.required,
-      "disabled": _vm.disabled
-    },
-    scopedSlots: _vm._u([{
-      key: "addon",
-      fn: function () {
-        return [_vm._t("addon")];
-      },
-      proxy: true
-    }], null, true)
+  }, 'input', _vm.localAttrs, false)), _vm._v(" "), _c('span', {
+    staticClass: "or-radio--radio"
+  }), _vm._v(" "), _c('span', {
+    staticClass: "or-radio--content"
   }, [_vm._t("default", function () {
-    return [_vm._v(_vm._s(_vm.label))];
-  })], 2)] : _vm._e()], 2);
+    return [_vm._v("\n      " + _vm._s(_vm.label) + "\n    ")];
+  })], 2)]);
 };
 var __vue_staticRenderFns__ = [];
 
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-3a964458_0", {
-    source: "input[data-v-3a964458]{appearance:none;line-height:0}",
+  inject("data-v-5a7edd11_0", {
+    source: "@keyframes spinAround-data-v-5a7edd11{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-5a7edd11{from{opacity:1}to{opacity:0}}.or-radio[data-v-5a7edd11]{display:inline-flex;align-items:center;cursor:pointer}.or-radio--radio[data-v-5a7edd11]{position:relative;width:1rem;min-width:1rem;height:1rem;min-height:1rem;margin-right:var(--s-3);background-color:var(--c-white);border:1px solid var(--c-neutral-2);border-radius:9999px;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:border-color,background-color,opacity}.or-radio--radio[data-v-5a7edd11]::after{position:absolute;top:50%;left:50%;width:.25rem;height:.25rem;content:\"\";background-color:var(--c-white);border-radius:inherit;transition-delay:.15s;transform:translate(-50%,-50%) scale(0);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:transform}.or-radio--content[data-v-5a7edd11]{color:var(--c-neutral-6);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}.or-radio.is-checked.is-uncheckable[data-v-5a7edd11]{cursor:default}.or-radio.is-checked .or-radio--radio[data-v-5a7edd11]{background-color:var(--c-primary);border-color:var(--c-primary)}.or-radio.is-checked .or-radio--radio[data-v-5a7edd11]::after{transform:translate(-50%,-50%) scale(1)}@media (hover:hover) and (pointer:fine){.or-radio:not(.or-radio.is-loading):not(.or-radio.is-disabled):not(.or-radio.is-readonly):not(.or-radio:disabled):not(.or-radio.is-focused):not(.or-radio:active):hover:not(.is-checked) .or-radio--radio[data-v-5a7edd11]{background-color:var(--c-white-darken-3);border-color:var(--c-neutral-2-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-radio:not(.or-radio.is-loading):not(.or-radio.is-disabled):not(.or-radio.is-readonly):not(.or-radio:disabled):not(.or-radio.is-focused):not(.or-radio:active):hover:not(.is-checked) .or-radio--radio[data-v-5a7edd11]{background-color:var(--c-white-darken-3);border-color:var(--c-neutral-2-darken-3)}}.or-radio:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active:not(.is-checked) .or-radio--radio[data-v-5a7edd11]{background-color:var(--c-white-darken-5);border-color:var(--c-neutral-2-darken-5)}.or-radio.is-disabled[data-v-5a7edd11],.or-radio[data-v-5a7edd11]:disabled{cursor:not-allowed}.or-radio.is-disabled .or-radio--radio[data-v-5a7edd11],.or-radio:disabled .or-radio--radio[data-v-5a7edd11]{opacity:.5}.or-radio.is-disabled .or-radio--content[data-v-5a7edd11],.or-radio:disabled .or-radio--content[data-v-5a7edd11]{color:var(--c-neutral-4)}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-3a964458";
+const __vue_scope_id__ = "data-v-5a7edd11";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

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

@@ -1,4 +1,4 @@
-export { _ as OrRadio } from '../../OrRadio-48d04879.js';
+export { default as OrRadio } from './OrRadio.js';
 import 'vue-demi';
 import 'lodash';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -0,0 +1,187 @@
+import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1, L as LabelVariant } from '../../OrLabel-53f23ecb.js';
+import { u as useClassAttribute } from '../../useClassAttribute-47fdb016.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { c as createInjector } from '../../browser-82dea9ed.js';
+
+const RadioRoot = [
+// Layout
+'flex', 'items-center',
+// Sizing
+'gap-sm+ md:gap-sm'];
+const RadioControl = [
+// Layout
+'flex', 'items-center', 'justify-center',
+// Box
+'w-md+ md:w-md', 'h-md+ md:h-md', 'rounded-full',
+// Interactivity
+'interactivity-auto',
+// Theme
+'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
+// Theme (focus)
+'focus:theme-outline-primary', 'dark:focus:theme-outline-primary-dark',
+// Theme (checked)
+'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
+const RadioControlHandle = [
+// Box
+'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs', 'after:rounded-full',
+// Theme
+'checked:after:bg-on-primary', 'dark:checked:after:bg-on-primary-dark',
+// Theme (disabled)
+'disabled:checked:after:bg-on-disabled', 'dark:disabled:checked:after:bg-on-disabled-dark'];
+
+var script = defineComponent({
+  name: 'OrCheckbox',
+  components: {
+    OrLabel: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    inputValue: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    labelVariant: {
+      type: String,
+      default: LabelVariant.Toggle
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-radio', ...RadioRoot, classAttribute.value]);
+    const controlStyles = computed(() => [...RadioControl, ...RadioControlHandle]);
+    // State
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      controlStyles,
+      controlId,
+      proxyModelValue
+    };
+  }
+});
+
+/* 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', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('input', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.proxyModelValue,
+      expression: "proxyModelValue"
+    }],
+    class: _vm.controlStyles,
+    attrs: {
+      "id": _vm.controlId,
+      "type": "radio",
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    domProps: {
+      "value": _vm.inputValue,
+      "checked": _vm._q(_vm.proxyModelValue, _vm.inputValue)
+    },
+    on: {
+      "focus": function ($event) {
+        return _vm.$emit('focus', $event);
+      },
+      "blur": function ($event) {
+        return _vm.$emit('blur', $event);
+      },
+      "change": function ($event) {
+        _vm.proxyModelValue = _vm.inputValue;
+      }
+    }
+  }, 'input', _vm.$attrs, false)), _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
+    attrs: {
+      "control-id": _vm.controlId,
+      "variant": _vm.labelVariant,
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._t("default", function () {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2)] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-3a964458_0", {
+    source: "input[data-v-3a964458]{appearance:none;line-height:0}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-3a964458";
+/* 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/OrRadioV3/index.js

@@ -1,4 +1,4 @@
-export { default as OrRadioV3 } from '../OrRadio/OrRadio.js';
+export { default as OrRadioV3 } from './OrRadioV3.js';
 import 'vue-demi';
 import '../../OrLabel-53f23ecb.js';
 import '../../useClassAttribute-47fdb016.js';