From 6eb5ebb3e35b7d70571ea6d829fa54917c54da06 Mon Sep 17 00:00:00 2001 From: Faithful Ojebiyi Date: Sat, 13 May 2023 21:28:27 +0100 Subject: [PATCH 1/6] feat: (Oku toggle) --- package.json | 1 + packages/components/toggle/README.md | 10 ++ packages/components/toggle/build.config.ts | 12 ++ packages/components/toggle/package.json | 43 ++++++++ packages/components/toggle/src/index.ts | 9 ++ .../toggle/src/stories/ToggleDemo.vue | 93 ++++++++++++++++ .../toggle/src/stories/toggle.stories.ts | 58 ++++++++++ packages/components/toggle/src/toggle.test.ts | 38 +++++++ packages/components/toggle/src/toggle.ts | 103 ++++++++++++++++++ packages/components/toggle/tsconfig.json | 10 ++ packages/components/toggle/tsup.config.ts | 22 ++++ playground/vue3/src/pages/index.vue | 4 + playground/vue3/src/pages/toggle.vue | 6 + pnpm-lock.yaml | 25 ++++- ....timestamp-1683986662558-49bfcdbff0a5a.mjs | 30 +++++ 15 files changed, 463 insertions(+), 1 deletion(-) create mode 100644 packages/components/toggle/README.md create mode 100644 packages/components/toggle/build.config.ts create mode 100644 packages/components/toggle/package.json create mode 100644 packages/components/toggle/src/index.ts create mode 100644 packages/components/toggle/src/stories/ToggleDemo.vue create mode 100644 packages/components/toggle/src/stories/toggle.stories.ts create mode 100644 packages/components/toggle/src/toggle.test.ts create mode 100644 packages/components/toggle/src/toggle.ts create mode 100644 packages/components/toggle/tsconfig.json create mode 100644 packages/components/toggle/tsup.config.ts create mode 100644 playground/vue3/src/pages/toggle.vue create mode 100644 vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs diff --git a/package.json b/package.json index 33cfc234e..a2efc5e31 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@oku-ui/label": "workspace:^", "@oku-ui/progress": "workspace:^", "@oku-ui/separator": "workspace:^", + "@oku-ui/toggle": "workspace:^", "@storybook/addon-essentials": "^7.0.10", "@storybook/addon-interactions": "^7.0.10", "@storybook/addon-links": "^7.0.10", diff --git a/packages/components/toggle/README.md b/packages/components/toggle/README.md new file mode 100644 index 000000000..a6eaf14f4 --- /dev/null +++ b/packages/components/toggle/README.md @@ -0,0 +1,10 @@ +# `@oku-ui/toggle` + +## Installation + +```sh +$ pnpm add @oku-ui/toggle +``` + +## Usage +... \ No newline at end of file diff --git a/packages/components/toggle/build.config.ts b/packages/components/toggle/build.config.ts new file mode 100644 index 000000000..b972b9a78 --- /dev/null +++ b/packages/components/toggle/build.config.ts @@ -0,0 +1,12 @@ +import { defineBuildConfig } from 'unbuild' + +export default defineBuildConfig({ + entries: [ + { + builder: 'mkdist', + input: './src/', + pattern: ['**/!(*.test|*.stories).ts'], + }, + ], + declaration: true, +}) diff --git a/packages/components/toggle/package.json b/packages/components/toggle/package.json new file mode 100644 index 000000000..fc4a6fe4f --- /dev/null +++ b/packages/components/toggle/package.json @@ -0,0 +1,43 @@ +{ + "name": "@oku-ui/toggle", + "type": "module", + "version": "0.0.0", + "license": "MIT", + "source": "src/index.ts", + "funding": "https://github.com/sponsors/productdevbook", + "homepage": "https://oku-ui.com/primitives", + "repository": { + "type": "git", + "url": "git+https://github.com/oku-ui/primitives.git", + "directory": "packages/components/toggle" + }, + "bugs": { + "url": "https://github.com/oku-ui/primitives/issues" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs" + } + }, + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsup", + "dev": "tsup --watch" + }, + "peerDependencies": { + "vue": "^3.3.1" + }, + "dependencies": { + "@oku-ui/primitive": "workspace:^", + "@oku-ui/provide": "workspace:^", + "@oku-ui/utils": "workspace:^" + }, + "devDependencies": { + "tsconfig": "workspace:^" + } +} diff --git a/packages/components/toggle/src/index.ts b/packages/components/toggle/src/index.ts new file mode 100644 index 000000000..04b1b260b --- /dev/null +++ b/packages/components/toggle/src/index.ts @@ -0,0 +1,9 @@ +export { + OkuToggle, +} from './toggle' + +export type { + ToggleProps, + ToggleElement, + ToggleRef, +} from './toggle' diff --git a/packages/components/toggle/src/stories/ToggleDemo.vue b/packages/components/toggle/src/stories/ToggleDemo.vue new file mode 100644 index 000000000..8dbdb8f76 --- /dev/null +++ b/packages/components/toggle/src/stories/ToggleDemo.vue @@ -0,0 +1,93 @@ + + + diff --git a/packages/components/toggle/src/stories/toggle.stories.ts b/packages/components/toggle/src/stories/toggle.stories.ts new file mode 100644 index 000000000..3920a175d --- /dev/null +++ b/packages/components/toggle/src/stories/toggle.stories.ts @@ -0,0 +1,58 @@ +import type { Meta, StoryObj } from '@storybook/vue3' + +import type { IToggleProps } from './ToggleDemo.vue' + +import OkuToggleComponent from './ToggleDemo.vue' + +interface StoryProps extends IToggleProps { + +} + +const meta = { + title: 'Components/Toggle', + args: { + template: '#1', + }, + component: OkuToggleComponent, + tags: ['autodocs'], +} satisfies Meta & { + args: StoryProps +} + +export default meta +type Story = StoryObj & { + args: StoryProps +} + +export const Styled: Story = { + args: { + template: '#1', + allshow: true, + }, + + render: (args: any) => ({ + components: { OkuToggleComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} + +export const Template1: Story = { + args: { + template: '#2', + }, + + render: (args: any) => ({ + components: { OkuToggleComponent }, + setup() { + return { args } + }, + template: ` + + `, + }), +} diff --git a/packages/components/toggle/src/toggle.test.ts b/packages/components/toggle/src/toggle.test.ts new file mode 100644 index 000000000..90c9f32eb --- /dev/null +++ b/packages/components/toggle/src/toggle.test.ts @@ -0,0 +1,38 @@ +import { describe, expect, it } from 'vitest' +import { mount, shallowMount } from '@vue/test-utils' +import { OkuToggle } from './toggle' + +describe('OkuToggle', () => { + const wrapper = mount(OkuToggle) + + it('renders correctly', async () => { + expect(wrapper.html()).toBe('') + }) + + it('Active state', async () => { + const wrapper = shallowMount(OkuToggle, { + propsData: { + defaultPressed: true, + }, + }) + expect(wrapper.attributes('aria-pressed')).toBe('true') + }) + + it('Inactive state', async () => { + const wrapper = shallowMount(OkuToggle, { + propsData: { + defaultPressed: false, + }, + }) + expect(wrapper.attributes('aria-pressed')).toBe('false') + }) + + it('Toggle state', async () => { + const wrapper = mount(OkuToggle, { + }) + await wrapper.trigger('click') + expect(wrapper.attributes('aria-pressed')).toBe('true') + await wrapper.trigger('click') + expect(wrapper.attributes('aria-pressed')).toBe('false') + }) +}) diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts new file mode 100644 index 000000000..0d7aacbc1 --- /dev/null +++ b/packages/components/toggle/src/toggle.ts @@ -0,0 +1,103 @@ +import type { PropType } from 'vue' +import { computed, defineComponent, h, ref, toRefs } from 'vue' +import { Primitive } from '@oku-ui/primitive' +import type { ElementType, MergeProps, PrimitiveProps, RefElement } from '@oku-ui/primitive' +import { composeEventHandlers } from '@oku-ui/utils' + +const TOGGLE_NAME = 'Toggle' + +type ToggleElement = ElementType<'button'> + +interface ToggleProps extends PrimitiveProps { + /** + * The controlled state of the toggle. + */ + pressed?: boolean + /** + * The state of the toggle when initially rendered. Use `defaultPressed` + * if you do not need to control the state of the toggle. + * @defaultValue false + */ + defaultPressed?: boolean + /** + * The callback that fires when the state of the toggle changes. + */ + onPressedChange?: (pressed: boolean) => void +} + +const Toggle = defineComponent({ + name: TOGGLE_NAME, + inheritAttrs: false, + props: { + pressed: { + type: Boolean, + default: undefined, + }, + defaultPressed: { + type: Boolean, + default: false, + }, + onPressedChange: Function as PropType<(pressed: boolean) => void>, + }, + + setup(props, { attrs, expose, slots }) { + const { onPressedChange } = props + const { pressed: pressedProp, defaultPressed } = toRefs(props) + const innerRef = ref() + const _innerRef = computed(() => innerRef.value?.$el) + + expose({ + innerRef: _innerRef, + }) + + const isControlled = computed(() => pressedProp.value !== undefined) + const uncontrolledValue = ref(defaultPressed.value) + const pressed = computed(() => (isControlled.value ? pressedProp.value : uncontrolledValue.value)) + + function setPressed(value: boolean) { + if (isControlled.value) + onPressedChange?.(value) + + else + uncontrolledValue.value = value + } + + const { disabled, ...toggleProps } = attrs as ToggleElement + + const originalReturn = () => h( + Primitive.button, { + 'type': 'button', + 'aria-pressed': pressed.value, + 'data-state': pressed.value ? 'on' : 'off', + 'data-disabled': disabled ? '' : undefined, + ...toggleProps, + 'ref': innerRef, + 'onClick': composeEventHandlers(toggleProps.onClick, () => { + if (!disabled) + setPressed(!pressed.value) + }), + }, + slots.default && slots.default?.(), + ) + + return originalReturn as unknown as { + innerRef: ToggleElement + } + }, +}) + +type _ToggleProps = MergeProps + +type ToggleRef = RefElement + +const OkuToggle = Toggle as typeof Toggle & (new () => { $props: _ToggleProps }) + +export { + OkuToggle, +} + +export type { + ToggleProps, + ToggleElement, + ToggleRef, +} diff --git a/packages/components/toggle/tsconfig.json b/packages/components/toggle/tsconfig.json new file mode 100644 index 000000000..132b910c2 --- /dev/null +++ b/packages/components/toggle/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "tsconfig/node16.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist" + }, + "include": [ + "src" + ] +} \ No newline at end of file diff --git a/packages/components/toggle/tsup.config.ts b/packages/components/toggle/tsup.config.ts new file mode 100644 index 000000000..a2f7a0d8b --- /dev/null +++ b/packages/components/toggle/tsup.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'tsup' +import pkg from './package.json' + +const external = [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), +] + +export default defineConfig((options) => { + return [ + { + ...options, + entryPoints: ['src/index.ts'], + external, + dts: true, + clean: true, + target: 'node16', + format: ['esm'], + outExtension: () => ({ js: '.mjs' }), + }, + ] +}) diff --git a/playground/vue3/src/pages/index.vue b/playground/vue3/src/pages/index.vue index 764eff5e5..b98cc19f9 100644 --- a/playground/vue3/src/pages/index.vue +++ b/playground/vue3/src/pages/index.vue @@ -28,6 +28,10 @@ const pages: Page[] = [ name: 'OkuProgress', path: '/progress', }, + { + name: 'OkuToggle', + path: '/toggle', + }, ] diff --git a/playground/vue3/src/pages/toggle.vue b/playground/vue3/src/pages/toggle.vue new file mode 100644 index 000000000..1da59ca9b --- /dev/null +++ b/playground/vue3/src/pages/toggle.vue @@ -0,0 +1,6 @@ + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd2f38af2..2af1c1f31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,6 +25,9 @@ importers: '@oku-ui/separator': specifier: workspace:^ version: link:packages/components/separator + '@oku-ui/toggle': + specifier: workspace:^ + version: link:packages/components/toggle '@storybook/addon-essentials': specifier: ^7.0.10 version: 7.0.10(react-dom@18.2.0)(react@18.2.0) @@ -230,6 +233,25 @@ importers: specifier: workspace:^ version: link:../../tsconfig + packages/components/toggle: + dependencies: + '@oku-ui/primitive': + specifier: workspace:^ + version: link:../../core/primitive + '@oku-ui/provide': + specifier: workspace:^ + version: link:../../core/provide + '@oku-ui/utils': + specifier: workspace:^ + version: link:../../core/utils + vue: + specifier: ^3.3.1 + version: 3.3.1 + devDependencies: + tsconfig: + specifier: workspace:^ + version: link:../../tsconfig + packages/core/primitive: dependencies: vue: @@ -786,6 +808,7 @@ packages: hasBin: true dependencies: '@babel/types': 7.21.5 + dev: true /@babel/parser@7.21.8: resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==} @@ -5000,7 +5023,7 @@ packages: /@vue/compiler-core@3.3.1: resolution: {integrity: sha512-5le1qYSBgLWg2jdLrbydlhnPJkkzMw46UrRUvTnOKlfg6pThtm9ohhqBhNPHbr0RcM1MCbK5WZe/3Ghz0SZjpQ==} dependencies: - '@babel/parser': 7.21.5 + '@babel/parser': 7.21.8 '@vue/shared': 3.3.1 estree-walker: 2.0.2 source-map-js: 1.0.2 diff --git a/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs b/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs new file mode 100644 index 000000000..bbb801d68 --- /dev/null +++ b/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs @@ -0,0 +1,30 @@ +// vitest.config.ts +import { defineConfig } from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/vitest@0.30.1_jsdom@21.1.1/node_modules/vitest/dist/config.js"; +import Vue from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/@vitejs+plugin-vue@4.2.1_vite@4.3.1_vue@3.3.0-beta.5/node_modules/@vitejs/plugin-vue/dist/index.mjs"; +import VueMacros from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/unplugin-vue-macros@2.1.1_esbuild@0.17.18_rollup@3.21.0_vite@4.3.1_vue@3.3.0-beta.5/node_modules/unplugin-vue-macros/dist/vite.mjs"; +var vitest_config_default = defineConfig({ + plugins: [ + VueMacros({ + plugins: { + vue: Vue() + } + }) + ], + test: { + environment: "jsdom", + coverage: { + provider: "c8", + // or 'c8', + reporter: ["text", "json-summary", "json", "html"] + }, + exclude: [ + "**/node_modules/**", + "**/dist/**" + ], + include: ["./**/*.test.ts"] + } +}); +export { + vitest_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZXN0LmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9mYWl0aGZ1bG9qZWJpeWkvQXBwcy9PcGVuc291cmNlL3ByaW1pdGl2ZXNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9mYWl0aGZ1bG9qZWJpeWkvQXBwcy9PcGVuc291cmNlL3ByaW1pdGl2ZXMvdml0ZXN0LmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZmFpdGhmdWxvamViaXlpL0FwcHMvT3BlbnNvdXJjZS9wcmltaXRpdmVzL3ZpdGVzdC5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJ1xuaW1wb3J0IFZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXG5pbXBvcnQgVnVlTWFjcm9zIGZyb20gJ3VucGx1Z2luLXZ1ZS1tYWNyb3Mvdml0ZSdcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIFZ1ZU1hY3Jvcyh7XG4gICAgICBwbHVnaW5zOiB7XG4gICAgICAgIHZ1ZTogVnVlKCksXG4gICAgICB9LFxuICAgIH0pLFxuICBdLFxuICB0ZXN0OiB7XG4gICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgY292ZXJhZ2U6IHtcbiAgICAgIHByb3ZpZGVyOiAnYzgnLCAvLyBvciAnYzgnLFxuICAgICAgcmVwb3J0ZXI6IFsndGV4dCcsICdqc29uLXN1bW1hcnknLCAnanNvbicsICdodG1sJ10sXG4gICAgfSxcbiAgICBleGNsdWRlOiBbXG4gICAgICAnKiovbm9kZV9tb2R1bGVzLyoqJyxcbiAgICAgICcqKi9kaXN0LyoqJyxcbiAgICBdLFxuICAgIGluY2x1ZGU6IFsnLi8qKi8qLnRlc3QudHMnXSxcbiAgfSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlVLFNBQVMsb0JBQW9CO0FBQ3RXLE9BQU8sU0FBUztBQUNoQixPQUFPLGVBQWU7QUFFdEIsSUFBTyx3QkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsVUFBVTtBQUFBLE1BQ1IsU0FBUztBQUFBLFFBQ1AsS0FBSyxJQUFJO0FBQUEsTUFDWDtBQUFBLElBQ0YsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLE1BQU07QUFBQSxJQUNKLGFBQWE7QUFBQSxJQUNiLFVBQVU7QUFBQSxNQUNSLFVBQVU7QUFBQTtBQUFBLE1BQ1YsVUFBVSxDQUFDLFFBQVEsZ0JBQWdCLFFBQVEsTUFBTTtBQUFBLElBQ25EO0FBQUEsSUFDQSxTQUFTO0FBQUEsTUFDUDtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTLENBQUMsZ0JBQWdCO0FBQUEsRUFDNUI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo= From a40af5f53e2ab541023e8666d0151b9e2770e9b1 Mon Sep 17 00:00:00 2001 From: Faithful Ojebiyi Date: Sat, 13 May 2023 21:49:53 +0100 Subject: [PATCH 2/6] chore: (cleanups) --- packages/components/toggle/src/toggle.test.ts | 6 +++--- packages/components/toggle/src/toggle.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/toggle/src/toggle.test.ts b/packages/components/toggle/src/toggle.test.ts index 90c9f32eb..6f340c0d5 100644 --- a/packages/components/toggle/src/toggle.test.ts +++ b/packages/components/toggle/src/toggle.test.ts @@ -5,11 +5,11 @@ import { OkuToggle } from './toggle' describe('OkuToggle', () => { const wrapper = mount(OkuToggle) - it('renders correctly', async () => { + it('renders correctly', () => { expect(wrapper.html()).toBe('') }) - it('Active state', async () => { + it('Active state', () => { const wrapper = shallowMount(OkuToggle, { propsData: { defaultPressed: true, @@ -18,7 +18,7 @@ describe('OkuToggle', () => { expect(wrapper.attributes('aria-pressed')).toBe('true') }) - it('Inactive state', async () => { + it('Inactive state', () => { const wrapper = shallowMount(OkuToggle, { propsData: { defaultPressed: false, diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index 0d7aacbc1..918a45010 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/packages/components/toggle/src/toggle.ts @@ -1,4 +1,4 @@ -import type { PropType } from 'vue' +import type { ComponentPublicInstance, PropType } from 'vue' import { computed, defineComponent, h, ref, toRefs } from 'vue' import { Primitive } from '@oku-ui/primitive' import type { ElementType, MergeProps, PrimitiveProps, RefElement } from '@oku-ui/primitive' @@ -43,11 +43,11 @@ const Toggle = defineComponent({ setup(props, { attrs, expose, slots }) { const { onPressedChange } = props const { pressed: pressedProp, defaultPressed } = toRefs(props) - const innerRef = ref() - const _innerRef = computed(() => innerRef.value?.$el) + const innerRef = ref() + computed(() => innerRef.value?.$el) expose({ - innerRef: _innerRef, + innerRef: computed(() => innerRef.value?.$el) }) const isControlled = computed(() => pressedProp.value !== undefined) From 5f0fd7f5dcb6be8f780135d4c1c0441686057ea9 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 17 May 2023 16:45:48 +0000 Subject: [PATCH 3/6] [autofix.ci] apply automated fixes --- packages/components/toggle/src/toggle.ts | 6 +++--- packages/components/toggle/tsconfig.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index 918a45010..43751d663 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/packages/components/toggle/src/toggle.ts @@ -44,10 +44,10 @@ const Toggle = defineComponent({ const { onPressedChange } = props const { pressed: pressedProp, defaultPressed } = toRefs(props) const innerRef = ref() - computed(() => innerRef.value?.$el) + computed(() => innerRef.value?.$el) expose({ - innerRef: computed(() => innerRef.value?.$el) + innerRef: computed(() => innerRef.value?.$el), }) const isControlled = computed(() => pressedProp.value !== undefined) @@ -78,7 +78,7 @@ const Toggle = defineComponent({ }), }, slots.default && slots.default?.(), - ) + ) return originalReturn as unknown as { innerRef: ToggleElement diff --git a/packages/components/toggle/tsconfig.json b/packages/components/toggle/tsconfig.json index 132b910c2..b8dfa9041 100644 --- a/packages/components/toggle/tsconfig.json +++ b/packages/components/toggle/tsconfig.json @@ -7,4 +7,4 @@ "include": [ "src" ] -} \ No newline at end of file +} From f5432d0c21dffd28eb4110d7da161097601db652 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 17 May 2023 20:01:33 +0300 Subject: [PATCH 4/6] feat: use-composable add --- packages/components/toggle/package.json | 1 + packages/components/toggle/src/toggle.ts | 36 ++++++++++-------------- pnpm-lock.yaml | 3 ++ 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/components/toggle/package.json b/packages/components/toggle/package.json index fc4a6fe4f..f2e34f24c 100644 --- a/packages/components/toggle/package.json +++ b/packages/components/toggle/package.json @@ -35,6 +35,7 @@ "dependencies": { "@oku-ui/primitive": "workspace:^", "@oku-ui/provide": "workspace:^", + "@oku-ui/use-composable": "workspace:^", "@oku-ui/utils": "workspace:^" }, "devDependencies": { diff --git a/packages/components/toggle/src/toggle.ts b/packages/components/toggle/src/toggle.ts index 43751d663..d68e3f67f 100644 --- a/packages/components/toggle/src/toggle.ts +++ b/packages/components/toggle/src/toggle.ts @@ -1,8 +1,9 @@ -import type { ComponentPublicInstance, PropType } from 'vue' -import { computed, defineComponent, h, ref, toRefs } from 'vue' +import type { PropType, Ref } from 'vue' +import { defineComponent, h, toRefs } from 'vue' import { Primitive } from '@oku-ui/primitive' import type { ElementType, MergeProps, PrimitiveProps, RefElement } from '@oku-ui/primitive' import { composeEventHandlers } from '@oku-ui/utils' +import { useControllableRef, useRef } from '@oku-ui/use-composable' const TOGGLE_NAME = 'Toggle' @@ -43,45 +44,38 @@ const Toggle = defineComponent({ setup(props, { attrs, expose, slots }) { const { onPressedChange } = props const { pressed: pressedProp, defaultPressed } = toRefs(props) - const innerRef = ref() - computed(() => innerRef.value?.$el) + const { _ref: toogleRef, refEl: toogleRefEl } = useRef() expose({ - innerRef: computed(() => innerRef.value?.$el), + innerRef: toogleRefEl, }) - const isControlled = computed(() => pressedProp.value !== undefined) - const uncontrolledValue = ref(defaultPressed.value) - const pressed = computed(() => (isControlled.value ? pressedProp.value : uncontrolledValue.value)) - - function setPressed(value: boolean) { - if (isControlled.value) - onPressedChange?.(value) - - else - uncontrolledValue.value = value - } + const { state } = useControllableRef({ + prop: pressedProp.value, + onChange: onPressedChange, + defaultProp: defaultPressed.value, + }) const { disabled, ...toggleProps } = attrs as ToggleElement const originalReturn = () => h( Primitive.button, { 'type': 'button', - 'aria-pressed': pressed.value, - 'data-state': pressed.value ? 'on' : 'off', + 'aria-pressed': state.value, + 'data-state': state.value ? 'on' : 'off', 'data-disabled': disabled ? '' : undefined, ...toggleProps, - 'ref': innerRef, + 'ref': toogleRef, 'onClick': composeEventHandlers(toggleProps.onClick, () => { if (!disabled) - setPressed(!pressed.value) + state.value = !state.value }), }, slots.default && slots.default?.(), ) return originalReturn as unknown as { - innerRef: ToggleElement + innerRef: Ref } }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58e84ae9a..40cb0feef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -241,6 +241,9 @@ importers: '@oku-ui/provide': specifier: workspace:^ version: link:../../core/provide + '@oku-ui/use-composable': + specifier: workspace:^ + version: link:../../core/use-composable '@oku-ui/utils': specifier: workspace:^ version: link:../../core/utils From 86199fe9f3067d0ea8fec948de9c1a150f877853 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 17 May 2023 20:06:00 +0300 Subject: [PATCH 5/6] nuxt playground in add component --- playground/nuxt3/pages/index.vue | 4 ++++ playground/nuxt3/pages/toggle.vue | 6 ++++++ 2 files changed, 10 insertions(+) create mode 100644 playground/nuxt3/pages/toggle.vue diff --git a/playground/nuxt3/pages/index.vue b/playground/nuxt3/pages/index.vue index c89f21d9c..7b1428853 100644 --- a/playground/nuxt3/pages/index.vue +++ b/playground/nuxt3/pages/index.vue @@ -28,6 +28,10 @@ const pages: Page[] = [ name: 'OkuCheckbox', path: '/checkbox', }, + { + name: 'OkuToggle', + path: '/toggle', + }, ] diff --git a/playground/nuxt3/pages/toggle.vue b/playground/nuxt3/pages/toggle.vue new file mode 100644 index 000000000..1da59ca9b --- /dev/null +++ b/playground/nuxt3/pages/toggle.vue @@ -0,0 +1,6 @@ + + + From 06a55be326711d74e2eec38418c61edae10314f5 Mon Sep 17 00:00:00 2001 From: productdevbook Date: Wed, 17 May 2023 20:09:53 +0300 Subject: [PATCH 6/6] readme update --- README.md | 2 +- ....timestamp-1683986662558-49bfcdbff0a5a.mjs | 30 ------------------- 2 files changed, 1 insertion(+), 31 deletions(-) delete mode 100644 vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs diff --git a/README.md b/README.md index 0a2d3cb88..bebc750ce 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ Enter the component you want most in the components, leave the emojis and follow - [ ] [Switch](https://github.com/oku-ui/primitives/issues/22) - [ ] [Tabs](https://github.com/oku-ui/primitives/issues/23) - [ ] [Toast](https://github.com/oku-ui/primitives/issues/24) -- [ ] [Toggle](https://github.com/oku-ui/primitives/issues/25) +- [x] [Toggle](https://github.com/oku-ui/primitives/issues/25) - [ ] [Toggle Group](https://github.com/oku-ui/primitives/issues/26) - [ ] [Toolbar](https://github.com/oku-ui/primitives/issues/27) - [ ] [Tooltip](https://github.com/oku-ui/primitives/issues/28) diff --git a/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs b/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs deleted file mode 100644 index bbb801d68..000000000 --- a/vitest.config.ts.timestamp-1683986662558-49bfcdbff0a5a.mjs +++ /dev/null @@ -1,30 +0,0 @@ -// vitest.config.ts -import { defineConfig } from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/vitest@0.30.1_jsdom@21.1.1/node_modules/vitest/dist/config.js"; -import Vue from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/@vitejs+plugin-vue@4.2.1_vite@4.3.1_vue@3.3.0-beta.5/node_modules/@vitejs/plugin-vue/dist/index.mjs"; -import VueMacros from "file:///Users/faithfulojebiyi/Apps/Opensource/primitives/node_modules/.pnpm/unplugin-vue-macros@2.1.1_esbuild@0.17.18_rollup@3.21.0_vite@4.3.1_vue@3.3.0-beta.5/node_modules/unplugin-vue-macros/dist/vite.mjs"; -var vitest_config_default = defineConfig({ - plugins: [ - VueMacros({ - plugins: { - vue: Vue() - } - }) - ], - test: { - environment: "jsdom", - coverage: { - provider: "c8", - // or 'c8', - reporter: ["text", "json-summary", "json", "html"] - }, - exclude: [ - "**/node_modules/**", - "**/dist/**" - ], - include: ["./**/*.test.ts"] - } -}); -export { - vitest_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZXN0LmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9mYWl0aGZ1bG9qZWJpeWkvQXBwcy9PcGVuc291cmNlL3ByaW1pdGl2ZXNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9mYWl0aGZ1bG9qZWJpeWkvQXBwcy9PcGVuc291cmNlL3ByaW1pdGl2ZXMvdml0ZXN0LmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZmFpdGhmdWxvamViaXlpL0FwcHMvT3BlbnNvdXJjZS9wcmltaXRpdmVzL3ZpdGVzdC5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJ1xuaW1wb3J0IFZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXG5pbXBvcnQgVnVlTWFjcm9zIGZyb20gJ3VucGx1Z2luLXZ1ZS1tYWNyb3Mvdml0ZSdcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIFZ1ZU1hY3Jvcyh7XG4gICAgICBwbHVnaW5zOiB7XG4gICAgICAgIHZ1ZTogVnVlKCksXG4gICAgICB9LFxuICAgIH0pLFxuICBdLFxuICB0ZXN0OiB7XG4gICAgZW52aXJvbm1lbnQ6ICdqc2RvbScsXG4gICAgY292ZXJhZ2U6IHtcbiAgICAgIHByb3ZpZGVyOiAnYzgnLCAvLyBvciAnYzgnLFxuICAgICAgcmVwb3J0ZXI6IFsndGV4dCcsICdqc29uLXN1bW1hcnknLCAnanNvbicsICdodG1sJ10sXG4gICAgfSxcbiAgICBleGNsdWRlOiBbXG4gICAgICAnKiovbm9kZV9tb2R1bGVzLyoqJyxcbiAgICAgICcqKi9kaXN0LyoqJyxcbiAgICBdLFxuICAgIGluY2x1ZGU6IFsnLi8qKi8qLnRlc3QudHMnXSxcbiAgfSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlVLFNBQVMsb0JBQW9CO0FBQ3RXLE9BQU8sU0FBUztBQUNoQixPQUFPLGVBQWU7QUFFdEIsSUFBTyx3QkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsVUFBVTtBQUFBLE1BQ1IsU0FBUztBQUFBLFFBQ1AsS0FBSyxJQUFJO0FBQUEsTUFDWDtBQUFBLElBQ0YsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLE1BQU07QUFBQSxJQUNKLGFBQWE7QUFBQSxJQUNiLFVBQVU7QUFBQSxNQUNSLFVBQVU7QUFBQTtBQUFBLE1BQ1YsVUFBVSxDQUFDLFFBQVEsZ0JBQWdCLFFBQVEsTUFBTTtBQUFBLElBQ25EO0FBQUEsSUFDQSxTQUFTO0FBQUEsTUFDUDtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTLENBQUMsZ0JBQWdCO0FBQUEsRUFDNUI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=