@phila/phila-ui-input-form 0.0.0

package/README.md

@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

package/dist/InputForm.css

@@ -0,0 +1 @@
+@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.form-title[data-v-906e820c]{font-family:Montserrat,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#444;font-weight:600;margin:0 0 .5rem;line-height:2.1875rem;font-size:1.75rem!important}.form-errors[data-v-906e820c]{font-size:.875rem;padding:1rem 1.5rem;background-color:#fee7e7;margin:1rem 0}.form-errors span.icon[data-v-906e820c]{font-size:1rem}

package/dist/InputForm.js

@@ -0,0 +1,62 @@
+import "./InputForm.css";
+import { defineComponent as f, computed as h, openBlock as s, createElementBlock as n, mergeProps as v, toDisplayString as d, createCommentVNode as i, renderSlot as c, createElementVNode as u, pushScopeId as y, popScopeId as _ } from "vue";
+import g from "@phila/phila-ui-core";
+const k = (t) => (y("data-v-906e820c"), t = t(), _(), t), I = ["id"], b = {
+  key: 0,
+  class: "form-title form-padding"
+}, C = {
+  key: 1,
+  class: "form-subtitle form-padding"
+}, E = {
+  key: 2,
+  class: "form-errors has-text-centered has-text-weight-bold has-text-love-park-red-dark"
+}, S = /* @__PURE__ */ k(() => /* @__PURE__ */ u("span", { class: "icon" }, [
+  /* @__PURE__ */ u("i", { class: "fa fa-exclamation-triangle" })
+], -1)), $ = {
+  key: 3,
+  class: "form-submit form-padding"
+}, { formHelpers: B } = g, { randomID: V } = B, P = /* @__PURE__ */ f({
+  __name: "InputForm",
+  props: {
+    id: { default: V() },
+    errors: { default() {
+      return [];
+    } },
+    optgroup: { type: Boolean },
+    options: {},
+    textKey: {},
+    valueKey: {},
+    imaskProps: {},
+    title: { default: "" },
+    desc: { default: "" },
+    hideErrorsCount: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const o = t, r = h(() => Array.isArray(o.errors) ? o.errors.length : typeof o.errors == "string" || typeof o.errors == "number" ? 1 : l(o.errors)), l = (e) => Object.keys(e).map((a) => e[a]).reduce(
+      (a, m) => m.length > 0 ? a + 1 : a,
+      0
+    );
+    return (e, p) => (s(), n("form", v({
+      id: `form-${e.id}`
+    }, e.$attrs, { novalidate: "" }), [
+      e.title ? (s(), n("div", b, d(e.title), 1)) : i("", !0),
+      e.desc ? (s(), n("p", C, d(e.desc), 1)) : i("", !0),
+      c(e.$slots, "default", {}, void 0, !0),
+      !e.hideErrorsCount && r.value > 0 ? (s(), n("div", E, [
+        S,
+        u("span", null, " This form has " + d(r.value) + " error" + d(r.value > 1 ? "s" : ""), 1)
+      ])) : i("", !0),
+      e.$slots.submit ? (s(), n("div", $, [
+        c(e.$slots, "submit", {}, void 0, !0)
+      ])) : i("", !0)
+    ], 16, I));
+  }
+}), w = (t, o) => {
+  const r = t.__vccOpts || t;
+  for (const [l, e] of o)
+    r[l] = e;
+  return r;
+}, N = /* @__PURE__ */ w(P, [["__scopeId", "data-v-906e820c"]]);
+export {
+  N as default
+};

package/dist/InputForm.umd.cjs

@@ -0,0 +1,2 @@
+(function(t,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@phila/phila-ui-core")):typeof define=="function"&&define.amd?define(["vue","@phila/phila-ui-core"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.InputForm=a(t.Vue,t.PhilaUICore))})(this,function(t,a){"use strict";var f=document.createElement("style");f.textContent=`@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.form-title[data-v-906e820c]{font-family:Montserrat,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#444;font-weight:600;margin:0 0 .5rem;line-height:2.1875rem;font-size:1.75rem!important}.form-errors[data-v-906e820c]{font-size:.875rem;padding:1rem 1.5rem;background-color:#fee7e7;margin:1rem 0}.form-errors span.icon[data-v-906e820c]{font-size:1rem}
+`,document.head.appendChild(f);const i=o=>(t.pushScopeId("data-v-906e820c"),o=o(),t.popScopeId(),o),p=["id"],c={key:0,class:"form-title form-padding"},m={key:1,class:"form-subtitle form-padding"},d={key:2,class:"form-errors has-text-centered has-text-weight-bold has-text-love-park-red-dark"},w=i(()=>t.createElementVNode("span",{class:"icon"},[t.createElementVNode("i",{class:"fa fa-exclamation-triangle"})],-1)),h={key:3,class:"form-submit form-padding"},{formHelpers:u}=a,{randomID:S}=u,g=t.defineComponent({__name:"InputForm",props:{id:{default:S()},errors:{default(){return[]}},optgroup:{type:Boolean},options:{},textKey:{},valueKey:{},imaskProps:{},title:{default:""},desc:{default:""},hideErrorsCount:{type:Boolean,default:!1}},setup(o){const n=o,s=t.computed(()=>Array.isArray(n.errors)?n.errors.length:typeof n.errors=="string"||typeof n.errors=="number"?1:l(n.errors)),l=e=>Object.keys(e).map(r=>e[r]).reduce((r,y)=>y.length>0?r+1:r,0);return(e,O)=>(t.openBlock(),t.createElementBlock("form",t.mergeProps({id:`form-${e.id}`},e.$attrs,{novalidate:""}),[e.title?(t.openBlock(),t.createElementBlock("div",c,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0),e.desc?(t.openBlock(),t.createElementBlock("p",m,t.toDisplayString(e.desc),1)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{},void 0,!0),!e.hideErrorsCount&&s.value>0?(t.openBlock(),t.createElementBlock("div",d,[w,t.createElementVNode("span",null," This form has "+t.toDisplayString(s.value)+" error"+t.toDisplayString(s.value>1?"s":""),1)])):t.createCommentVNode("",!0),e.$slots.submit?(t.openBlock(),t.createElementBlock("div",h,[t.renderSlot(e.$slots,"submit",{},void 0,!0)])):t.createCommentVNode("",!0)],16,p))}});return((o,n)=>{const s=o.__vccOpts||o;for(const[l,e]of n)s[l]=e;return s})(g,[["__scopeId","data-v-906e820c"]])});

package/dist/InputForm.vue.d.ts

@@ -0,0 +1,50 @@
+import { InputProps, default as PhilaUICore } from '@phila/phila-ui-core';
+import { InputFormProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & InputFormProps>, {
+    title: string;
+    desc: string;
+    hideErrorsCount: boolean;
+    errorsCount: number;
+    errors(): never[];
+    id: any;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & InputFormProps>, {
+    title: string;
+    desc: string;
+    hideErrorsCount: boolean;
+    errorsCount: number;
+    errors(): never[];
+    id: any;
+}>>>, {
+    id: string;
+    errors: PhilaUICore.InputErrors;
+    title: string;
+    desc: string;
+    hideErrorsCount: boolean;
+}, {}>, {
+    default?(_: {}): any;
+    submit?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import { default as InputForm } from './InputForm.vue';
+
+declare module "@vue/runtime-core" {
+    interface GlobalComponents {
+        InputForm: typeof InputForm;
+    }
+}
+export interface InputFormProps {
+    title?: string;
+    desc?: string;
+    hideErrorsCount: boolean;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@phila/phila-ui-input-form",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/InputForm.umd.cjs",
+  "module": "./dist/InputForm.js",
+  "types": "./dist/types.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "prepublish": "npm i && npm run build",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "1.0.12",
+    "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.3",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "sass": "^1.69.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-lib-inject-css": "^1.3.0",
+    "vue-tsc": "^1.8.22"
+  },
+  "gitHead": "24a55656d994e2c54c353513e478fc74091bafc8"
+}