npm - @featherk/ui - Versions diffs - 0.9.0 - Mend

@featherk/ui 0.9.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.

Files changed (11) hide show

package/README.md +73 -0
package/dist/address/USAddress.test.d.ts +1 -0
package/dist/address/USAddress.vue.d.ts +28 -0
package/dist/address/index.d.ts +1 -0
package/dist/featherk-ui.es.js +196 -0
package/dist/featherk-ui.umd.js +1 -0
package/dist/index.d.ts +1 -0
package/dist/ui.css +1 -0
package/docs/README.md +58 -0
package/docs/address/USAddress.md +68 -0
package/package.json +49 -0

package/README.md ADDED Viewed

@@ -0,0 +1,73 @@
+# @featherk/ui
+Vue UI component package for FeatherK.
+## Components Overview
+- **Address**: `USAddress` - Complete US address form component with delayed validation orchestration and normalized submit payloads.
+	- Guide: [docs/address/USAddress.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/address/USAddress.md)
+## Importing Components
+```ts
+import { USAddress } from "@featherk/ui";
+import type { USAddressSubmitPayload } from "@featherk/composables/address";
+```
+## Usage
+Component styles ship with `@featherk/ui` and are automatically loaded from the package ESM entry.
+```vue
+<script setup lang="ts">
+import { USAddress } from "@featherk/ui";
+import type { USAddressSubmitPayload } from "@featherk/composables/address";
+function onValidSubmit(payload: USAddressSubmitPayload) {
+	console.log(payload);
+}
+function onInvalidSubmit() {
+	console.log("invalid");
+}
+</script>
+<template>
+	<USAddress @valid-submit="onValidSubmit" @invalid-submit="onInvalidSubmit" />
+</template>
+```
+## Events
+- `valid-submit`: emits normalized `USAddressSubmitPayload`
+- `invalid-submit`: emits when submission fails validation
+- `reset`: emits after component reset
+USAddress internally uses composables from `@featherk/composables/address`,
+including delayed fieldset validation orchestration via `useFieldsetValidationKit`.
+## Peer Dependencies
+- Required: `vue`
+- Required for `USAddress`: `@progress/kendo-vue-buttons`, `@progress/kendo-vue-dropdowns`, `@progress/kendo-vue-inputs`, `@progress/kendo-vue-labels`
+## Build
+Run from repository root:
+```bash
+npm run build -- --filter=@featherk/ui
+```
+Or run package-local:
+```bash
+npm run build
+```
+## Maintainer Notes
+- The build runs a first-party script that ensures `dist/featherk-ui.es.js` imports `./ui.css`.
+- New component scoped styles are included automatically when the component is exported through the root package entry.
+- If runtime subpath entries are added later (for example `@featherk/ui/address` as a JS entry), each runtime entry must also import CSS to preserve zero-effort DX.
+- For new component documentation, follow the docs authoring template in `docs/README.md`.

package/dist/address/USAddress.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/address/USAddress.vue.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { type USAddressSubmitPayload } from "@featherk/composables/address";
+type __VLS_Props = {
+    showAddress2?: boolean;
+    submitLabel?: string;
+    resetLabel?: string;
+    address1Placeholder?: string;
+    address2Placeholder?: string;
+    cityPlaceholder?: string;
+    zipPlaceholder?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "valid-submit": (payload: USAddressSubmitPayload) => any;
+    "invalid-submit": () => any;
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onValid-submit"?: (payload: USAddressSubmitPayload) => any;
+    "onInvalid-submit"?: () => any;
+    onReset?: () => any;
+}>, {
+    showAddress2: boolean;
+    submitLabel: string;
+    resetLabel: string;
+    address1Placeholder: string;
+    address2Placeholder: string;
+    cityPlaceholder: string;
+    zipPlaceholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/address/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as USAddress } from "./USAddress.vue";

package/dist/featherk-ui.es.js ADDED Viewed

