@onereach/ui-components 20.1.0 → 20.1.2

package/dist/esm-deps/components/or-inline-textarea-v3/index.js

@@ -1,174 +0,0 @@
-import { defineComponent, reactive, ref, computed, toRef, watch, nextTick } from 'vue';
-import { K, _, i as ie, r as re } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import { useTextareaAutosize } from '@vueuse/core';
-import '../../OrHint-fcdf591c.js';
-import { OrErrorV3 as script$1 } from '../or-error-v3/index.js';
-import { OrHintV3 as script$2 } from '../or-hint-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
-import { OrIconButtonV3 as script$3 } from '../or-icon-button-v3/index.js';
-import '../../OrInlineInputBox-d9dc104a.js';
-import { OrInlineInputBoxV3 as script$4 } from '../or-inline-input-box-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '../../constants-57e8b5da.js';
-import '../../OrIcon-cd8db2b5.js';
-import '../or-icon-v3/index.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-import '../or-popover-v3/index.js';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
-import '../or-overlay-v3/index.js';
-import '../or-teleport-v3/index.js';
-import '../../OrPopover-bd078650.js';
-
-const InlineTextarea = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const InlineTextareaControl = [
-// Box
-'w-full',
-// Typography
-'typography-inherit',
-// Theme (placeholder)
-'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark',
-// Behavior
-'resize-none'];
-const InlineTextareaAction = [
-// Layout
-'layout-inline-row self-start',
-// Spacing
-'px-0', 'py-sm*', 'gap-sm',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script = defineComponent({
-  name: 'OrInlineTextarea',
-  components: {
-    OrError: script$1,
-    OrHint: script$2,
-    OrIconButton: script$3,
-    OrInlineInputBox: script$4
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: undefined,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    saveOnBlur: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
-  expose: ['root', 'apply', 'reset', 'focus', 'blur'],
-  setup(props, context) {
-    const attributes = reactive({
-      id: K(),
-      ..._(),
-      ...ie()
-    });
-    // Refs & Styles
-    const root = ref();
-    const rootStyles = computed(() => ['or-inline-textarea-v3', ...InlineTextarea]);
-    const control = ref();
-    const controlStyles = computed(() => [...InlineTextareaControl]);
-    const actionStyles = computed(() => [...InlineTextareaAction]);
-    // State
-    const model = re(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: ref('')
-    });
-    const draft = ref(model.value);
-    watch(model, value => {
-      draft.value = value;
-    });
-    const activated = ref(false);
-    const length = computed(() => {
-      var _a, _b;
-      return (_b = (_a = draft.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
-    });
-    const maxLength = computed(() => {
-      return attributes.maxlength;
-    });
-    // Handlers
-    function onFocus() {
-      activated.value = true;
-    }
-    function onBlur() {
-      if (props.saveOnBlur) {
-        apply();
-      }
-    }
-    // Methods
-    function apply() {
-      if (draft.value !== model.value) {
-        model.value = draft.value;
-      }
-      activated.value = false;
-      nextTick(() => context.emit('apply', model.value));
-    }
-    function reset() {
-      if (draft.value !== model.value) {
-        draft.value = model.value;
-      }
-      activated.value = false;
-      nextTick(() => context.emit('reset', model.value));
-    }
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    useTextareaAutosize({
-      element: control,
-      input: draft
-    });
-    return {
-      attributes,
-      root,
-      rootStyles,
-      control,
-      controlStyles,
-      actionStyles,
-      model,
-      draft,
-      activated,
-      length,
-      maxLength,
-      onFocus,
-      onBlur,
-      apply,
-      reset,
-      focus,
-      blur
-    };
-  }
-});
-
-export { script as OrInlineTextareaV3 };

package/dist/esm-deps/components/or-input-v3/index.js

@@ -1,206 +0,0 @@
-import { defineComponent, reactive, ref, computed, toRef } from 'vue';
-import { K, _, i as ie, r as re, n as ne } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../OrHint-fcdf591c.js';
-import { OrErrorV3 as script$1 } from '../or-error-v3/index.js';
-import { OrHintV3 as script$2 } from '../or-hint-v3/index.js';
-import '../../OrIcon-cd8db2b5.js';
-import { OrIconV3 as script$3 } from '../or-icon-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
-import { OrIconButtonV3 as script$4 } from '../or-icon-button-v3/index.js';
-import '../../OrInputBox-e79531c2.js';
-import { OrInputBoxV3 as script$5 } from '../or-input-box-v3/index.js';
-import '../../OrLabel-d50a3ebb.js';
-import { OrLabelV3 as script$6 } from '../or-label-v3/index.js';
-import '../../OrLoader-4e331586.js';
-import { OrLoaderV3 as script$7 } from '../or-loader-v3/index.js';
-import { a as InputBoxVariant } from '../../types-98e9a758.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '@vueuse/core';
-import '../../constants-57e8b5da.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-import '../or-popover-v3/index.js';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
-import '../or-overlay-v3/index.js';
-import '../or-teleport-v3/index.js';
-import '../../OrPopover-bd078650.js';
-
-const Input = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const InputControl = [
-// Box
-'flex-auto',
-// Typography
-'typography-inherit',
-// Theme (placeholder)
-'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark',
-// Autofill hack,
-// disable (delay color change)
-'autofill:transition-colors autofill:duration-[5000s]',
-// override background color using box-shadow
-'autofill:shadow-[10px_0_1000px_theme(backgroundColor.primary-opacity-0-08)_inset]', 'dark:autofill:shadow-[0_0_0px_1000px_theme(backgroundColor.primary-opacity-0-08-dark)_inset]'];
-
-var InputType;
-(function (InputType) {
-  InputType["Text"] = "text";
-  InputType["Number"] = "number";
-  InputType["Password"] = "password";
-  InputType["Search"] = "search";
-})(InputType || (InputType = {}));
-var InputMode;
-(function (InputMode) {
-  InputMode["None"] = "none";
-  InputMode["Text"] = "text";
-  InputMode["Tel"] = "tel";
-  InputMode["Url"] = "url";
-  InputMode["Email"] = "email";
-  InputMode["Numeric"] = "numeric";
-  InputMode["Decimal"] = "decimal";
-  InputMode["Search"] = "search";
-})(InputMode || (InputMode = {}));
-
-var script = defineComponent({
-  name: 'OrInput',
-  components: {
-    OrError: script$1,
-    OrHint: script$2,
-    OrIcon: script$3,
-    OrIconButton: script$4,
-    OrInputBox: script$5,
-    OrLabel: script$6,
-    OrLoader: script$7
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: undefined,
-      default: undefined
-    },
-    name: {
-      type: String,
-      default: undefined
-    },
-    type: {
-      type: String,
-      default: () => InputType.Text
-    },
-    autocomplete: {
-      type: String,
-      default: 'off'
-    },
-    inputmode: {
-      type: String,
-      default: InputMode.Text
-    },
-    variant: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: undefined
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'clear', 'focus', 'blur'],
-  setup(props, context) {
-    const attributes = reactive({
-      id: K(),
-      ..._(),
-      ...ie()
-    });
-    // Refs & Styles
-    const root = ref();
-    const rootStyles = computed(() => ['or-input-v3', ...Input, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
-    const control = ref();
-    const controlStyles = computed(() => [...InputControl]);
-    // State
-    const model = re(toRef(props, 'modelValue'), context.emit);
-    const disclosed = ref(false);
-    const length = computed(() => {
-      var _a, _b;
-      return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
-    });
-    const maxLength = computed(() => {
-      return attributes.maxlength;
-    });
-    // Methods
-    function clear() {
-      model.value = undefined;
-    }
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    // Helpers
-    const {
-      isMobile
-    } = ne();
-    return {
-      attributes,
-      root,
-      rootStyles,
-      control,
-      controlStyles,
-      model,
-      disclosed,
-      length,
-      maxLength,
-      clear,
-      focus,
-      blur,
-      isMobile
-    };
-  }
-});
-
-export { InputMode, InputType, script as OrInputV3 };