@flux-ui/types 3.0.0-next.0

package/README.md

@@ -0,0 +1,45 @@
+# Flux
+
+This repository contains the source code for the basic components that are used throughout our front-end projects. It
+targets Vue 3+. Please read the following instructions and checks in order to proceed.
+
+## 📦 Registry
+
+- The UI library package is available under `@flux-ui/flux`.
+- The Dashboard library package is available under `@flux-ui/dashboard`.
+- The internal package is available under `@flux-ui/internals`.
+
+## ⚠️ Requirements
+
+- Install Node.js ^22
+- Install pnpm using `npm i -g pnpm`.
+- Configure a new environment variable `FONTAWESOME_NPM_AUTH_TOKEN`. This should be a valid Font Awesome private npm auth token.
+- Use `pnpm install` to install the required packages.
+- Use `pnpm dev` to start a build watcher for both targets.
+- Use `pnpm build` to build a production bundle.
+- Use `pnpm link` to link the dist folder of flux to your global node_modules.
+
+## 🪵 Git
+
+All commit messages and branches will be in English.
+
+### Branches
+
+- **Main** — Contains the latest stable release and is the exact source that is running in production.
+- **Develop** — Contains the latest staging release that is marked for deployment and is the exact source that is running on staging.
+- **Feature branches** — Any feature should have its own feature branch. Once complete, the branch should be merged into the _develop_ branch and the feature branch should be deleted.
+- **Bugfix branches** — When a bug is found, it should be fixed within a bugfix branch. Once complete the branch should be merged into the _develop_ branch and the feature branch should be deleted.
+
+### Commit messages
+
+Commit messages are bound to the following templates:
+
+- `<type>: <message> `
+- `<type>(<feature>): <message>`
+- `<type>(<feature>): <message> [<issue-number>]`
+
+#### Examples
+
+- `feat(expandable): adds header slot to expandable.`
+- `feat(expandable): adds header slot to expandable. [FLUX-123]`
+- `chore: adds vue 3 build target.`

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@flux-ui/types",
+    "version": "3.0.0-next.0",
+    "type": "module",
+    "license": "MIT",
+    "funding": "https://github.com/sponsors/basmilius",
+    "homepage": "https://flux.bas.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/basmilius/flux.git",
+        "directory": "packages/primitives"
+    },
+    "keywords": [
+        "ui library",
+        "component library",
+        "design system",
+        "vue",
+        "vue 3",
+        "ui",
+        "components",
+        "flux"
+    ],
+    "scripts": {
+        "prepublishOnly": "cp ../../README.md ."
+    },
+    "exports": {
+        ".": "./src/index.ts"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "files": [
+        "src",
+        "tsconfig.json"
+    ],
+    "main": "./src/index.ts",
+    "module": "./src/index.ts",
+    "types": "./src/index.ts",
+    "typings": "./src/index.ts",
+    "sideEffects": false,
+    "dependencies": {},
+    "devDependencies": {
+        "@types/luxon": "^3.6.2"
+    }
+}

package/src/common.ts

@@ -0,0 +1,140 @@
+import type { FontAwesome } from './font-awesome';
+import type { MaterialSymbol } from './material-symbols';
+
+export type FluxIconName = FontAwesome | MaterialSymbol;
+export type FluxFontAwesomeIconName = FontAwesome;
+export type FluxMaterialIconName = MaterialSymbol;
+
+export type FluxColor =
+    | 'gray'
+    | 'primary'
+    | 'danger'
+    | 'info'
+    | 'success'
+    | 'warning';
+
+export type FluxDirection =
+    | 'horizontal'
+    | 'vertical';
+
+export type FluxInputMask =
+    | 'bic'
+    | 'iban'
+    | 'vat';
+
+export type FluxInputType =
+    | 'color'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'file'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week';
+
+export type FluxPressableType =
+    | 'button'
+    | 'link'
+    | 'route'
+    | 'none';
+
+export type FluxSize =
+    | 'small'
+    | 'medium'
+    | 'large';
+
+export type FluxTo = {
+    name?: string;
+    path?: string;
+    hash?: string;
+    query?: Record<string, string | (string | null)[] | null | undefined>;
+    params?: Record<string, string | number>;
+    state?: Record<string, string | number | boolean>;
+    append?: boolean;
+    replace?: boolean;
+};
+
+export type FluxMaybePromise<T> = T | Promise<T>;
+
+export type FluxAutoCompleteType =
+    | AutoCompleteToken
+    | AutoCompleteContactToken
+    | AutoCompleteRecipientType
+    | AutoCompleteGroupIdentifier
+    | `${AutoCompleteGroupIdentifier} ${AutoCompleteToken}`
+    | `${AutoCompleteGroupIdentifier} ${AutoCompleteContactToken}`
+    | (string & {});
+
+type AutoCompleteGroupIdentifier =
+    | 'billing'
+    | 'shipping';
+
+type AutoCompleteRecipientType =
+    | 'home'
+    | 'work'
+    | 'mobile'
+    | 'fax'
+    | 'page';
+
+type AutoCompleteContactToken =
+    | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-area-code'
+    | 'tel-local'
+    | 'tel-extension'
+    | 'email'
+    | 'impp';
+
+type AutoCompleteToken =
+    | 'name'
+    | 'honorific-prefix'
+    | 'given-name'
+    | 'additional-name'
+    | 'family-name'
+    | 'honorific-suffix'
+    | 'nickname'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'one-time-code'
+    | 'organization-title'
+    | 'organization'
+    | 'street-address'
+    | 'address-line1'
+    | 'address-line2'
+    | 'address-line3'
+    | 'address-level4'
+    | 'address-level3'
+    | 'address-level2'
+    | 'address-level1'
+    | 'country'
+    | 'country-name'
+    | 'postal-code'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-additional-name'
+    | 'cc-family-name'
+    | 'cc-number'
+    | 'cc-exp'
+    | 'cc-exp-month'
+    | 'cc-exp-year'
+    | 'cc-csc'
+    | 'cc-type'
+    | 'transaction-currency'
+    | 'transaction-amount'
+    | 'language'
+    | 'bday'
+    | 'bday-day'
+    | 'bday-month'
+    | 'bday-year'
+    | 'sex'
+    | 'url'
+    | 'photo'
+    | 'webauthn';

