refactor(separator): ts to sfc (oku-ui#503)

* refactor(separator): ts to sfc

* fix: lint issues

packages/vue/src/separator/Separator.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { computed, onMounted } from 'vue'
+import { Primitive } from '@oku-ui/primitive'
+import type { PrimitiveProps } from '@oku-ui/primitive'
+import { useComponentRef } from '@oku-ui/use-composable'
+
+export const DEFAULT_ORIENTATION = 'horizontal' as const
+export const ORIENTATIONS = ['horizontal', 'vertical'] as const
+export type Orientation = typeof ORIENTATIONS[number]
+
+export interface SeparatorProps extends PrimitiveProps {
+  /**
+   * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  orientation?: Orientation
+  /**
+   * Whether or not the component is purely decorative. When true, accessibility-related attributes
+   * are updated so that that the rendered element is removed from the accessibility tree.
+   */
+  decorative?: boolean
+}
+
+// Split this out for clearer readability of the error message.
+function getInvalidOrientationError(value: string, componentName: string) {
+  const error = `Invalid prop \`orientation\` of value \`${value}\` supplied to \`${componentName}\`, expected one of:
+  - horizontal
+  - vertical
+
+Defaulting to \`${DEFAULT_ORIENTATION}\`.`
+
+  console.error(error)
+}
+
+function isValidOrientation(orientation: any): orientation is Orientation {
+  return ORIENTATIONS.includes(orientation)
+}
+
+</script>
+
+<script setup lang="ts">
+
+defineOptions({
+  name: 'OkuSeparator',
+})
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  is: 'div',
+  orientation: 'horizontal',
+})
+
+const { componentRef, currentElement } = useComponentRef<HTMLButtonElement | null>()
+
+const orientation = computed(() => isValidOrientation(props.orientation)
+  ? props.orientation
+  : DEFAULT_ORIENTATION)
+
+// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+const ariaOrientation = computed(() =>
+  orientation.value === 'vertical'
+    ? orientation.value
+    : undefined)
+
+const semanticProps = computed(() => props.decorative
+  ? { role: 'none' }
+  : { 'aria-orientation': ariaOrientation.value, 'role': 'separator' })
+
+onMounted(() => {
+  if (!isValidOrientation(props.orientation))
+    getInvalidOrientationError(props.orientation, 'OkuSeparator')
+})
+
+defineExpose({
+  $el: currentElement,
+})
+</script>
+
+<template>
+  <Primitive
+    :is="props.is"
+    ref="componentRef"
+    :as-child="props.asChild"
+    :data-orientation="props.orientation"
+    v-bind="{
+      ...semanticProps,
+      ...$attrs,
+    }"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/vue/src/separator/index.ts

@@ -1,11 +1,5 @@
-export { OkuSeparator } from './separator'
-
 export {
-  separatorProps,
-} from './props'
-
-export type {
-  SeparatorProps,
-  SeparatorElement,
-  SeparatorNativeElement,
-} from './props'
+  default as OkuSeparator,
+  type SeparatorProps,
+  type Orientation,
+} from './Separator.vue'

packages/vue/src/separator/tests/__snapshots__/separator.test.ts.snap

@@ -1,20 +1,40 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`okuSeparator > should render OkuSeparator correctly 1`] = `"<primitivediv-stub aschild="false" data-orientation="horizontal" role="separator"></primitivediv-stub>"`;
+exports[`okuSeparator > should log an error when the orientation prop is invalid 1`] = `
+[MockFunction error] {
+  "calls": [
+    [
+      "Invalid prop \`orientation\` of value \`invalid-orientation\` supplied to \`OkuSeparator\`, expected one of:
+  - horizontal
+  - vertical
 
-exports[`okuSeparator > should render OkuSeparator correctly 2`] = `"<primitivediv-stub aschild="false" data-orientation="horizontal" role="separator"></primitivediv-stub>"`;
+Defaulting to \`horizontal\`.",
+    ],
+  ],
+  "results": [
+    {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`okuSeparator > should render OkuSeparator correctly 1`] = `"<oku-primitive-stub is="div" aschild="false" data-orientation="horizontal" role="separator"></oku-primitive-stub>"`;
+
+exports[`okuSeparator > should render OkuSeparator correctly 2`] = `"<oku-primitive-stub is="div" aschild="false" data-orientation="horizontal" role="separator"></oku-primitive-stub>"`;
 
 exports[`okuSeparator Stories > styled > should render correctly 1`] = `
 "<h1>Horizontal</h1>
 <p>The following separator is horizontal and has semantic meaning.</p>
-<oku-separator-stub orientation="horizontal" decorative="false" aschild="false" class="separator"></oku-separator-stub>
+<oku-separator-stub orientation="horizontal" decorative="false" is="div" aschild="false" class="separator"></oku-separator-stub>
 <p> The following separator is horizontal and is purely decorative. Assistive technology will ignore this element. </p>
-<oku-separator-stub orientation="horizontal" decorative="true" aschild="false" class="separator"></oku-separator-stub>
+<oku-separator-stub orientation="horizontal" decorative="true" is="div" aschild="false" class="separator"></oku-separator-stub>
 <h1>Vertical</h1>
 <div style="display: flex; align-items: center;">
   <p>The following separator is vertical and has semantic meaning.</p>
-  <oku-separator-stub orientation="vertical" decorative="false" aschild="false" class="separator"></oku-separator-stub>
+  <oku-separator-stub orientation="vertical" decorative="false" is="div" aschild="false" class="separator"></oku-separator-stub>
   <p> The following separator is vertical and is purely decorative. Assistive technology will ignore this element. </p>
-  <oku-separator-stub orientation="vertical" decorative="true" aschild="false" class="separator"></oku-separator-stub>
+  <oku-separator-stub orientation="vertical" decorative="true" is="div" aschild="false" class="separator"></oku-separator-stub>
 </div>"
 `;

packages/vue/src/separator/tests/separator.test.ts

@@ -44,21 +44,15 @@ describe('okuSeparator', () => {
   })
 
   it('should log an error when the orientation prop is invalid', () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => { })
+    const spy = vi.spyOn(console, 'error').mockImplementation(vi.fn() as any)
 
     wrapper = shallowMount(OkuSeparator, {
       props: {
         orientation: 'invalid-orientation' as any,
       },
     })
 
-    expect(spy).toHaveBeenCalledWith(
-      'Invalid prop `orientation` of value `invalid-orientation` supplied to `OkuSeparator`, expected one of:\n'
-      + '  - horizontal\n'
-      + '  - vertical\n'
-      + '\n'
-      + 'Defaulting to `horizontal`.',
-    )
+    expect(spy).toMatchSnapshot()
   })
 
   describe('given a horizontal Separator', () => {