@onereach/ui-components 2.62.7-beta.1932.0 → 2.62.7

package/src/components/or-segmented-control-v3/OrSegmentedControl.vue

@@ -1,107 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-  >
-    <OrSegmentedControlItem
-      v-for="option in options"
-      :key="option.value"
-      :size="size"
-      :selected="option.value === proxyModelValue"
-      :disabled="disabled"
-      @click.stop="proxyModelValue = option.value"
-    >
-      {{ option.label }}
-    </OrSegmentedControlItem>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-import OrSegmentedControlItem from './components/or-segmented-control-item/OrSegmentedControlItem.vue';
-import { SegmentedControlSize } from './props';
-import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
-import { SegmentedControlOption } from './types';
-
-export default defineComponent({
-  name: 'OrSegmentedControl',
-
-  components: {
-    OrSegmentedControlItem,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    options: {
-      type: Array as PropType<SegmentedControlOption[]>,
-      default: [] as SegmentedControlOption[],
-    },
-
-    modelValue: {
-      type: String,
-      default: undefined,
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
-    size: {
-      type: String as PropType<SegmentedControlSize>,
-      default: SegmentedControlSize.M,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'input',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => [
-      'or-segmented-control',
-      ...SegmentedControlRoot,
-      ...SegmentedControlRootSizes[props.size],
-      classAttribute.value,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: (value) => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    return {
-      root,
-      rootStyles,
-      proxyModelValue,
-    };
-  },
-});
-</script>

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

@@ -1,64 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-    :selected="selected ? '' : null"
-    :disabled="disabled ? '' : null"
-    @click="$emit('click', $event)"
-  >
-    <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;
-}