@@ -0,0 +1,196 @@
+import "./ui.css";
+import { defineComponent as z, ref as I, openBlock as i, createElementBlock as k, withModifiers as g, createElementVNode as u, unref as e, createVNode as r, createBlock as o, withCtx as l, createTextVNode as d, createCommentVNode as b, toDisplayString as S } from "vue";
+import { Error as v, Hint as m } from "@progress/kendo-vue-labels";
+import { TextBox as y } from "@progress/kendo-vue-inputs";
+import { DropDownList as w } from "@progress/kendo-vue-dropdowns";
+import { Button as h } from "@progress/kendo-vue-buttons";
+import { useUSAddress as D } from "@featherk/composables/address";
+const A = { class: "address1" }, E = {
+  key: 0,
+  class: "address2"
+}, F = { class: "city" }, B = { class: "state" }, R = { class: "zip" }, L = { class: "messages" }, q = { class: "demo-actions" }, N = /* @__PURE__ */ z({
+  __name: "USAddress",
+  props: {
+    showAddress2: { type: Boolean, default: !0 },
+    submitLabel: { default: "Submit" },
+    resetLabel: { default: "Reset" },
+    address1Placeholder: { default: "Enter street address" },
+    address2Placeholder: { default: "Enter address line 2 (Optional)" },
+    cityPlaceholder: { default: "Enter city" },
+    zipPlaceholder: { default: "00000-0000" }
+  },
+  emits: ["valid-submit", "invalid-submit", "reset"],
+  setup(c, { emit: V }) {
+    const n = V, p = I(null), f = I(null), t = D({
+      formRef: p,
+      fieldsetRef: f
+    }), C = async () => {
+      const s = await t.submit();
+      if (s.isValid) {
+        n("valid-submit", s.payload);
+        return;
+      }
+      n("invalid-submit");
+    }, _ = () => {
+      t.reset(), n("reset");
+    };
+    return (s, a) => (i(), k("form", {
+      ref_key: "formRef",
+      ref: p,
+      novalidate: "",
+      onSubmit: g(C, ["prevent"])
+    }, [
+      u("fieldset", {
+        ref_key: "fieldsetRef",
+        ref: f,
+        class: "fkui-us-address",
+        onFocusout: a[0] || (a[0] = //@ts-ignore
+        (...P) => e(t).onFieldsetFocusout && e(t).onFieldsetFocusout(...P))
+      }, [
+        u("div", A, [
+          r(e(y), {
+            id: "address1",
+            placeholder: s.address1Placeholder,
+            value: e(t).formData.address1,
+            valid: e(t).address1Valid.value,
+            validate: e(t).addressValidate.value,
+            validityStyles: e(t).addressValidate.value,
+            onInput: e(t).onAddress1Input
+          }, null, 8, ["placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
+          e(t).address1Valid.value ? (i(), o(e(m), { key: 1 }, {
+            default: l(() => [...a[2] || (a[2] = [
+              d("Enter the street address including number.", -1)
+            ])]),
+            _: 1
+          })) : (i(), o(e(v), { key: 0 }, {
+            default: l(() => [...a[1] || (a[1] = [
+              d("Address 1 is required.", -1)
+            ])]),
+            _: 1
+          }))
+        ]),
+        s.showAddress2 ? (i(), k("div", E, [
+          r(e(y), {
+            id: "address2",
+            placeholder: s.address2Placeholder,
+            value: e(t).formData.address2,
+            onInput: e(t).onAddress2Input
+          }, null, 8, ["placeholder", "value", "onInput"]),
+          r(e(m), null, {
+            default: l(() => [...a[3] || (a[3] = [
+              d("This field is optional.", -1)
+            ])]),
+            _: 1
+          })
+        ])) : b("", !0),
+        u("div", F, [
+          r(e(y), {
+            id: "city",
+            placeholder: s.cityPlaceholder,
+            value: e(t).formData.city,
+            valid: e(t).cityValid.value,
+            validate: e(t).addressValidate.value,
+            validityStyles: e(t).addressValidate.value,
+            onInput: e(t).onCityInput
+          }, null, 8, ["placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
+          e(t).cityValid.value ? b("", !0) : (i(), o(e(v), { key: 0 }, {
+            default: l(() => [...a[4] || (a[4] = [
+              d("City is required.", -1)
+            ])]),
+            _: 1
+          }))
+        ]),
+        u("div", B, [
+          r(e(w), {
+            id: "state",
+            value: e(t).formData.state,
+            onChange: e(t).onStateChange,
+            defaultItem: e(t).stateDefaultItem,
+            dataItems: e(t).stateOptions,
+            textField: "label",
+            valueField: "value",
+            dataItemKey: "value",
+            valuePrimitive: !0,
+            valid: e(t).stateValid.value,
+            validate: e(t).addressValidate.value,
+            validityStyles: e(t).addressValidate.value
+          }, null, 8, ["value", "onChange", "defaultItem", "dataItems", "valid", "validate", "validityStyles"]),
+          e(t).stateValid.value ? b("", !0) : (i(), o(e(v), { key: 0 }, {
+            default: l(() => [...a[5] || (a[5] = [
+              d("State is required.", -1)
+            ])]),
+            _: 1
+          }))
+        ]),
+        u("div", R, [
+          r(e(y), {
+            id: "zip",
+            placeholder: s.zipPlaceholder,
+            wrapperClass: e(t).zipWrapperClass,
+            value: e(t).zipDisplay.value,
+            onInput: e(t).onZipInput,
+            valid: e(t).zipValid.value,
+            validate: e(t).addressValidate.value,
+            validityStyles: e(t).addressValidate.value,
+            style: { width: "100%" }
+          }, null, 8, ["placeholder", "wrapperClass", "value", "onInput", "valid", "validate", "validityStyles"]),
+          e(t).zipValid.value ? (i(), o(e(m), { key: 1 }, {
+            default: l(() => [...a[7] || (a[7] = [
+              d("Please enter a 5 or 9 digit zip code.", -1)
+            ])]),
+            _: 1
+          })) : (i(), o(e(v), { key: 0 }, {
+            default: l(() => [...a[6] || (a[6] = [
+              d("Please enter a 5 or 9 digit zip code.", -1)
+            ])]),
+            _: 1
+          }))
+        ]),
+        u("div", L, [
+          e(t).addressValid.value ? (i(), o(e(m), { key: 1 }, {
+            default: l(() => [...a[9] || (a[9] = [
+              d("Please enter address information.", -1)
+            ])]),
+            _: 1
+          })) : (i(), o(e(v), { key: 0 }, {
+            default: l(() => [...a[8] || (a[8] = [
+              d(" Please fill out all required address fields. ", -1)
+            ])]),
+            _: 1
+          }))
+        ])
+      ], 544),
+      u("div", q, [
+        r(e(h), {
+          type: "submit",
+          fillMode: "solid",
+          themeColor: "primary"
+        }, {
+          default: l(() => [
+            d(S(s.submitLabel), 1)
+          ]),
+          _: 1
+        }),
+        r(e(h), {
+          type: "button",
+          fillMode: "outline",
+          themeColor: "primary",
+          onClick: _
+        }, {
+          default: l(() => [
+            d(S(s.resetLabel), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ], 544));
+  }
+}), M = (c, V) => {
+  const n = c.__vccOpts || c;
+  for (const [p, f] of V)
+    n[p] = f;
+  return n;
+}, W = /* @__PURE__ */ M(N, [["__scopeId", "data-v-14bc6580"]]);
+export {
+  W as USAddress
+};

package/dist/featherk-ui.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./address";

package/dist/ui.css ADDED Viewed

@@ -0,0 +1 @@

+ .fkui-us-address[data-v-14bc6580]{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"address1 address1 address1" "address2 address2 address2" "city state zip" "messages messages messages";gap:.75rem;padding:1rem}.fkui-us-address .address1[data-v-14bc6580]{grid-area:address1}.fkui-us-address .address2[data-v-14bc6580]{grid-area:address2}.fkui-us-address .city[data-v-14bc6580]{grid-area:city}.fkui-us-address .state[data-v-14bc6580]{grid-area:state}.fkui-us-address .zip[data-v-14bc6580]{grid-area:zip}.fkui-us-address .messages[data-v-14bc6580]{grid-area:messages}.fkui-us-address [data-v-14bc6580] .fk-zip-textbox{min-width:100%}[data-v-14bc6580] .demo-actions{min-height:4rem;align-items:center;flex:1 0 2rem}

package/docs/README.md ADDED Viewed

@@ -0,0 +1,58 @@
+# @featherk/ui Docs Authoring
+Use this structure when adding docs for a new UI component.
+## Folder Layout
+- Place docs under `docs/<domain>/<ComponentName>.md`
+- Example: `docs/address/USAddress.md`
+## Component Doc Template
+Copy this template for each new component guide.
+```md
+# `<ComponentName>`
+`<ComponentName>` is a short one-sentence description.
+## Import
+```ts
+import { <ComponentName> } from "@featherk/ui";
+```
+## Basic Usage
+```vue
+<script setup lang="ts">
+import { <ComponentName> } from "@featherk/ui";
+</script>
+<template>
+  <<ComponentName> />
+</template>
+```
+## Props
+- `<propName>?: <type>` (default: `<value>`)
+## Events
+- `<event-name>`: what it emits and when
+## Notes
+- Any runtime requirements
+- Any accessibility behavior
+- Any styling behavior
+```
+## Checklist for New Components
+- Add component guide at `docs/<domain>/<ComponentName>.md`
+- Add guide link under Components Overview in `packages/ui/README.md`
+- Ensure component is exported from `packages/ui/src/index.ts`
+- Keep runtime entry at root (`@featherk/ui`) unless subpath runtime entrypoints are intentionally added
+- Run `npx turbo build --filter=@featherk/ui`

package/docs/address/USAddress.md ADDED Viewed

@@ -0,0 +1,68 @@
+# `USAddress`
+`USAddress` is a ready-to-use US address form component for Vue 3 and Kendo UI for Vue.
+It is powered by `useUSAddress` from `@featherk/composables/address` and includes:
+- Required field validation for Address 1, City, State, and ZIP
+- Optional Address 2
+- ZIP formatting/validation behavior via `useZipTextBox`
+- Delayed fieldset validation orchestration via `useFieldsetValidationKit`
+- Normalized submit payloads via `valid-submit`
+## Import
+```ts
+import { USAddress } from "@featherk/ui";
+import type { USAddressSubmitPayload } from "@featherk/composables/address";
+```
+## Basic Usage
+```vue
+<script setup lang="ts">
+import { USAddress } from "@featherk/ui";
+import type { USAddressSubmitPayload } from "@featherk/composables/address";
+function onValidSubmit(payload: USAddressSubmitPayload) {
+  console.log("valid", payload);
+}
+function onInvalidSubmit() {
+  console.log("invalid");
+}
+function onReset() {
+  console.log("reset");
+}
+</script>
+<template>
+  <USAddress
+    @valid-submit="onValidSubmit"
+    @invalid-submit="onInvalidSubmit"
+    @reset="onReset"
+  />
+</template>
+```
+## Props
+- `showAddress2?: boolean` (default: `true`)
+- `submitLabel?: string` (default: `"Submit"`)
+- `resetLabel?: string` (default: `"Reset"`)
+- `address1Placeholder?: string` (default: `"Enter street address"`)
+- `address2Placeholder?: string` (default: `"Enter address line 2 (Optional)"`)
+- `cityPlaceholder?: string` (default: `"Enter city"`)
+- `zipPlaceholder?: string` (default: `"00000-0000"`)
+## Events
+- `valid-submit`: emits `USAddressSubmitPayload` when submit succeeds
+- `invalid-submit`: emits when submit fails validation
+- `reset`: emits after reset action
+## Notes
+- Component styles are delivered automatically from the package ESM entry.
+- `USAddress` uses Kendo UI inputs/buttons/labels/dropdowns as peer dependencies of `@featherk/ui`.

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@featherk/ui",
+  "version": "0.9.0",
+  "main": "dist/featherk-ui.umd.js",
+  "module": "dist/featherk-ui.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "docs"
+  ],
+  "scripts": {
+    "build": "vite build && node ./scripts/inject-css-into-esm.mjs && npm run build:types",
+    "build:types": "vue-tsc --emitDeclarationOnly --declaration --declarationDir dist",
+    "test": "vitest --config vitest.config.ts",
+    "test:unit": "vitest run --config vitest.config.ts",
+    "test:coverage": "vitest run --config vitest.config.ts --coverage",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0",
+    "@featherk/composables": ">=0.8.2",
+    "@progress/kendo-vue-buttons": "^6.4.1",
+    "@progress/kendo-vue-dropdowns": "^6.4.1",
+    "@progress/kendo-vue-inputs": "^6.4.1",
+    "@progress/kendo-vue-labels": "^6.4.1"
+  },
+  "devDependencies": {
+    "@featherk/composables": "file:../composables",
+    "@types/node": "^24.5.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vitest": "^4.1.10",
+    "vue-tsc": "^3.0.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "kendo",
+    "components",
+    "ui",
+    "address"
+  ],
+  "license": "MIT"
+}