@onereach/ui-components 8.13.1 → 8.14.0-beta.3784.0

package/dist/bundled/v2/hooks/useResponsive/useResponsive.js

@@ -1,2 +1,210 @@
-export { v as default } from '../../components/OrBottomSheetV3-4291849d.js';
-import 'vue-demi';
+import { z as useMediaQuery } from '../../components/OrBottomSheetV3-3daaf994.js';
+import { getCurrentInstance, ref, watch, onMounted, isVue3, computed } from 'vue-demi';
+
+var createPlugin$2 = {};
+
+var createPlugin$1 = {};
+
+(function (exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function () {
+      return _default;
+    }
+  });
+  function createPlugin(plugin, config) {
+    return {
+      handler: plugin,
+      config
+    };
+  }
+  createPlugin.withOptions = function (pluginFunction) {
+    let configFunction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => ({});
+    const optionsFunction = function (options) {
+      return {
+        __options: options,
+        handler: pluginFunction(options),
+        config: configFunction(options)
+      };
+    };
+    optionsFunction.__isOptionsFunction = true;
+    // Expose plugin dependencies so that `object-hash` returns a different
+    // value if anything here changes, to ensure a rebuild is triggered.
+    optionsFunction.__pluginFunction = pluginFunction;
+    optionsFunction.__configFunction = configFunction;
+    return optionsFunction;
+  };
+  const _default = createPlugin;
+})(createPlugin$1);
+
+(function (exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function () {
+      return _default;
+    }
+  });
+  const _createPlugin = /*#__PURE__*/_interop_require_default(createPlugin$1);
+  function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+  const _default = _createPlugin.default;
+})(createPlugin$2);
+
+let createPlugin = createPlugin$2;
+var plugin$1 = (createPlugin.__esModule ? createPlugin : {
+  default: createPlugin
+}).default;
+
+const plugin = plugin$1;
+
+const screens = {
+  'sm': '600px',
+  'md': '900px',
+  'lg': '1200px',
+  'xl': '1536px',
+};
+
+const variants = {
+  'mobile': '@media (hover: none)',
+  'desktop': '@media (hover: hover)',
+
+  'draggable': ['&[draggable]:not([draggable="false"])'],
+
+  'checked': ['&[checked]:not([checked="false"])', '&:checked'],
+  'selected': ['&[selected]:not([selected="false"])', '&:checked'],
+  'activated': ['&[activated]:not([activated="false"])'],
+
+  'enabled': ['&:not([disabled])', '&[disabled="false"]'],
+  'disabled': ['&[disabled]:not([disabled="false"])'],
+
+  'optional': ['&:not([required])', '&[required="false"]'],
+  'required': ['&[required]:not([required="false"])'],
+
+  'read-write': ['&:not([readonly])', '&[readonly="false"]'],
+  'read-only': ['&[readonly]:not([readonly="false"])'],
+
+  'valid': ['&:not([invalid])', '&[invalid="false"]'],
+  'invalid': ['&[invalid]:not([invalid="false"])'],
+
+  // Sub-components
+  'children': ['& > *'],
+
+  get 'hover'() {
+    return this['enabled'].flatMap((selector) => [
+      `${selector}:not(.interactivity-none):hover`,
+      `${selector}:not(.interactivity-none)[force-state="hover"]`,
+    ]);
+  },
+
+  get 'focus'() {
+    return this['enabled'].flatMap((selector) => [
+      `${selector}:not(.interactivity-none):focus`,
+      `${selector}:not(.interactivity-none)[force-state="focus"]`,
+    ]);
+  },
+
+  get 'focus-within'() {
+    return this['enabled'].flatMap((selector) => [
+      `${selector}:not(.interactivity-none):focus-within`,
+      `${selector}:not(.interactivity-none)[force-state="focus-within"]`,
+    ]);
+  },
+
+  get 'focus-visible'() {
+    return this['enabled'].flatMap((selector) => [
+      `${selector}:not(.interactivity-none):focus-visible`,
+      `${selector}:not(.interactivity-none)[force-state="focus-visible"]`,
+    ]);
+  },
+
+  get 'active'() {
+    return this['enabled'].flatMap((selector) => [
+      `${selector}:not(.interactivity-none):active`,
+      `${selector}:not(.interactivity-none)[force-state="active"]`,
+    ]);
+  },
+};
+
+var core = {
+  screens,
+  variants,
+
+  plugin: plugin(({ addVariant, addUtilities }) => {
+    Object.entries(screens).forEach(([breakpoint, width]) => {
+      addVariant(breakpoint, [
+        `@media (min-width: ${width})`,
+        `[force-screen~="${breakpoint}"] &`,
+        `&[force-screen~="${breakpoint}"]`,
+      ]);
+    });
+
+    Object.entries(variants).forEach(([modifier, selectors]) => {
+      addVariant(modifier, selectors);
+    });
+
+    // TODO: Remove when migration complete
+    addUtilities({
+      '.visually-hidden': {
+        width: 0,
+        height: 0,
+        visibility: 'hidden',
+      },
+    });
+  }),
+};
+
+function useResponsive(element) {
+  const currentInstance = getCurrentInstance();
+  const currentRootElement = ref();
+  if (element) {
+    watch(element, value => {
+      currentRootElement.value = value;
+    });
+  } else {
+    onMounted(() => {
+      if (currentInstance) {
+        const element = currentInstance.vnode[isVue3 ? 'el' : 'elm'];
+        if (element instanceof Element) {
+          currentRootElement.value = element;
+        }
+      }
+    });
+  }
+  // State
+  const isDesktop = computed(() => {
+    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
+  });
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+  const desktopQuery = useMediaQuery(`(min-width: ${core.screens.md})`);
+  // Helpers
+  function isForcedDesktop(element) {
+    var _a, _b;
+    if (!element) {
+      return false;
+    }
+    const forcedScreens = (_a = element.getAttribute('force-screen')) === null || _a === void 0 ? void 0 : _a.split(/\s+/);
+    if (forcedScreens === null || forcedScreens === void 0 ? void 0 : forcedScreens.some(forcedScreen => ['md', 'lg', 'xl'].includes(forcedScreen))) {
+      return true;
+    }
+    return isForcedDesktop((_b = element.parentElement) !== null && _b !== void 0 ? _b : undefined);
+  }
+  return {
+    isDesktop,
+    isMobile
+  };
+}
+
+export { useResponsive as default };