feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
79
skills/vueuse-functions/references/useChangeCase.md
Normal file
79
skills/vueuse-functions/references/useChangeCase.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
category: '@Integrations'
|
||||
---
|
||||
|
||||
# useChangeCase
|
||||
|
||||
Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case).
|
||||
|
||||
Subsitutes `useCamelCase`, `usePascalCase`, `useSnakeCase`, `useSentenceCase`, `useCapitalize`, etc.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i change-case@^5
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
|
||||
|
||||
// `changeCase` will be a computed
|
||||
const changeCase = useChangeCase('hello world', 'camelCase')
|
||||
changeCase.value // helloWorld
|
||||
changeCase.value = 'vue use'
|
||||
changeCase.value // vueUse
|
||||
// Supported methods
|
||||
// export {
|
||||
// camelCase,
|
||||
// capitalCase,
|
||||
// constantCase,
|
||||
// dotCase,
|
||||
// headerCase,
|
||||
// noCase,
|
||||
// paramCase,
|
||||
// pascalCase,
|
||||
// pathCase,
|
||||
// sentenceCase,
|
||||
// snakeCase,
|
||||
// } from 'change-case'
|
||||
```
|
||||
|
||||
or passing a `ref` to it, the returned `computed` will change along with the source ref's changes.
|
||||
|
||||
Can be passed into `options` for customization
|
||||
|
||||
```ts
|
||||
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const input = shallowRef('helloWorld')
|
||||
const changeCase = useChangeCase(input, 'camelCase', {
|
||||
delimiter: '-',
|
||||
})
|
||||
changeCase.value // hello-World
|
||||
input.value = 'vue use'
|
||||
changeCase.value // vue-Use
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
|
||||
type FilterKeys<T> = {
|
||||
[K in keyof T as K extends string ? K : never]: EndsWithCase<K>
|
||||
}
|
||||
type ChangeCaseKeys = FilterKeys<typeof changeCase>
|
||||
export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
|
||||
export declare function useChangeCase(
|
||||
input: MaybeRef<string>,
|
||||
type: MaybeRefOrGetter<ChangeCaseType>,
|
||||
options?: MaybeRefOrGetter<Options> | undefined,
|
||||
): WritableComputedRef<string>
|
||||
export declare function useChangeCase(
|
||||
input: MaybeRefOrGetter<string>,
|
||||
type: MaybeRefOrGetter<ChangeCaseType>,
|
||||
options?: MaybeRefOrGetter<Options> | undefined,
|
||||
): ComputedRef<string>
|
||||
```
|
||||
Reference in New Issue
Block a user