@onereach/ui-components 2.70.2-beta.2198.0 → 2.70.2-beta.2199.0

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

@@ -4,97 +4,28 @@ export const SidebarRoot: string[] = [
   // Position
   'relative',
 
-  // Layout
-  'flex',
-  'flex-row',
-  'shrink-0',
-
-  // Box
-  'min-w-0',
-  'h-auto',
-  'p-0',
-
-  // Theme
-  'bg-background',
-  'dark:bg-background-dark',
-];
-
-export const SidebarBar: string[] = [
-  // Position
-  'relative',
-
   // Layout
   'flex',
   'flex-col',
   'shrink-0',
-  'grow',
 
   // Box
   'min-h-0',
   'p-0',
-
-  // Theme
-  'text-on-background',
-  'dark:text-on-background-dark',
-
-  // Transition
-  'transition-[width]',
-];
-
-export const SidebarToolbar: string[] = [
-  // Position
-  'relative',
-
-  // Layout
-  'flex',
-  'flex-col',
-  'shrink-0',
-  'grow',
-  'overflow-auto',
-  'items-center',
-
-  // Sizing
-  'gap-md',
-
-  // Box
-  'min-h-0',
-  'min-w-xl',
-  'p-[6px]',
-  'pt-[56px]',
-  'pb-md+',
-
-  // Theme
-  'text-outline',
-  'dark:text-outline-dark',
 ];
 
-export const SidebarSides: Record<OrSidebarPlacement, string[]> = {
+export const SidebarRootSides: Record<OrSidebarPlacement, string[]> = {
   [OrSidebarPlacement.left]: [
     // Borders
     'border-r-[1px]',
     'border-r-solid',
-    'border-r-outline-variant dark:border-r-outline-variant-dark',
+    'border-r-secondary dark:border-r-secondary-dark',
   ],
   [OrSidebarPlacement.right]: [
     // Borders
     'border-l-[1px]',
     'border-l-solid',
-    'border-l-outline-variant dark:border-l-outline-variant-dark',
-  ],
-};
-
-export const SidebarToolbarSides: Record<OrSidebarPlacement, string[]> = {
-  [OrSidebarPlacement.left]: [
-    // Borders
-    'border-r-[1px]',
-    'border-r-solid',
-    'border-r-outline-variant dark:border-r-outline-variant-dark',
-  ],
-  [OrSidebarPlacement.right]: [
-    // Borders
-    'border-l-[1px]',
-    'border-l-solid',
-    'border-l-outline-variant dark:border-l-outline-variant-dark',
+    'border-l-secondary dark:border-l-secondary-dark',
   ],
 };
 
@@ -105,7 +36,7 @@ export const SidebarResize: string[] = [
   'z-[1]',
 
   // Box
-  'w-sm+',
+  'w-[12px]',
   'h-[100%]',
 
   // Cursor
@@ -119,7 +50,7 @@ export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
 
     // Borders
     'hover:border-r-2',
-    'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
+    'hover:border-r-primary hover:dark:border-r-primary-dark',
 
     // Transition
     'transition-[border-right]',
@@ -130,45 +61,23 @@ export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
 
     // Borders
     'hover:border-l-2',
-    'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
+    'hover:border-l-primary hover:dark:border-l-primary-dark',
 
     // Transition
     'transition-[border-left]',
   ],
 };
 
-export const SidebarCollapseButton: string[] = [
-  // Position
-  'absolute',
-  'top-md',
-  'inset-y-none',
-  'z-[1]',
-
-  // Cursor
-  'cursor-ew-resize',
-];
-
-export const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]> = {
-  [OrSidebarPlacement.left]: [
-    // Position
-    '-right-[12px]',
-  ],
-  [OrSidebarPlacement.right]: [
-    // Position
-    '-left-[12px]',
-  ],
-};
-
 export const SidebarResizingSides: Record<OrSidebarPlacement, string[]> = {
   [OrSidebarPlacement.left]: [
     // Borders
     'border-r-2',
-    'border-r-primary-hover dark:border-r-primary-hover-dark',
+    'border-r-primary dark:border-r-primary-dark',
   ],
   [OrSidebarPlacement.right]: [
     // Borders
     'border-l-2',
-    'border-l-primary-hover dark:border-l-primary-hover-dark',
+    'border-l-primary dark:border-l-primary-dark',
   ],
 };
 
