@onereach/ui-components 2.62.7-beta.1928.0 → 2.62.7-beta.1930.0

package/dist/v3/OrSegmentedControl-e45af169.js

@@ -1,183 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
-
-const SegmentedControlItemRoot = [
-// Layout
-'flex', 'items-center', 'justify-center',
-// Shape
-'rounded-md',
-// Interactivity
-'interactivity-auto',
-// Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Theme (selected)
-'selected:theme-background-default', 'dark:selected:theme-background-default-dark',
-// Theme (selected, enabled)
-'selected:enabled:shadow-card', 'dark:selected:enabled:shadow-card-dark'];
-const SegmentedControlItemRootSizes = {
-  'm': [
-  // Box
-  'h-[44px] md:h-[36px]',
-  // Spacing
-  'px-sm+ md:px-sm+',
-  // Typography
-  'typography-body-2-regular'],
-  's': [
-  // Box
-  'h-[36px] md:h-[32px]',
-  // Spacing
-  'px-sm+ md:px-sm',
-  // Typography
-  'typography-caption-regular']
-};
-
-var script$1 = defineComponent({
-  name: 'OrSegmentedControlItem',
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      required: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-const _hoisted_1 = ["selected", "disabled"];
-const _hoisted_2 = {
-  class: /*#__PURE__*/normalizeClass(['truncate'])
-};
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles,
-    selected: _ctx.selected ? '' : null,
-    disabled: _ctx.disabled ? '' : null
-  }), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16 /* FULL_PROPS */, _hoisted_1);
-}
-
-script$1.render = render$1;
-script$1.__file = "src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue";
-
-var SegmentedControlSize;
-(function (SegmentedControlSize) {
-  SegmentedControlSize["M"] = "m";
-  SegmentedControlSize["S"] = "s";
-})(SegmentedControlSize || (SegmentedControlSize = {}));
-
-const SegmentedControlRoot = [
-// Layout
-'grid', 'grid-flow-col', 'auto-cols-fr',
-// Shape
-'rounded-md',
-// Spacing
-'px-[2px]', 'py-[2px]',
-// Theme
-'theme-background-surface-variant', 'dark:theme-background-surface-variant-dark'];
-const SegmentedControlRootSizes = {
-  'm': [],
-  's': []
-};
-
-var script = defineComponent({
-  name: 'OrSegmentedControl',
-  components: {
-    OrSegmentedControlItem: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    options: {
-      type: Array,
-      default: []
-    },
-    modelValue: {
-      type: String,
-      default: undefined
-    },
-    value: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: SegmentedControlSize.M
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'focus', 'blur'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
-    // State
-    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,
-      proxyModelValue
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrSegmentedControlItem = resolveComponent("OrSegmentedControlItem");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
-    return openBlock(), createBlock(_component_OrSegmentedControlItem, {
-      key: option.value,
-      size: _ctx.size,
-      selected: option.value === _ctx.proxyModelValue,
-      disabled: _ctx.disabled,
-      onClick: withModifiers($event => _ctx.proxyModelValue = option.value, ["stop"])
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
-
-      _: 2 /* DYNAMIC */
-    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["size", "selected", "disabled", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */))], 16 /* FULL_PROPS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-segmented-control-v3/OrSegmentedControl.vue";
-
-export { SegmentedControlSize as S, script as s };

package/dist/v3/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue.d.ts

@@ -1,47 +0,0 @@
-import { PropType } from 'vue-demi';
-import { SegmentedControlSize } from '../../props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    size: {
-        type: PropType<SegmentedControlSize>;
-        required: true;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    size: {
-        type: PropType<SegmentedControlSize>;
-        required: true;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    size: SegmentedControlSize;
-    selected: boolean;
-    disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    size: SegmentedControlSize;
-    selected: boolean;
-    disabled: boolean;
-} & {}, {
-    selected: boolean;
-    disabled: boolean;
-}, true>);
-export default _default;

package/dist/v3/components/or-segmented-control-v3/components/or-segmented-control-item/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlSize } from '../../props';
-export declare const SegmentedControlItemRoot: string[];
-export declare const SegmentedControlItemRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v3/components/or-segmented-control-v3/index.d.ts

@@ -1,3 +0,0 @@
-export { default as OrSegmentedControlV3 } from './OrSegmentedControl.vue';
-export * from './props';
-export * from './types';

package/dist/v3/components/or-segmented-control-v3/props.d.ts

@@ -1,4 +0,0 @@
-export declare enum SegmentedControlSize {
-    M = "m",
-    S = "s"
-}

package/dist/v3/components/or-segmented-control-v3/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlSize } from './props';
-export declare const SegmentedControlRoot: string[];
-export declare const SegmentedControlRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v3/components/or-segmented-control-v3/types.d.ts

@@ -1,4 +0,0 @@
-export interface SegmentedControlOption {
-    value: string;
-    label: string;
-}

package/src/components/or-segmented-control-v3/OrSegmentedControl.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrSegmentedControlV3 as OrSegmentedControl } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-segmented-control-v3/OrSegmentedControl.stories3.ts

@@ -1,118 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import OrSegmentedControlDocs from './OrSegmentedControl.docs.mdx';
-import OrSegmentedControl from './OrSegmentedControl.vue';
-import { SegmentedControlSize } from './props';
-import { SegmentedControlOption } from './types';
-
-export default {
-  title: 'Components/Forms/Segmented Control',
-  component: OrSegmentedControl,
-
-  argTypes: {
-    // Props
-    options: {
-      control: { type: 'object' },
-    },
-
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(SegmentedControlSize),
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrSegmentedControlDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=410%3A2097&t=7N93DAotOYMOX2kx-1',
-    },
-  },
-} as Meta<typeof OrSegmentedControl>;
-
-const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
-  components: {
-    OrSegmentedControl,
-  },
-
-  setup() {
-    // State
-    const model = ref<string>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrSegmentedControl
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  `,
-});
-
-export const Base = Template.bind({});
-
-Base.args = {
-  // Props
-  options: Array.from<string, SegmentedControlOption>([
-    'Alfa',
-    'Bravo',
-    'Charlie',
-    'Delta',
-    'Echo',
-  ], (item) => ({
-    value: item.toLowerCase(),
-    label: item,
-  })),
-};

package/src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-    :selected="selected ? '' : null"
-    :disabled="disabled ? '' : null"
-  >
-    <div :class="['truncate']">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../../../hooks';
-import { SegmentedControlSize } from '../../props';
-import { SegmentedControlItemRoot, SegmentedControlItemRootSizes } from './styles';
-
-export default defineComponent({
-  name: 'OrSegmentedControlItem',
-
-  inheritAttrs: false,
-
-  props: {
-    size: {
-      type: String as PropType<SegmentedControlSize>,
-      required: true,
-    },
-
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  setup(props) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => [
-      'or-segmented-control-item',
-      ...SegmentedControlItemRoot,
-      ...SegmentedControlItemRootSizes[props.size],
-      classAttribute.value,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

package/src/components/or-segmented-control-v3/components/or-segmented-control-item/styles.ts

@@ -1,50 +0,0 @@
-import { SegmentedControlSize } from '../../props';
-
-export const SegmentedControlItemRoot: string[] = [
-  // Layout
-  'flex',
-  'items-center',
-  'justify-center',
-
-  // Shape
-  'rounded-md',
-
-  // Interactivity
-  'interactivity-auto',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-
-  // Theme (selected)
-  'selected:theme-background-default',
-  'dark:selected:theme-background-default-dark',
-
-  // Theme (selected, enabled)
-  'selected:enabled:shadow-card',
-  'dark:selected:enabled:shadow-card-dark',
-];
-
-export const SegmentedControlItemRootSizes: Record<SegmentedControlSize, string[]> = {
-  'm': [
-    // Box
-    'h-[44px] md:h-[36px]',
-
-    // Spacing
-    'px-sm+ md:px-sm+',
-
-    // Typography
-    'typography-body-2-regular',
-  ],
-
-  's': [
-    // Box
-    'h-[36px] md:h-[32px]',
-
-    // Spacing
-    'px-sm+ md:px-sm',
-
-    // Typography
-    'typography-caption-regular',
-  ],
-};

package/src/components/or-segmented-control-v3/index.ts

@@ -1,3 +0,0 @@
-export { default as OrSegmentedControlV3 } from './OrSegmentedControl.vue';
-export * from './props';
-export * from './types';

package/src/components/or-segmented-control-v3/props.ts

@@ -1,4 +0,0 @@
-export enum SegmentedControlSize {
-  M = 'm',
-  S = 's',
-}

package/src/components/or-segmented-control-v3/styles.ts

@@ -1,24 +0,0 @@
-import { SegmentedControlSize } from './props';
-
-export const SegmentedControlRoot: string[] = [
-  // Layout
-  'grid',
-  'grid-flow-col',
-  'auto-cols-fr',
-
-  // Shape
-  'rounded-md',
-
-  // Spacing
-  'px-[2px]',
-  'py-[2px]',
-
-  // Theme
-  'theme-background-surface-variant',
-  'dark:theme-background-surface-variant-dark',
-];
-
-export const SegmentedControlRootSizes: Record<SegmentedControlSize, string[]> = {
-  'm': [],
-  's': [],
-};

package/src/components/or-segmented-control-v3/types.ts

@@ -1,4 +0,0 @@
-export interface SegmentedControlOption {
-  value: string;
-  label: string;
-}