@onereach/ui-components 12.0.1-beta.4595.0 → 12.0.2-beta.4597.0

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue

@@ -4,27 +4,135 @@
     :class="rootStyles"
     :style="rootInlineStyles"
   >
-    <template v-if="truncate">
-      <div :class="['truncate']">
-        <slot />
-      </div>
+    <template v-if="override">
+      <slot />
+    </template>
+
+    <template v-else-if="control">
+      <template v-if="control.type === 'text'">
+        <OrInput
+          v-model="model"
+          :type="'text'"
+          :variant="'embedded'"
+        />
+      </template>
+
+      <template v-if="control.type === 'number'">
+        <OrInput
+          v-model="model"
+          :type="'number'"
+          :variant="'embedded'"
+        />
+      </template>
+
+      <template v-if="control.type === 'rating'">
+        <OrRating
+          v-model="model"
+        />
+      </template>
+
+      <template v-if="control.type === 'select'">
+        <OrSelect
+          v-model="model"
+          :options="control.options"
+          :variant="'embedded'"
+          :anchor="root"
+        />
+      </template>
+
+      <template v-if="control.type === 'checkbox'">
+        <OrCheckbox
+          v-model="model"
+        />
+      </template>
+
+      <template v-if="control.type === 'switch'">
+        <OrSwitch
+          v-model="model"
+        />
+      </template>
+
+      <template v-if="control.type === 'date'">
+        <OrDatePicker
+          v-model="model"
+          :variant="'embedded'"
+          :anchor="root"
+        />
+      </template>
+
+      <template v-if="control.type === 'time'">
+        <OrTimePicker
+          v-model="model"
+          :variant="'embedded'"
+          :anchor="root"
+        />
+      </template>
+
+      <template v-if="control.type === 'datetime'">
+        <OrDateTimePicker
+          v-model="model"
+          :variant="'embedded'"
+          :anchor="root"
+        />
+      </template>
+
+      <template v-if="control.type === 'tags'">
+        <OrTagInput
+          v-model="model"
+          :variant="'embedded'"
+        />
+      </template>
     </template>
 
     <template v-else>
-      <slot />
+      <div :class="['truncate']">
+        <slot />
+      </div>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
+import { OrCheckboxV3 as OrCheckbox } from '../../../or-checkbox-v3';
+import { OrDatePickerV3 as OrDatePicker } from '../../../or-date-picker-v3';
+import { OrDateTimePickerV3 as OrDateTimePicker } from '../../../or-date-time-picker-v3';
+import { OrInputV3 as OrInput } from '../../../or-input-v3';
+import { OrRatingV3 as OrRating } from '../../../or-rating-v3';
+import { OrSelectV3 as OrSelect } from '../../../or-select-v3';
+import { OrSwitchV3 as OrSwitch } from '../../../or-switch-v3';
+import { OrTagInputV3 as OrTagInput } from '../../../or-tag-input-v3';
+import { OrTimePickerV3 as OrTimePicker } from '../../../or-time-picker-v3';
 import { DataGridColumn, DataGridFeatures } from '../../types';
 import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDataGridTableContentCell',
 
