From aad8d84e13ce31c1b7c1cbb930fb8bd4c0abe13a Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Sun, 7 May 2023 23:31:10 +0200 Subject: [PATCH] ui-lib(new-component): added text input component in the c-lib --- components.d.ts | 5 + package.json | 4 + pnpm-lock.yaml | 47 +++++ src/composable/validation.ts | 5 +- src/ui/c-input-text/c-input-text.demo.vue | 39 +++++ src/ui/c-input-text/c-input-text.test.ts | 87 ++++++++++ src/ui/c-input-text/c-input-text.theme.ts | 20 +++ src/ui/c-input-text/c-input-text.vue | 198 ++++++++++++++++++++++ src/ui/demo/demo-wrapper.vue | 5 + src/ui/demo/demo.routes.ts | 2 - src/utils/random.ts | 12 +- tsconfig.app.json | 2 +- vite.config.ts | 10 +- vitest.config.ts | 13 -- 14 files changed, 428 insertions(+), 21 deletions(-) create mode 100644 src/ui/c-input-text/c-input-text.demo.vue create mode 100644 src/ui/c-input-text/c-input-text.test.ts create mode 100644 src/ui/c-input-text/c-input-text.theme.ts create mode 100644 src/ui/c-input-text/c-input-text.vue delete mode 100644 vitest.config.ts diff --git a/components.d.ts b/components.d.ts index 78c2650c..65c82baa 100644 --- a/components.d.ts +++ b/components.d.ts @@ -26,11 +26,15 @@ declare module '@vue/runtime-core' { 'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default'] ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'] Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'] + CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default'] + 'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default'] + 'CInputText.theme': typeof import('./src/ui/c-input-text/c-input-text.theme.vue')['default'] CLink: typeof import('./src/ui/c-link/c-link.vue')['default'] 'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default'] CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'] ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'] ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'] + copy: typeof import('./src/ui/c-input-text/c-input-text copy.vue')['default'] CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'] CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'] DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'] @@ -52,6 +56,7 @@ declare module '@vue/runtime-core' { HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'] HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'] HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'] + IconMdiClose: typeof import('~icons/mdi/close')['default'] InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'] IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'] Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'] diff --git a/package.json b/package.json index 6f5856b0..a7c1edc7 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "yaml": "^2.2.1" }, "devDependencies": { + "@iconify-json/mdi": "^1.1.50", "@playwright/test": "^1.32.3", "@rushstack/eslint-patch": "^1.2.0", "@types/bcryptjs": "^2.4.2", @@ -98,8 +99,10 @@ "@unocss/eslint-config": "^0.50.8", "@vitejs/plugin-vue": "^2.3.4", "@vitejs/plugin-vue-jsx": "^1.3.10", + "@vue/compiler-sfc": "^3.2.47", "@vue/eslint-config-prettier": "^7.1.0", "@vue/eslint-config-typescript": "^10.0.0", + "@vue/runtime-core": "^3.2.47", "@vue/test-utils": "^2.3.2", "@vue/tsconfig": "^0.1.3", "c8": "^7.13.0", @@ -116,6 +119,7 @@ "typescript": "~4.5.5", "unocss": "^0.50.8", "unplugin-auto-import": "^0.15.2", + "unplugin-icons": "^0.16.1", "unplugin-vue-components": "^0.24.1", "vite": "^2.9.15", "vite-plugin-md": "^0.12.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e5813b71..68138ef0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,6 +135,9 @@ dependencies: version: 2.2.1 devDependencies: + '@iconify-json/mdi': + specifier: ^1.1.50 + version: 1.1.50 '@playwright/test': specifier: ^1.32.3 version: 1.32.3 @@ -192,12 +195,18 @@ devDependencies: '@vitejs/plugin-vue-jsx': specifier: ^1.3.10 version: 1.3.10 + '@vue/compiler-sfc': + specifier: ^3.2.47 + version: 3.2.47 '@vue/eslint-config-prettier': specifier: ^7.1.0 version: 7.1.0(eslint@8.38.0)(prettier@2.8.7) '@vue/eslint-config-typescript': specifier: ^10.0.0 version: 10.0.0(eslint-plugin-vue@8.7.1)(eslint@8.38.0)(typescript@4.5.5) + '@vue/runtime-core': + specifier: ^3.2.47 + version: 3.2.47 '@vue/test-utils': specifier: ^2.3.2 version: 2.3.2(vue@3.2.47) @@ -246,6 +255,9 @@ devDependencies: unplugin-auto-import: specifier: ^0.15.2 version: 0.15.2(@vueuse/core@8.9.4)(rollup@2.79.1) + unplugin-icons: + specifier: ^0.16.1 + version: 0.16.1(@vue/compiler-sfc@3.2.47) unplugin-vue-components: specifier: ^0.24.1 version: 0.24.1(rollup@2.79.1)(vue@3.2.47) @@ -1612,6 +1624,12 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify-json/mdi@1.1.50: + resolution: {integrity: sha512-SgbT5w5eHCdOG74ZWPz7HlTGk6VsifIJhNi6lAsxj/5Nlqt6Cz4LlQmSa9eecU9p075Jub2aAx/o7YI+GCahRQ==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify/types@2.0.0: resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} dev: true @@ -7561,6 +7579,35 @@ packages: - rollup dev: true + /unplugin-icons@0.16.1(@vue/compiler-sfc@3.2.47): + resolution: {integrity: sha512-qTunFUkpAyDnwzwV7YV1ZgCWRYfLuURcCurhhXOWMy2ipY88qx1pADvral2hJu4Xymh0X0t3Zcll3BIru2AVLQ==} + peerDependencies: + '@svgr/core': '>=7.0.0' + '@vue/compiler-sfc': ^3.0.2 || ^2.7.0 + vue-template-compiler: ^2.6.12 + vue-template-es2015-compiler: ^1.9.0 + peerDependenciesMeta: + '@svgr/core': + optional: true + '@vue/compiler-sfc': + optional: true + vue-template-compiler: + optional: true + vue-template-es2015-compiler: + optional: true + dependencies: + '@antfu/install-pkg': 0.1.1 + '@antfu/utils': 0.7.2 + '@iconify/utils': 2.1.5 + '@vue/compiler-sfc': 3.2.47 + debug: 4.3.4 + kolorist: 1.7.0 + local-pkg: 0.4.3 + unplugin: 1.3.1 + transitivePeerDependencies: + - supports-color + dev: true + /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47): resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==} engines: {node: '>=14'} diff --git a/src/composable/validation.ts b/src/composable/validation.ts index 4858110c..e7fc70c4 100644 --- a/src/composable/validation.ts +++ b/src/composable/validation.ts @@ -1,3 +1,4 @@ +import { get, type MaybeRef } from '@vueuse/core'; import _ from 'lodash'; import { reactive, watch, type Ref } from 'vue'; @@ -31,7 +32,7 @@ export function useValidation({ watch: watchRefs = [], }: { source: Ref; - rules: UseValidationRule[]; + rules: MaybeRef[]>; watch?: Ref[]; }) { const state = reactive<{ @@ -55,7 +56,7 @@ export function useValidation({ state.message = ''; state.status = undefined; - for (const rule of rules) { + for (const rule of get(rules)) { if (isFalsyOrHasThrown(() => rule.validator(source.value))) { state.message = rule.message; state.status = 'error'; diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue new file mode 100644 index 00000000..23632194 --- /dev/null +++ b/src/ui/c-input-text/c-input-text.demo.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/ui/c-input-text/c-input-text.test.ts b/src/ui/c-input-text/c-input-text.test.ts new file mode 100644 index 00000000..56b58559 --- /dev/null +++ b/src/ui/c-input-text/c-input-text.test.ts @@ -0,0 +1,87 @@ +import { describe, expect, it, beforeEach } from 'vitest'; +import { shallowMount } from '@vue/test-utils'; +import { setActivePinia, createPinia } from 'pinia'; +import _ from 'lodash'; +import CInputText from './c-input-text.vue'; + +describe('CInputText', () => { + beforeEach(() => { + setActivePinia(createPinia()); + }); + + it('Renders a label', () => { + const wrapper = shallowMount(CInputText, { + props: { + label: 'Label', + }, + }); + + expect(wrapper.get('.label').text()).to.equal('Label'); + }); + + it('Renders a placeholder', () => { + const wrapper = shallowMount(CInputText, { + props: { + placeholder: 'Placeholder', + }, + }); + + expect(wrapper.get('.input').attributes('placeholder')).to.equal('Placeholder'); + }); + + it('Renders a value', () => { + const wrapper = shallowMount(CInputText, { + props: { + value: 'Value', + }, + }); + + expect(wrapper.vm.value).to.equal('Value'); + }); + + it('Renders a provided id', () => { + const wrapper = shallowMount(CInputText, { + props: { + id: 'id', + }, + }); + + expect(wrapper.get('.input').attributes('id')).to.equal('id'); + }); + + it('updates value on input', async () => { + const wrapper = shallowMount(CInputText); + + await wrapper.get('input').setValue('Hello'); + + expect(_.get(wrapper.emitted(), 'update:value.0.0')).to.equal('Hello'); + }); + + it('cannot be edited when disabled', async () => { + const wrapper = shallowMount(CInputText, { + props: { + disabled: true, + }, + }); + + await wrapper.get('input').setValue('Hello'); + + expect(_.get(wrapper.emitted(), 'update:value')).toBeUndefined(); + }); + + it('renders a feedback message for invalid rules', async () => { + const wrapper = shallowMount(CInputText, { + props: { rules: [{ validator: () => false, message: 'Message' }] }, + }); + + expect(wrapper.get('.feedback').text()).to.equal('Message'); + }); + + it('feedback does not render for valid rules', async () => { + const wrapper = shallowMount(CInputText, { + props: { rules: [{ validator: () => true, message: 'Message' }] }, + }); + + expect(wrapper.find('.feedback').exists()).to.equal(false); + }); +}); diff --git a/src/ui/c-input-text/c-input-text.theme.ts b/src/ui/c-input-text/c-input-text.theme.ts new file mode 100644 index 00000000..93739d45 --- /dev/null +++ b/src/ui/c-input-text/c-input-text.theme.ts @@ -0,0 +1,20 @@ +import { defineThemes } from '../theme/theme.models'; + +export const { useTheme } = defineThemes({ + dark: { + backgroundColor: '#333333', + borderColor: '#333333', + + focus: { + backgroundColor: '#1ea54c1a', + }, + }, + light: { + backgroundColor: '#ffffff', + borderColor: '#e0e0e69e', + + focus: { + backgroundColor: '#ffffff', + }, + }, +}); diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue new file mode 100644 index 00000000..a40d26a0 --- /dev/null +++ b/src/ui/c-input-text/c-input-text.vue @@ -0,0 +1,198 @@ + + + + + diff --git a/src/ui/demo/demo-wrapper.vue b/src/ui/demo/demo-wrapper.vue index cc16a00f..8d4bae00 100644 --- a/src/ui/demo/demo-wrapper.vue +++ b/src/ui/demo/demo-wrapper.vue @@ -18,6 +18,8 @@
+

