diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index fd2565b..c3bb9e6 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -6,6 +6,4 @@ jobs: runs-on: ubuntu-latest steps: - uses: yanhao98/composite-actions/setup-node-environment@main - - name: deploy - run: | - npx vue-tsc -b + - run: npx vue-tsc -b diff --git a/formkit.addAsteriskPlugin.ts b/formkit.addAsteriskPlugin.ts index 73463d3..63c1fa8 100644 --- a/formkit.addAsteriskPlugin.ts +++ b/formkit.addAsteriskPlugin.ts @@ -15,12 +15,13 @@ export function addAsteriskPlugin(node: FormKitNode) { // } console.debug(`legendOrLabel :>> `, legendOrLabel); console.groupEnd() + if (!node.props.definition) return; - if (node.props.definition?.schemaMemoKey) { + if (node.props.definition.schemaMemoKey) { node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`; }; - const schemaFn = node.props.definition!.schema!; + const schemaFn = node.props.definition.schema!; node.props.definition!.schema = (sectionsSchema = {}) => { sectionsSchema[legendOrLabel] = { children: ['$label', { diff --git a/formkit.config.ts b/formkit.config.ts index d8d00a1..7e84577 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -1,8 +1,8 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons' -import type { FormKitOptions } from '@formkit/core' +import type { FormKitNode, FormKitOptions } from '@formkit/core' import { createI18nPlugin, zh } from '@formkit/i18n' import { genesisIcons } from '@formkit/icons' -import { createLibraryPlugin, submit } from '@formkit/inputs' +import { createLibraryPlugin, submit, text } from '@formkit/inputs' import { createProPlugin, toggle } from '@formkit/pro' import * as defaultRules from '@formkit/rules' import { createThemePlugin } from '@formkit/themes' @@ -10,7 +10,7 @@ import { createValidationPlugin } from '@formkit/validation' import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue' import { addAsteriskPlugin } from './formkit.addAsteriskPlugin' // import { fkLibrary } from './formkit.config.fkLibrary' -import { rootClasses } from "./formkit.config.theme" +// import { rootClasses } from "./formkit.config.theme" import HeadlessuiToggle from "./src/headlessui-switch.vue" import { register as decodeErrors } from '@formkit/dev' @@ -21,14 +21,20 @@ const validation = createValidationPlugin(defaultRules) const theme = undefined; const icons = genesisIcons; -const apiKey = 'fk-6cdd5192223' +// const apiKey = 'fk-6cdd5192223' export default { plugins: [ - createProPlugin(apiKey, { toggle }), + // createProPlugin(apiKey, { toggle }), // createLibraryPlugin(fkLibrary), createLibraryPlugin({ + text, submit, }), + // createLibraryPlugin( + // { + // 'headlessuiSwitch': createInput(HeadlessuiToggle), + // } + // ), createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */), bindings, createI18nPlugin({ zh }), @@ -56,6 +62,10 @@ export default { ) ], config: { + // rootClasses: false, // rootClasses, + // rootClasses: (sectionName: string, node: FormKitNode) => { + // console.debug(`sectionName :>> `, sectionName); + // } }, } satisfies FormKitOptions \ No newline at end of file diff --git a/src/__fk-inputs__/components/input-text.vue b/src/__fk-inputs__/components/input-text.vue new file mode 100644 index 0000000..14ba2d1 --- /dev/null +++ b/src/__fk-inputs__/components/input-text.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/inputs/form.ts b/src/__fk-inputs__/inputs/inputs/form.ts similarity index 91% rename from src/inputs/form.ts rename to src/__fk-inputs__/inputs/inputs/form.ts index 57f0986..33e341c 100644 --- a/src/inputs/form.ts +++ b/src/__fk-inputs__/inputs/inputs/form.ts @@ -1,6 +1,5 @@ import { FormKitTypeDefinition } from '@formkit/core' import { - formInput, messages, message, actions, @@ -8,6 +7,7 @@ import { forms, disablesChildren, } from '@formkit/inputs' +import { formInput } from '../sections/formInput' /** * Input definition for a form. @@ -44,5 +44,5 @@ export const form: FormKitTypeDefinition = { /** * The key used to memoize the schema. */ - schemaMemoKey: 'rorzq1rsrf', + // schemaMemoKey: 'rorzq1rsrf', } diff --git a/src/__fk-inputs__/inputs/inputs/text.ts b/src/__fk-inputs__/inputs/inputs/text.ts new file mode 100644 index 0000000..75bcc91 --- /dev/null +++ b/src/__fk-inputs__/inputs/inputs/text.ts @@ -0,0 +1,68 @@ +import { FormKitTypeDefinition } from '@formkit/core' +import { + outer, + inner, + wrapper, + label, + help, + messages, + message, + icon, + prefix, + suffix, + textInput, + casts, + createSection, +} from '@formkit/inputs' + + +/** + * Input definition for a text. + * @public + */ +export const text: FormKitTypeDefinition = { + /** + * The actual schema of the input, or a function that returns the schema. + */ + schema: outer( + wrapper( + label('$label'), + inner( + icon('prefix', 'label'), + prefix(), + textInput(), + suffix(), + icon('suffix') + ) + ), + help('$help'), + messages(message('$message.value')) + ), + /** + * The type of node, can be a list, group, or input. + */ + type: 'input', + /** + * The family of inputs this one belongs too. For example "text" and "email" + * are both part of the "text" family. This is primary used for styling. + */ + family: 'text', + /** + * An array of extra props to accept for this input. + */ + props: [ + // 'label2', + ], + /** + * Forces node.props.type to be this explicit value. + */ + forceTypeProp: 'text', + /** + * Additional features that should be added to your input + */ + features: [casts], + /** + * The key used to memoize the schema. + */ + // schemaMemoKey: 'g2f31c24kjh', +} diff --git a/src/__fk-inputs__/inputs/sections/formInput.ts b/src/__fk-inputs__/inputs/sections/formInput.ts new file mode 100644 index 0000000..9842323 --- /dev/null +++ b/src/__fk-inputs__/inputs/sections/formInput.ts @@ -0,0 +1,20 @@ +import { createSection } from '@formkit/inputs' + +/** + * Form section + * + * @public + */ +export const formInput = createSection('form', () => ({ + $el: 'form', + bind: '$attrs', + meta: { + autoAnimate: true, + }, + attrs: { + id: '$id', + name: '$node.name', + onSubmit: '$handlers.submit', + 'data-loading': '$state.loading || undefined', + }, +})) diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index 0429103..d33317c 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -1,10 +1,15 @@ diff --git a/src/assets/main.css b/src/assets/main.css index 3fa6172..f5405fe 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -24,3 +24,9 @@ body { background-color: #1f2937; } } + + +/* DEV: */ +.formkit-outer { + border: 1px solid #e5e7eb; +} \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json index cb88a5a..a1d9e68 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,12 +1,16 @@ { "compilerOptions": { + "baseUrl": ".", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], "skipLibCheck": true, - /* Bundler mode */ "moduleResolution": "Bundler", "allowImportingTsExtensions": true, @@ -14,13 +18,24 @@ "moduleDetection": "force", "noEmit": true, "jsx": "preserve", - /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + "paths": { + "@/*": [ + "src/*" + ], + "__fk-inputs__/*": [ + "src/__fk-inputs__/*" + ] + } }, - "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] -} + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue" + ] +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 257a9b9..b9f3399 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,14 +6,20 @@ import { PrimeVueResolver } from '@primevue/auto-import-resolver'; // https://vite.dev/config/ export default defineConfig({ - plugins: [vue(), UnoCSS(), - Components({ - resolvers: [ - PrimeVueResolver() - ] - }) - + plugins: [ + vue(), UnoCSS(), + Components({ + resolvers: [ + PrimeVueResolver() + ] + }) ], + resolve: { + alias: { + '__fk-inputs__': '/src/__fk-inputs__', + '@': '/src', + } + }, build: { sourcemap: true }