package/src/components.ts

@@ -0,0 +1,55 @@
+import type { FluxIconName, FluxPressableType, FluxSize, FluxTo } from './common';
+
+export type FluxButtonSize = FluxSize | 'xl';
+
+export type FluxButtonEmits = {
+    click: [MouseEvent];
+    mouseenter: [MouseEvent];
+    mouseleave: [MouseEvent];
+};
+
+export type FluxButtonProps = {
+    readonly type?: FluxPressableType;
+    readonly disabled?: boolean;
+    readonly iconLeading?: FluxIconName | null;
+    readonly iconTrailing?: FluxIconName | null;
+    readonly isFilled?: boolean;
+    readonly isLoading?: boolean;
+    readonly isSubmit?: boolean;
+    readonly label?: string;
+    readonly size?: FluxButtonSize;
+    readonly tabindex?: string | number;
+    readonly href?: string;
+    readonly rel?: string;
+    readonly target?: string;
+    readonly to?: FluxTo;
+};
+
+export type FluxButtonSlots = {
+    default(): any;
+    after(): any;
+    before(): any;
+    iconLeading(): any;
+    iconTrailing(): any;
+    label(): any;
+}
+
+export type FluxFocalPointObject = {
+    readonly x: number;
+    readonly y: number;
+};
+
+export type FluxLegendObject = {
+    readonly color: string;
+    readonly label: string;
+}
+
+export type FluxPercentageBarItemObject = FluxLegendObject & {
+    readonly icon: FluxIconName;
+    readonly value: number;
+};
+
+export type FluxSegmentedControlItemObject = {
+    readonly icon?: FluxIconName;
+    readonly label?: string;
+};

package/src/filter.ts

@@ -0,0 +1,69 @@
+import type { DateTime } from 'luxon';
+import type { FluxIconName } from './common';
+
+export type FluxFilterBase = {
+    getValueLabel(value: FluxFilterValue): Promise<string | null>;
+
+    readonly icon?: FluxIconName;
+    readonly label: string;
+    readonly name: string;
+};
+
+export type FluxFilterItem =
+    | FluxFilterDateEntry
+    | FluxFilterDateRangeEntry
+    | FluxFilterOptionEntry
+    | FluxFilterOptionsEntry
+    | FluxFilterRangeEntry;
+
+export type FluxFilterDateEntry = FluxFilterBase & {
+    readonly type: 'date';
+};
+
+export type FluxFilterDateRangeEntry = FluxFilterBase & {
+    readonly type: 'dateRange';
+};
+
+export type FluxFilterOptionEntry = FluxFilterBase & {
+    readonly type: 'option';
+};
+
+export type FluxFilterOptionsEntry = FluxFilterBase & {
+    readonly type: 'options';
+};
+
+export type FluxFilterRangeEntry = FluxFilterBase & {
+    readonly type: 'range';
+};
+
+export type FluxFilterOptionHeader = {
+    readonly title: string;
+};
+
+export type FluxFilterOptionItem = {
+    readonly label: string;
+    readonly value: FluxFilterValueSingle;
+};
+
+export type FluxFilterOptionRow =
+    | FluxFilterOptionHeader
+    | FluxFilterOptionItem;
+
+export type FluxFilterValueSingle =
+    | DateTime
+    | string
+    | boolean
+    | number
+    | null;
+
+export type FluxFilterValue =
+    | FluxFilterValueSingle
+    | FluxFilterValueSingle[];
+
+export type FluxFilterState = {
+    get resettable(): string[];
+
+    reset(): void;
+} & {
+    [key: string]: FluxFilterValue | Function;
+};