@@ -177,24 +86,14 @@ export const SidebarMain: string[] = [
   'flex',
   'flex-col',
   'grow',
-  'overflow-x-hidden',
 
   // Box
   'min-h-0',
 ];
 
 export const SidebarHeader: string[] = [
-  // Layout
-  'shrink-0',
-  'overflow-hidden',
-
   // Sizing
   'p-md',
-
-  // Typography
-  'typography-headline-2',
-  'whitespace-nowrap',
-  'text-ellipsis',
 ];
 
 export const SidebarContent: string[] = [
@@ -207,54 +106,11 @@ export const SidebarContent: string[] = [
 ];
 
 export const SidebarFooter: string[] = [
-  // Layout
-  'shrink-0',
-  'overflow-x-hidden',
-
   // Sizing
   'p-md',
 
   // Borders
   'border-t-[1px]',
   'border-t-solid',
-  'border-t-outline-variant dark:border-t-outline-variant-dark',
-];
-
-export const CollapseButton: string[] = [
-  // Box
-  'w-[24px]',
-  'h-[24px]',
-
-  // Typography
-  '!text-[16px]',
-
-  // Borders
-  '!border-[1px]',
-  '!border-solid',
-
-  // Theme
-  '!text-primary dark:!text-primary-dark',
-  '!bg-background dark:!bg-background-dark',
-  '!border-outline-variant dark:!border-outline-variant-dark',
-  '!outline-none',
-
-  // Theme (hover)
-  'hover:!text-primary hover:dark:!text-primary-dark',
-  'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark',
-  'hover:!border-outline dark:hover:!border-outline-dark',
-
-  // Theme (active)
-  'active:!text-primary active:dark:!text-primary-dark',
-  'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark',
-  'active:!border-primary dark:active:!border-primary-dark',
-
-  // Theme (focus)
-  'focus:!text-primary focus:dark:!text-primary-dark',
-  'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark',
-  'focus:!border-outline dark:focus:!border-outline-dark',
-
-  // Theme (disabled)
-  'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark',
-  'disabled:!bg-background disabled:dark:!bg-background-dark',
-  'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark',
+  'border-t-secondary dark:border-t-secondary-dark',
 ];

package/src/components/or-switch-v3/OrSwitch.vue

@@ -1,13 +1,14 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="!loading">
       <input
-        v-bind="$attrs"
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
+        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"
@@ -33,7 +34,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -49,8 +50,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
+import { useClassAttribute, useControlAttributes, useIdAttribute } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot } from './styles';
@@ -117,13 +118,15 @@ export default defineComponent({
 
   expose: [
     'root',
+
+    'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
+    const control = ref<HTMLInputElement>();
 
     // Styles
     const classAttribute = useClassAttribute();
@@ -145,7 +148,10 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+    });
 
     const proxyModelValue = computed({
       get: () => {
@@ -158,13 +164,25 @@ export default defineComponent({
       },
     });
 
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
       loaderStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-tabs-v3/OrTabs.vue

@@ -139,7 +139,7 @@ export default defineComponent({
 
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
-    // Functions
+    // Methods
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 

package/src/components/or-textarea-v3/OrTextarea.stories3.ts

@@ -16,10 +16,6 @@ export default {
       control: { type: 'text' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     maxlength: {
       control: { type: 'number' },
     },
@@ -68,6 +64,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -1,11 +1,12 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -25,9 +26,9 @@
       :disabled="disabled"
     >
       <textarea
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
-        v-bind="$attrs"
+        v-bind="controlAttributes"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
@@ -70,8 +71,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
+import { useClassAttribute, useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
@@ -132,6 +133,11 @@ export default defineComponent({
       default: false,
     },
 
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -150,13 +156,15 @@ export default defineComponent({
 
   expose: [
     'root',
+
+    'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
+    const control = ref<HTMLTextAreaElement>();
 
     // Styles
     const classAttribute = useClassAttribute();
@@ -172,7 +180,11 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
     const proxyModelValue = computed({
       get: () => {
@@ -185,22 +197,32 @@ export default defineComponent({
       },
     });
 
+    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => controlAttributes.maxlength);
+
     const invalid = computed(() => !!props.error);
-    const readonly = computed(() => context.attrs.readonly as boolean);
 
-    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
 
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
-      invalid,
-      readonly,
       currentLength,
       maxLength,
+      invalid,
+      focus,
+      blur,
     };
   },
 });

package/src/hooks/index.ts

@@ -1,5 +1,8 @@
 export { useClassAttribute } from './useClassAttribute';
+export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
+export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
+export { useValidationAttributes } from './useValidationAttributes';

package/src/hooks/useControlAttributes.ts

@@ -0,0 +1,19 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ControlAttributes {
+  readonly: ComputedRef<boolean | undefined>;
+  disabled: ComputedRef<boolean | undefined>;
+
+  'force-state': ComputedRef<string | undefined>;
+}
+
+export function useControlAttributes(): ControlAttributes {
+  const attributes = useAttrs();
+
+  return {
+    readonly: computed(() => attributes['readonly'] as boolean | undefined),
+    disabled: computed(() => attributes['disabled'] as boolean | undefined),
+
+    'force-state': computed(() => attributes['force-state'] as string | undefined),
+  };
+}

package/src/hooks/useIdAttribute.ts

@@ -0,0 +1,9 @@
+import { computed, ComputedRef, getCurrentInstance, useAttrs } from 'vue-demi';
+
+export function useIdAttribute(): ComputedRef<string | undefined> {
+  const attributes = useAttrs(), component = getCurrentInstance();
+
+  return computed(() => {
+    return attributes['id'] as string | undefined ?? component?.uid.toString();
+  });
+}

package/src/hooks/useValidationAttributes.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ValidationAttributes {
+  required: ComputedRef<boolean | undefined>;
+  minlength: ComputedRef<number | undefined>;
+  maxlength: ComputedRef<number | undefined>;
+  pattern: ComputedRef<string | undefined>;
+  min: ComputedRef<number | undefined>;
+  max: ComputedRef<number | undefined>;
+  step: ComputedRef<number | undefined>;
+}
+
+export function useValidationAttributes(): ValidationAttributes {
+  const attributes = useAttrs();
+
+  return {
+    required: computed(() => attributes['required'] as boolean | undefined),
+    minlength: computed(() => attributes['minlength'] as number | undefined),
+    maxlength: computed(() => attributes['maxlength'] as number | undefined),
+    pattern: computed(() => attributes['pattern'] as string | undefined),
+    min: computed(() => attributes['min'] as number | undefined),
+    max: computed(() => attributes['max'] as number | undefined),
+    step: computed(() => attributes['step'] as number | undefined),
+  };
+}