@fiscozen/dropdown 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@fiscozen/dropdown",
3
+ "version": "0.1.0",
4
+ "description": "Design System Dropdown component",
5
+ "scripts": {
6
+ "coverage": "vitest run --coverage",
7
+ "format": "prettier --write src/",
8
+ "test:unit": "vitest run",
9
+ "build": "vue-tsc && vite build"
10
+ },
11
+ "main": "src/index.ts",
12
+ "type": "module",
13
+ "keywords": [],
14
+ "author": "Alen Ajam",
15
+ "dependencies": {
16
+ "@fiscozen/button":"workspace:^",
17
+ "@fiscozen/composables":"workspace:^",
18
+ "@fiscozen/actionlist":"workspace:^"
19
+ },
20
+ "peerDependencies": {
21
+ "tailwindcss": "^3.4.1",
22
+ "vue": "^3.4.13"
23
+ },
24
+ "devDependencies": {
25
+ "@fiscozen/eslint-config": "workspace:^",
26
+ "@fiscozen/prettier-config": "workspace:^",
27
+ "@fiscozen/tsconfig": "workspace:^",
28
+ "@rushstack/eslint-patch": "^1.3.3",
29
+ "@types/jsdom": "^21.1.6",
30
+ "@types/node": "^18.19.3",
31
+ "@vitejs/plugin-vue": "^4.5.2",
32
+ "@vitest/coverage-v8": "^1.2.1",
33
+ "@vue/test-utils": "^2.4.3",
34
+ "@vue/tsconfig": "^0.5.0",
35
+ "vite-plugin-dts": "^3.8.3",
36
+ "eslint": "^8.49.0",
37
+ "jsdom": "^23.0.1",
38
+ "prettier": "^3.0.3",
39
+ "typescript": "~5.3.0",
40
+ "vite": "^5.0.10",
41
+ "vitest": "^1.2.0",
42
+ "vue-tsc": "^1.8.25"
43
+ },
44
+ "license": "MIT"
45
+ }
@@ -0,0 +1,45 @@
1
+ <template>
2
+ <FzFloating :isOpen position="auto">
3
+ <template #opener>
4
+ <FzButton
5
+ icon-position="after"
6
+ :icon-name="buttonIconName"
7
+ :size="props.size"
8
+ @click="isOpen = !isOpen"
9
+ >
10
+ <slot></slot>
11
+ </FzButton>
12
+ </template>
13
+ <FzActionlist :items="actions" :label="actionsLabel" />
14
+ </FzFloating>
15
+ </template>
16
+
17
+ <script setup lang="ts">
18
+ import { computed, ref } from 'vue'
19
+ import { FzButton, ButtonSize } from '@fiscozen/button'
20
+ import { FzActionlist, FzActionlistProps } from '@fiscozen/actionlist'
21
+ import { FzFloating } from '@fiscozen/composables'
22
+
23
+ const props = withDefaults(
24
+ defineProps<{
25
+ /**
26
+ * Size of the dropdown trigger
27
+ */
28
+ size: ButtonSize
29
+ /**
30
+ * Label of the action list
31
+ */
32
+ actionsLabel?: string
33
+ /**
34
+ * List of actions
35
+ */
36
+ actions: FzActionlistProps['items']
37
+ }>(),
38
+ {
39
+ size: 'md'
40
+ }
41
+ )
42
+
43
+ const isOpen = ref(false)
44
+ const buttonIconName = computed(() => (isOpen.value ? 'angle-up' : 'angle-down'))
45
+ </script>
@@ -0,0 +1,45 @@
1
+ import { beforeEach, describe, it, vi } from 'vitest'
2
+ import { mount } from '@vue/test-utils'
3
+ import { FzDropdown } from '..'
4
+
5
+ describe.concurrent('FzTopbar', () => {
6
+ beforeEach(() => {
7
+ const mockIntersectionObserver = vi.fn()
8
+ mockIntersectionObserver.mockReturnValue({
9
+ observe: () => null,
10
+ unobserve: () => null,
11
+ disconnect: () => null
12
+ })
13
+ window.IntersectionObserver = mockIntersectionObserver
14
+ })
15
+
16
+ it('matches snapshot', async ({ expect }) => {
17
+ const wrapper = mount(FzDropdown, {
18
+ props: {
19
+ actionsLabel: 'This is the items label',
20
+ actions: [
21
+ {
22
+ label: 'Item #1',
23
+ disabled: true,
24
+ meta: {
25
+ path: '/foo',
26
+ name: 'foo'
27
+ }
28
+ },
29
+ {
30
+ label: 'Item #2',
31
+ meta: {
32
+ path: '/foo',
33
+ name: 'foo'
34
+ }
35
+ }
36
+ ]
37
+ },
38
+ slots: {
39
+ default: 'This is a dropdown'
40
+ }
41
+ })
42
+
43
+ expect(wrapper.html()).toMatchSnapshot()
44
+ })
45
+ })
@@ -0,0 +1,26 @@
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`FzTopbar > matches snapshot 1`] = `
4
+ "<div>
5
+ <div class="inline-flex"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-200 text-core-white focus:bg-blue-500">
6
+ <div class="flex items-center justify-items-center mr-6 pl-10">
7
+ <!--v-if-->
8
+ </div>This is a dropdown<div class="flex items-center justify-items-center ml-6 pr-10">
9
+ <div class="flex items-center justify-center w-[25px] h-[25px]"><svg class="svg-inline--fa fa-angle-down fa-lg h-[20px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
10
+ <path class="" fill="currentColor" d="M241 369c-9.4 9.4-24.6 9.4-33.9 0L47 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 369z"></path>
11
+ </svg></div>
12
+ </div><span class="hidden h-0 w-0"></span>
13
+ </button></div>
14
+ <div class="bg-core-white absolute p-4 z-10" style="display: none;">
15
+ <div class="fz__actionlist inline-flex grow-0 flex-col rounded p-4">
16
+ <div class="text-grey-400 flex h-32 items-center px-12 text-xs"><span>This is the items label</span></div>
17
+ <div class="flex flex-col"><button disabled="" class="px-12 py-6 text-grey-500 hover:bg-background-alice-blue border-1 focus:border-1 focus:bg-background-alice-blue disabled:text-grey-100 disabled:bg-core-white h-32 items-center rounded border-transparent text-sm hover:text-blue-500 focus:border-blue-500 focus:text-blue-500 disabled:border-transparent font-medium grow-1 flex justify-start">
18
+ <!--v-if-->Item #1
19
+ </button></div>
20
+ <div class="flex flex-col"><button class="px-12 py-6 text-grey-500 hover:bg-background-alice-blue border-1 focus:border-1 focus:bg-background-alice-blue disabled:text-grey-100 disabled:bg-core-white h-32 items-center rounded border-transparent text-sm hover:text-blue-500 focus:border-blue-500 focus:text-blue-500 disabled:border-transparent font-medium grow-1 flex justify-start">
21
+ <!--v-if-->Item #2
22
+ </button></div>
23
+ </div>
24
+ </div>
25
+ </div>"
26
+ `;
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as FzDropdown } from './FzDropdown.vue'
package/tsconfig.json ADDED
@@ -0,0 +1,4 @@
1
+ {
2
+ "extends": "@fiscozen/tsconfig",
3
+ "exclude": ["src/__tests__", "vite.config.ts", "vitest.config.ts"]
4
+ }
@@ -0,0 +1 @@
1
+ {"program":{"fileNames":["../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/.pnpm/@vue+shared@3.4.13/node_modules/@vue/shared/dist/shared.d.ts","../../node_modules/.pnpm/@vue+reactivity@3.4.13/node_modules/@vue/reactivity/dist/reactivity.d.ts","../../node_modules/.pnpm/@vue+runtime-core@3.4.13/node_modules/@vue/runtime-core/dist/runtime-core.d.ts","../../node_modules/.pnpm/csstype@3.1.3/node_modules/csstype/index.d.ts","../../node_modules/.pnpm/@vue+runtime-dom@3.4.13/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts","../../node_modules/.pnpm/vue@3.4.13_typescript@5.3.3/node_modules/vue/jsx-runtime/index.d.ts","../../node_modules/.pnpm/@babel+types@7.23.6/node_modules/@babel/types/lib/index.d.ts","../../node_modules/.pnpm/@babel+parser@7.23.6/node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/source-map.d.ts","../../node_modules/.pnpm/@vue+compiler-core@3.4.13/node_modules/@vue/compiler-core/dist/compiler-core.d.ts","../../node_modules/.pnpm/@vue+compiler-dom@3.4.13/node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts","../../node_modules/.pnpm/vue@3.4.13_typescript@5.3.3/node_modules/vue/dist/vue.d.mts","../button/src/types.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-common-types@6.5.1/node_modules/@fortawesome/fontawesome-common-types/index.d.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-svg-core@6.5.1/node_modules/@fortawesome/fontawesome-svg-core/index.d.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-common-types@6.5.2/node_modules/@fortawesome/fontawesome-common-types/index.d.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.74/node_modules/@awesome.me/kit-8137893ad3/icons/modules/icon-types.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.74/node_modules/@awesome.me/kit-8137893ad3/icons/modules/index.d.ts","../../node_modules/.pnpm/@fortawesome+vue-fontawesome@3.0.6_@fortawesome+fontawesome-svg-core@6.5.1_vue@3.4.13/node_modules/@fortawesome/vue-fontawesome/index.d.ts","../icons/src/types.ts","../icons/src/fzicon.vue.ts","../icons/src/index.ts","../button/src/utils.ts","../button/src/fzbutton.vue.ts","../button/src/fziconbutton.vue.ts","../button/src/index.ts","../../node_modules/.pnpm/vue-router@4.3.0_vue@3.4.13/node_modules/vue-router/dist/vue-router.d.ts","../link/src/fzlink.vue.ts","../link/src/index.ts","../composables/src/types.ts","../composables/src/utils/index.ts","../composables/src/composables/usefloating.ts","../composables/src/composables/usemediaquery.ts","../composables/src/composables/usebreakpoints.ts","../composables/src/composables/index.ts","../composables/src/fzfloating.vue.ts","../composables/src/index.ts","../style/tokens.json","../style/src/constants.ts","../style/src/index.ts","./src/fztopbar.vue.ts","./__vls_types.d.ts","./dist/src/fztopbar.vue.d.ts","./dist/src/index.d.ts","./dist/index.d.ts","./src/index.ts","../composables/src/fzfloating.vue","../icons/src/fzicon.vue","../link/src/fzlink.vue"],"fileInfos":[{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},"0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0"],"root":[[86,91]],"options":{"composite":true,"esModuleInterop":true,"jsx":1,"jsxImportSource":"vue","module":99,"noImplicitThis":true,"skipLibCheck":true,"strict":true,"target":99,"useDefineForClassFields":true},"fileIdsList":[[51,60,61,62],[61,62],[52],[59],[57,60,62],[46,52,53,54],[55],[46],[46,47,48,50],[47,48,49,72],[54],[48,57],[50,56],[50],[51,57,58,67,68],[51,57,58,67,68,69],[51,58,69,70],[51],[51,58,67],[51,77,78,79],[51,78],[51,57,75,76],[51,57],[51,57,75,80],[51,75,80,81],[51,75],[51,57,63,64,65],[51,57,60,62,63,65,66],[51,57,72],[51,73],[83],[84],[89],[57,72],[88],[51,57,71,72,74,82,85],[51,86],[51,58,92,93],[51,75,80,94],[51,57,60,62,63,65]],"referencedMap":[[62,1],[63,2],[53,3],[60,4],[64,5],[55,6],[56,7],[47,8],[48,9],[50,10],[54,11],[72,12],[57,13],[51,14],[69,15],[70,16],[71,17],[58,18],[68,19],[80,20],[79,21],[77,22],[78,23],[81,24],[82,25],[75,23],[76,26],[66,27],[67,28],[65,18],[73,29],[74,30],[84,31],[85,32],[87,23],[90,33],[88,34],[89,35],[86,36],[91,37]],"exportedModulesMap":[[62,1],[63,2],[53,3],[60,4],[64,5],[55,6],[56,7],[47,8],[48,9],[50,10],[54,11],[72,12],[57,13],[51,14],[69,15],[70,16],[71,38],[58,18],[68,19],[80,20],[79,21],[77,22],[78,23],[81,24],[82,39],[75,23],[76,26],[66,27],[67,40],[65,18],[73,29],[74,18],[84,31],[85,32],[87,23],[90,33],[88,34],[89,35],[86,36],[91,23]],"semanticDiagnosticsPerFile":[62,63,53,52,59,61,60,64,55,56,47,48,50,46,49,54,44,45,8,9,11,10,2,12,13,14,15,16,17,18,19,3,4,20,24,21,22,23,25,26,27,5,28,29,30,31,6,35,32,33,34,36,7,37,42,43,38,39,40,41,1,72,57,51,69,70,71,58,68,80,79,77,78,81,82,75,76,66,67,65,73,74,[84,[{"file":"../style/src/constants.ts","start":197,"length":9,"code":7053,"category":1,"messageText":{"messageText":"Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\", `${number}px`>'.","category":1,"code":7053,"next":[{"messageText":"No index signature with a parameter of type 'string' was found on type 'Record<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\", `${number}px`>'.","category":1,"code":7054}]}}]],85,83,87,90,88,89,86,91],"affectedFilesPendingEmit":[86,91],"emitSignatures":[86]},"version":"5.3.3"}
package/vite.config.ts ADDED
@@ -0,0 +1,35 @@
1
+ import { fileURLToPath, URL } from 'node:url'
2
+ import { resolve } from 'node:path';
3
+
4
+ import { defineConfig } from 'vite'
5
+ import vue from '@vitejs/plugin-vue'
6
+ import dts from 'vite-plugin-dts'
7
+
8
+ // https://vitejs.dev/config/
9
+ export default defineConfig({
10
+ plugins: [
11
+ vue(),
12
+ dts({
13
+ insertTypesEntry: true,
14
+ })
15
+ ],
16
+ resolve: {
17
+ alias: {
18
+ '@': fileURLToPath(new URL('./src', import.meta.url))
19
+ }
20
+ },
21
+ build: {
22
+ lib: {
23
+ entry: resolve(__dirname, './src/index.ts'),
24
+ name: 'FzDropdown',
25
+ },
26
+ rollupOptions: {
27
+ external: ['vue'],
28
+ output: {
29
+ globals: {
30
+ vue: 'Vue',
31
+ },
32
+ },
33
+ }
34
+ }
35
+ })
@@ -0,0 +1,19 @@
1
+ import { fileURLToPath } from 'node:url'
2
+ import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
3
+ import viteConfig from './vite.config'
4
+
5
+ export default mergeConfig(
6
+ viteConfig,
7
+ defineConfig({
8
+ test: {
9
+ environment: 'jsdom',
10
+ exclude: [...configDefaults.exclude, 'e2e/*'],
11
+ root: fileURLToPath(new URL('./', import.meta.url)),
12
+ coverage: {
13
+ provider: 'v8',
14
+ include: ['**/src/**'],
15
+ exclude: ['**/index.ts']
16
+ }
17
+ }
18
+ })
19
+ )