{{ componentName }}

+
@@ -25,9 +27,12 @@ diff --git a/src/ui/demo/demo.routes.ts b/src/ui/demo/demo.routes.ts index 0e9a9e4e..9ae1e77f 100644 --- a/src/ui/demo/demo.routes.ts +++ b/src/ui/demo/demo.routes.ts @@ -6,8 +6,6 @@ export const demoRoutes = Object.keys(demoPages).map((path) => { const [, , fileName] = path.split('/'); const name = fileName.split('.').shift(); - console.log(path); - return { path: name, name, diff --git a/src/utils/random.ts b/src/utils/random.ts index 6df941db..3a13be50 100644 --- a/src/utils/random.ts +++ b/src/utils/random.ts @@ -18,4 +18,14 @@ const shuffleArray = (array: T[]): T[] => shuffleArrayMutate([...array]); const shuffleString = (str: string, delimiter = ''): string => shuffleArrayMutate(str.split(delimiter)).join(delimiter); -export { randFromArray, randIntFromInterval, random, shuffleArray, shuffleArrayMutate, shuffleString }; +const generateRandomId = () => `id-${random().toString(36).substring(2, 12)}`; + +export { + randFromArray, + randIntFromInterval, + random, + shuffleArray, + shuffleArrayMutate, + shuffleString, + generateRandomId, +}; diff --git a/tsconfig.app.json b/tsconfig.app.json index 45ddfca0..ceea5615 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -9,6 +9,6 @@ "paths": { "@/*": ["./src/*"] }, - "types": ["naive-ui/volar"] + "types": ["naive-ui/volar", "unplugin-icons/types/vue"] } } diff --git a/vite.config.ts b/vite.config.ts index 0112ebd2..bca5bf6c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,6 +10,9 @@ import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'; import Unocss from 'unocss/vite'; +import { configDefaults } from 'vitest/config'; +import Icons from 'unplugin-icons/vite'; +import IconsResolver from 'unplugin-icons/resolver'; // https://vitejs.dev/config/ export default defineConfig({ @@ -28,7 +31,7 @@ export default defineConfig({ enabled: true, }, }), - + Icons({ compiler: 'vue3' }), vue({ include: [/\.vue$/, /\.md$/], }), @@ -76,7 +79,7 @@ export default defineConfig({ dirs: ['src/'], extensions: ['vue', 'md'], include: [/\.vue$/, /\.vue\?vue/, /\.md$/], - resolvers: [NaiveUiResolver()], + resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })], }), Unocss(), ], @@ -88,4 +91,7 @@ export default defineConfig({ define: { 'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version), }, + test: { + exclude: [...configDefaults.exclude, '**/*.e2e.spec.ts'], + }, }); diff --git a/vitest.config.ts b/vitest.config.ts deleted file mode 100644 index 1c0d1e52..00000000 --- a/vitest.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { configDefaults, defineConfig } from 'vitest/config'; -import path from 'path'; - -export default defineConfig({ - resolve: { - alias: { - '@': path.resolve(__dirname, './src'), - }, - }, - test: { - exclude: [...configDefaults.exclude, '**/*.e2e.spec.ts'], - }, -});