+  components: {
+    OrCheckbox,
+    OrDatePicker,
+    OrDateTimePicker,
+    OrInput,
+    OrRating,
+    OrSelect,
+    OrSwitch,
+    OrTagInput,
+    OrTimePicker,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
+    modelValue: {
+      type: undefined as unknown as PropType<any>,
+      default: undefined,
+    },
+
     column: {
       type: Object as PropType<DataGridColumn>,
       default: undefined,
@@ -35,17 +143,21 @@ export default defineComponent({
       default: undefined,
     },
 
-    truncate: {
+    override: {
       type: Boolean,
-      default: true,
+      default: false,
     },
   },
 
+  emits: [
+    'update:modelValue',
+  ],
+
   expose: [
     'root',
   ],
 
-  setup(props) {
+  setup(props, context) {
     // Refs & Styles
     const root = ref<HTMLElement>();
 
@@ -87,10 +199,21 @@ export default defineComponent({
       } as Partial<CSSStyleDeclaration>;
     });
 
+    // State
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+
+    const control = computed(() => {
+      return props.column?.control;
+    });
+
     return {
       root,
       rootStyles,
       rootInlineStyles,
+
+      model,
+
+      control,
     };
   },
 });

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/styles.ts

@@ -1,4 +1,7 @@
 export const DataGridTableContentCell: string[] = [
+  // Position
+  'relative focus-within:z-10',
+
   // Layout
   'layout-row',
 
@@ -8,11 +11,25 @@ export const DataGridTableContentCell: string[] = [
 
   'gap-xs',
 
+  // Theme
+  'theme-border-transparent border-1',
+  'dark:theme-border-transparent-dark',
+
+  'theme-outline-transparent outline-2',
+  'dark:theme-outline-transparent-dark',
+
+  // Theme (focus)
+  'focus-within:theme-border-primary',
+  'dark:focus-within:theme-border-primary-dark',
+
+  'focus-within:theme-outline-primary',
+  'dark:focus-within:theme-outline-primary-dark',
+
   // Theme (.sticky-start)
-  '[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1',
-  'dark:[&.sticky-start]:theme-border-disabled-dark',
+  '[&.sticky-start]:border-e-disabled',
+  'dark:[&.sticky-start]:border-e-disabled-dark',
 
   // Theme (.sticky-end)
-  '[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1',
-  'dark:[&.sticky-end]:theme-border-disabled-dark',
+  '[&.sticky-end]:border-s-disabled',
+  'dark:[&.sticky-end]:border-s-disabled-dark',
 ];

package/src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/styles.ts

@@ -7,4 +7,8 @@ export const DataGridTableFooterCell: string[] = [
   'py-0',
 
   'gap-xs',
+
+  // Theme
+  'theme-border-transparent border-1',
+  'dark:theme-border-transparent-dark',
 ];

package/src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue

@@ -5,15 +5,9 @@
     :style="rootInlineStyles"
     @click="toggleSorting()"
   >
-    <template v-if="truncate">
-      <div :class="['truncate']">
-        <slot />
-      </div>
-    </template>
-
-    <template v-else>
+    <div :class="['truncate']">
       <slot />
-    </template>
+    </div>
 
     <template v-if="model">
       <OrIcon :icon="model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'" />
@@ -54,13 +48,12 @@ export default defineComponent({
       type: Object as PropType<DataGridFeatures>,
       default: undefined,
     },
-
-    truncate: {
-      type: Boolean,
-      default: true,
-    },
   },
 
+  emits: [
+    'update:modelValue',
+  ],
+
   expose: [
     'root',
   ],

package/src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/styles.ts

@@ -8,11 +8,15 @@ export const DataGridTableHeaderCell: string[] = [
 
   'gap-xs',
 
+  // Theme
+  'theme-border-transparent border-1',
+  'dark:theme-border-transparent-dark',
+
   // Theme (.sticky-start)
-  '[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1',
-  'dark:[&.sticky-start]:theme-border-disabled-dark',
+  '[&.sticky-start]:border-e-disabled',
+  'dark:[&.sticky-start]:border-e-disabled-dark',
 
   // Theme (.sticky-end)
-  '[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1',
-  'dark:[&.sticky-end]:theme-border-disabled-dark',
+  '[&.sticky-end]:border-s-disabled',
+  'dark:[&.sticky-end]:border-s-disabled-dark',
 ];

package/src/components/or-data-grid-v3/types.ts

@@ -1,5 +1,6 @@
 import { DataModel, Id, ModelValue } from '../../types';
 import { PaginationModelValue } from '../or-pagination-v3';
+import { SelectItem } from '../or-select-v3';
 
 export type DataGridModelValue = ModelValue<{
   selecting: ModelValue<Id[]>;
@@ -23,10 +24,15 @@ export type DataGridColumn = {
   name: string;
   label: string;
 
-  width?: string | [string, string];
+  width?: string;
 
   alignment?: 'start' | 'end' | 'center';
   stickiness?: 'start' | 'end';
+
+  control?: {
+    type: 'text' | 'number' | 'rating' | 'select' | 'checkbox' | 'switch' | 'date' | 'time' | 'datetime' | 'tags';
+    options?: SelectItem[];
+  };
 };
 
 export enum DataGridVariant {

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -23,7 +23,7 @@
       :ref="'inputBox'"
       v-dropdown-open="openPopover"
       v-dropdown-close="closePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -48,7 +48,7 @@
         :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -126,6 +126,7 @@
 </template>
 
 <script lang="ts">
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useDateFormat, useLocale, useProxyModelValue } from '../../hooks';
@@ -135,7 +136,7 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import * as Styles from './styles';
@@ -200,9 +201,19 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -234,11 +245,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -265,6 +271,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-date-picker-v3',
       ...Styles.DatePicker,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const inputBox = ref<InstanceType<typeof OrInputBox>>();

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -23,7 +23,7 @@
       :ref="'inputBox'"
       v-dropdown-open="() => openPopover('from')"
       v-dropdown-close="closePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -61,7 +61,7 @@
         :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -184,11 +184,12 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import * as Styles from './styles';
 import { DateRangePickerModelValue } from './types';
+import { ReferenceElement } from '@floating-ui/dom';
 
 export default defineComponent({
   name: 'OrDateRangePicker',
@@ -235,9 +236,19 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -269,11 +280,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -300,6 +306,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-date-range-picker-v3',
       ...Styles.DateRangePicker,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const inputBox = ref<InstanceType<typeof OrInputBox>>();

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -23,7 +23,7 @@
       :ref="'inputBox'"
       v-dropdown-open="toggleDatePopover"
       v-dropdown-close="closeDatePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -59,7 +59,7 @@
         :custom-styles="datePopoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -102,7 +102,7 @@
         :custom-styles="timePopoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -183,13 +183,14 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from './partials';
 import * as Styles from './styles';
 import { DateTimePickerModelValue } from './types';
 import { formatMobileDate, formatMobileTime, getCurrentDate } from './utils';
+import { ReferenceElement } from '@floating-ui/dom';
 
 export default defineComponent({
   name: 'OrDateTimePicker',
@@ -268,9 +269,19 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -302,11 +313,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -333,6 +339,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-date-time-picker-v3',
       ...Styles.DateTimePicker,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const inputBox = ref<InstanceType<typeof OrInputBox>>();

package/src/components/or-input-box-v3/styles.ts

@@ -97,6 +97,12 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'disabled:theme-foreground-disabled',
     'dark:disabled:theme-foreground-disabled-dark',
   ],
+
+  [InputBoxVariant.Embedded]: [
+    // Spacing (children)
+    'first:children:!ms-0',
+    'last:children:!me-0',
+  ],
 };
 
 export const InputBoxSizes: Record<`${InputBoxSize}-${InputBoxDirection}`, string[]> = {
@@ -108,8 +114,8 @@ export const InputBoxSizes: Record<`${InputBoxSize}-${InputBoxDirection}`, strin
     'gap-sm+ md:gap-sm',
 
     // Spacing (children)
-    'first:children:ml-md md:first:children:ml-sm+',
-    'last:children:mr-md md:last:children:mr-sm+',
+    'first:children:ms-md md:first:children:ms-sm+',
+    'last:children:me-md md:last:children:me-sm+',
 
     // Typography
     'typography-body-2-regular',
@@ -128,8 +134,8 @@ export const InputBoxSizes: Record<`${InputBoxSize}-${InputBoxDirection}`, strin
     'gap-[6px]',
 
     // Spacing (children)
-    'first:children:ml-md md:first:children:ml-sm+',
-    'last:children:mr-md md:last:children:mr-sm+',
+    'first:children:ms-md md:first:children:ms-sm+',
+    'last:children:me-md md:last:children:me-sm+',
 
     // Typography
     'typography-caption-regular',

package/src/components/or-input-box-v3/types.ts

@@ -6,6 +6,7 @@ export enum InputBoxDirection {
 export enum InputBoxVariant {
   Styled = 'styled',
   Unstyled = 'unstyled',
+  Embedded = 'embedded',
 }
 
 export enum InputBoxSize {

package/src/components/or-input-v3/OrInput.vue

@@ -21,7 +21,7 @@
     </template>
 
     <OrInputBox
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly || loading"
@@ -130,10 +130,10 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
-import { InputControl, InputRoot } from './styles';
+import * as Styles from './styles';
 import { InputModelValue, InputType } from './types';
 
 export default defineComponent({
@@ -175,9 +175,14 @@ export default defineComponent({
       default: 'off',
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
     },
 
     label: {
@@ -219,11 +224,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -256,13 +256,14 @@ export default defineComponent({
 
     const rootStyles = computed(() => [
       'or-input-v3',
-      ...InputRoot,
+      ...Styles.Input,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const control = ref<HTMLInputElement>();
 
     const controlStyles = computed(() => [
-      ...InputControl,
+      ...Styles.InputControl,
     ]);
 
     // State

package/src/components/or-input-v3/styles.ts

@@ -1,4 +1,4 @@
-export const InputRoot: string[] = [
+export const Input: string[] = [
   // Layout
   'layout-column',