refactor(progress): ts to sfc

packages/vue/src/progress/Progress.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@oku-ui/primitive'
+import { Primitive } from '@oku-ui/primitive'
+import type { Scope } from '@oku-ui/provide'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { useComponentRef, useVModel } from '@oku-ui/use-composable'
+import {
+  defaultGetValueLabel,
+  getInvalidMaxError,
+  getInvalidValueError,
+  getProgressState,
+  isNumber,
+  isValidMaxNumber,
+  isValidValueNumber,
+  useProgressProvide,
+} from './utils'
+
+const DEFAULT_MAX = 100
+
+export type ProgressElement = HTMLDivElement
+
+export interface ProgressProps extends PrimitiveProps {
+  scopeOkuProgress?: Scope
+  value?: number | null | undefined
+  max?: number
+  getValueLabel?(value: number, max: number): string
+  scopeProgress?: Scope
+  valueChange?(value: number | null | undefined): void
+}
+
+export type ProgressEmits = {
+  'update:value': [value: number | null | undefined]
+  'valueChange': [value: number | null | undefined]
+}
+
+</script>
+
+<script setup lang="ts">
+
+defineOptions({
+  name: 'OkuProgress',
+})
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  value: undefined,
+  max: DEFAULT_MAX,
+  getValueLabel: defaultGetValueLabel,
+})
+const emits = defineEmits<ProgressEmits>()
+
+const { componentRef, currentElement } = useComponentRef<HTMLButtonElement | null>()
+
+const value = useVModel(props, 'value', emits, {
+  passive: (props.value === undefined) as false,
+  shouldEmit(v: any) {
+    emits('valueChange', v)
+    return true
+  },
+}) as Ref<number | null | undefined>
+
+// propstype check
+if (props.max && !isValidMaxNumber(props.max))
+  console.error(getInvalidMaxError(props.max))
+
+if (props.value != null && !isValidValueNumber(props.value, props.max))
+  console.error(getInvalidValueError(props.value))
+
+const maxProp = computed(() =>
+  isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX,
+)
+
+const valueProp = computed(() =>
+  isValidValueNumber(props.value, maxProp.value) ? props.value : null,
+)
+
+const valueLabel = computed(() =>
+  isNumber(valueProp.value)
+    ? props.getValueLabel(valueProp.value, maxProp.value)
+    : undefined,
+)
+
+useProgressProvide({
+  scope: props.scopeOkuProgress,
+  value,
+  max: maxProp,
+})
+
+defineExpose({
+  $el: currentElement,
+})
+</script>
+
+<template>
+  <Primitive
+    :is="props.is"
+    ref="componentRef"
+    :as-child="props.asChild"
+    :aria-valuemax="props.max"
+    :aria-valuemin="0"
+    :aria-valuenow="isNumber(props.value) ? props.value : undefined"
+    :aria-valuetext="valueLabel"
+    role="progressbar"
+    :data-state="getProgressState(maxProp, props.value)"
+    :data-value="props.value ?? undefined"
+    :data-max="maxProp"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/vue/src/progress/ProgressIndicator.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { Primitive } from '@oku-ui/primitive'
+import type { PrimitiveProps } from '@oku-ui/primitive'
+import type { Scope } from '@oku-ui/provide'
+
+export interface ProgressIndicatorProps extends PrimitiveProps {
+  scopeOkuProgress?: Scope
+}
+</script>
+
+<script setup lang="ts">
+import { useComponentRef } from '@oku-ui/use-composable'
+import { getProgressState, useProgressInject } from './utils'
+
+defineOptions({
+  name: 'OkuProgressIndicator',
+})
+
+const props = defineProps<ProgressIndicatorProps>()
+
+const { componentRef } = useComponentRef<HTMLButtonElement | null>()
+const inject = useProgressInject('OkuProgress', props.scopeOkuProgress)
+
+defineExpose({
+  $el: componentRef,
+})
+</script>
+
+<template>
+  <Primitive
+    :is="props.is"
+    ref="componentRef"
+    :as-child="props.asChild"
+    :data-state="getProgressState(
+      inject.max.value,
+      inject.value.value,
+    )"
+    :data-value="inject.value.value ?? undefined"
+    :data-max="inject.max.value"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/vue/src/progress/index.ts

@@ -1,20 +1,14 @@
 export {
-  OkuProgress,
-  createProgressScope,
-  progressProps,
-} from './progress'
-
-export type {
-  ProgressProps,
-  ProgressElement,
-} from './progress'
+  default as OkuProgress,
+  type ProgressProps,
+  type ProgressEmits,
+} from './Progress.vue'
 
 export {
-  OkuProgressIndicator,
-  progressIndicatorProps,
-} from './progressIndicator'
+  default as OkuProgressIndicator,
+  type ProgressIndicatorProps,
+} from './ProgressIndicator.vue'
 
-export type {
-  ProgressIndicatorElement,
-  ProgressIndicatorProps,
-} from './progressIndicator'
+export {
+  createProgressScope,
+} from './utils'