@phila/phila-ui-switch 0.0.1-beta.2

package/README.md

@@ -0,0 +1,93 @@
+# Switch Component
+
+City of Philadelphia switch input component with TypeScript support.
+
+## Installation
+
+```bash
+pnpm add @phila/phila-ui-switch
+```
+
+## Usage
+
+```vue
+<template>
+  <Switch v-model="isEnabled">Enable notifications</Switch>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Switch } from "@phila/phila-ui-switch";
+
+const isEnabled = ref(false);
+</script>
+```
+
+## Props
+
+| Prop         | Type                          | Default                            | Description                                                                                                                                      |
+| ------------ | ----------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`         | `string`                      | `generateRandomId("switch-input")` | Unique identifier (uses [generateRandomId](https://github.com/CityOfPhiladelphia/phila-ui-4/tree/main/packages/core#generateRandomId) from core) |
+| `modelValue` | `string \| number \| boolean` | `false`                            | Current value (v-model)                                                                                                                          |
+| `value`      | `string \| number \| boolean` | `true`                             | Value when checked                                                                                                                               |
+| `offValue`   | `string \| number \| boolean` | `false`                            | Value when unchecked                                                                                                                             |
+| `disabled`   | `boolean`                     | `false`                            | Disable the switch                                                                                                                               |
+| `name`       | `string`                      | `"switch-input"`                   | Input name attribute                                                                                                                             |
+| `autofocus`  | `boolean`                     | `false`                            | Auto-focus on mount                                                                                                                              |
+| `ariaLabel`  | `string`                      | `"Switch input"`                   | Screen reader label                                                                                                                              |
+| `className`  | `string`                      | `undefined`                        | Additional CSS classes                                                                                                                           |
+
+## Events
+
+| Event               | Payload                                              | Description    |
+| ------------------- | ---------------------------------------------------- | -------------- |
+| `update:modelValue` | `(value: string \| number \| boolean)`               | v-model update |
+| `change`            | `(value: string \| number \| boolean, event: Event)` | State change   |
+| `focus`             | `(event: FocusEvent)`                                | Focus event    |
+| `blur`              | `(event: FocusEvent)`                                | Blur event     |
+
+## Examples
+
+### Custom Values
+
+```vue
+<Switch v-model="status" :value="'active'" :off-value="'inactive'">
+  Status: {{ status }}
+</Switch>
+```
+
+### Disabled
+
+```vue
+<Switch v-model="isEnabled" disabled>Disabled switch</Switch>
+```
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/Switch.vue.d.ts

@@ -0,0 +1,45 @@
+import { SwitchProps } from './index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        inputRef: HTMLInputElement;
+    };
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SwitchProps, {
+    focus: () => Promise<void>;
+    blur: () => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | boolean) => any;
+    change: (value: string | number | boolean, event: Event) => any;
+    focus: (event: FocusEvent) => any;
+    blur: (event: FocusEvent) => any;
+}, string, import('vue').PublicProps, Readonly<SwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+    onChange?: ((value: string | number | boolean, event: Event) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+    modelValue: string | number | boolean;
+    disabled: boolean;
+    value: string | number | boolean;
+    offValue: string | number | boolean;
+    autofocus: boolean;
+    ariaLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, HTMLLabelElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Switch.vue.d.ts.map

package/dist/Switch.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.vue.d.ts","sourceRoot":"","sources":["../src/Switch.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6F3C,iBAAS,cAAc;WAgET,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;oBAWnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+.switch[data-v-752a1efa]{display:inline-flex;align-items:center;cursor:pointer;position:relative}.switch--disabled[data-v-752a1efa]{cursor:not-allowed;opacity:.6}.switch-input[data-v-752a1efa]{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;border:none;outline:none}.switch-track[data-v-752a1efa]{display:inline-block;position:relative;background:var(--Schemes-Surface-Container-Highest, #ababab);transition:background-color .2s ease;display:flex;width:2rem;height:1.125rem;padding:var(--scale-xxsmall, .125rem);justify-content:flex-end;align-items:center;border-radius:var(--Radius-scale-radius-xl, 2rem);box-sizing:border-box}.switch-thumb[data-v-752a1efa]{width:.875rem;height:.875rem;flex-shrink:0;background-color:var(--Schemes-On-Primary, #ffffff);border-radius:var(--Radius-scale-radius-xl, 2rem);box-sizing:border-box;position:absolute;top:50%;left:var(--scale-xxsmall, .125rem);transform:translateY(-50%);transition:transform .2s ease}.switch-label[data-v-752a1efa]{padding-left:var(--scale-small, .5rem);color:var(--Schemes-On-Surface, #000);font-family:var(--Body-Default-font-body-default-family, Montserrat);font-size:var(--Body-Default-font-body-default-size, 1rem);font-style:normal;font-weight:400;line-height:var(--Body-Default-font-body-default-lineheight, 1.5rem)}.switch--checked .switch-track[data-v-752a1efa]{background:var(--Schemes-Primary, #003282)}.switch--checked .switch-thumb[data-v-752a1efa]{transform:translateY(-50%) translate(calc(2rem - .875rem - var(--scale-xxsmall, .125rem) - var(--scale-xxsmall, .125rem)))}.switch-input:focus+.switch-track[data-v-752a1efa]{outline:2px solid var(--Schemes-Primary, #003282);outline-offset:2px}.switch--disabled .switch-track[data-v-752a1efa]{background:var(--Schemes-Surface-Container, #e2e2e2)}.switch--disabled .switch-thumb[data-v-752a1efa]{background-color:var(--Schemes-On-Inverse-Surface, #f1f1f1)}.switch--disabled .switch-label[data-v-752a1efa]{color:var(--Schemes-Surface-Container-Highest, #ababab)}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from '@phila/phila-ui-core';
+export { default as Switch } from './Switch.vue';
+export interface SwitchProps extends BaseProps {
+    id?: string;
+    name?: string;
+    modelValue?: string | number | boolean;
+    disabled?: boolean;
+    value?: string | number | boolean;
+    offValue?: string | number | boolean;
+    autofocus?: boolean;
+    ariaLabel?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),r=require("@phila/phila-ui-core"),v=["for"],w=["id","name","checked","disabled","autofocus","aria-label","aria-labelledby","value"],y=["id"],V=e.defineComponent({__name:"Switch",props:{id:{default:()=>r.generateRandomId("switch-input")},name:{default:"switch-input"},modelValue:{type:[String,Number,Boolean],default:!1},disabled:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:!0},offValue:{type:[String,Number,Boolean],default:!1},autofocus:{type:Boolean,default:!1},ariaLabel:{default:"Switch input"},className:{}},emits:["update:modelValue","change","focus","blur"],setup(a,{expose:u,emit:c}){const t=a,o=c,n=e.ref(),s=e.computed(()=>typeof t.modelValue=="boolean"?t.modelValue:t.modelValue===t.value),f=e.computed(()=>s.value?t.value:t.offValue),m=l=>{const i=l.target.checked?t.value:t.offValue;o("update:modelValue",i),o("change",i,l)},b=l=>{o("focus",l)},h=l=>{o("blur",l)};u({focus:async()=>{await e.nextTick(),n.value?.focus()},blur:async()=>{await e.nextTick(),n.value?.blur()}});const p=e.computed(()=>r.cn("switch",s.value&&"switch--checked",t.disabled&&"switch--disabled",t.className));return(l,d)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(p.value),for:a.id},[e.createElementVNode("input",{id:a.id,ref_key:"inputRef",ref:n,name:a.name,type:"checkbox",checked:s.value,disabled:a.disabled,autofocus:a.autofocus,"aria-label":a.ariaLabel,"aria-labelledby":`${a.id}-label`,value:f.value,class:"switch-input",onChange:m,onFocus:b,onBlur:h},null,40,w),d[0]||(d[0]=e.createElementVNode("span",{class:"switch-track"},[e.createElementVNode("span",{class:"switch-thumb"})],-1)),e.createElementVNode("span",{id:`${a.id}-label`,class:"switch-label"},[e.renderSlot(l.$slots,"default",{},void 0,!0)],8,y)],10,v))}}),g=(a,u)=>{const c=a.__vccOpts||a;for(const[t,o]of u)c[t]=o;return c},k=g(V,[["__scopeId","data-v-752a1efa"]]);exports.Switch=k;

package/dist/index.mjs

@@ -0,0 +1,75 @@
+import { defineComponent as w, ref as y, computed as i, createElementBlock as g, openBlock as k, normalizeClass as V, createElementVNode as s, renderSlot as B, nextTick as f } from "vue";
+import { generateRandomId as S, cn as N } from "@phila/phila-ui-core";
+import './index.css';const x = ["for"], C = ["id", "name", "checked", "disabled", "autofocus", "aria-label", "aria-labelledby", "value"], R = ["id"], $ = /* @__PURE__ */ w({
+  __name: "Switch",
+  props: {
+    id: { default: () => S("switch-input") },
+    name: { default: "switch-input" },
+    modelValue: { type: [String, Number, Boolean], default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    value: { type: [String, Number, Boolean], default: !0 },
+    offValue: { type: [String, Number, Boolean], default: !1 },
+    autofocus: { type: Boolean, default: !1 },
+    ariaLabel: { default: "Switch input" },
+    className: {}
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(e, { expose: u, emit: o }) {
+    const a = e, l = o, c = y(), n = i(() => typeof a.modelValue == "boolean" ? a.modelValue : a.modelValue === a.value), m = i(() => n.value ? a.value : a.offValue), b = (t) => {
+      const r = t.target.checked ? a.value : a.offValue;
+      l("update:modelValue", r), l("change", r, t);
+    }, h = (t) => {
+      l("focus", t);
+    }, p = (t) => {
+      l("blur", t);
+    };
+    u({
+      focus: async () => {
+        await f(), c.value?.focus();
+      },
+      blur: async () => {
+        await f(), c.value?.blur();
+      }
+    });
+    const v = i(() => N("switch", n.value && "switch--checked", a.disabled && "switch--disabled", a.className));
+    return (t, d) => (k(), g("label", {
+      class: V(v.value),
+      for: e.id
+    }, [
+      s("input", {
+        id: e.id,
+        ref_key: "inputRef",
+        ref: c,
+        name: e.name,
+        type: "checkbox",
+        checked: n.value,
+        disabled: e.disabled,
+        autofocus: e.autofocus,
+        "aria-label": e.ariaLabel,
+        "aria-labelledby": `${e.id}-label`,
+        value: m.value,
+        class: "switch-input",
+        onChange: b,
+        onFocus: h,
+        onBlur: p
+      }, null, 40, C),
+      d[0] || (d[0] = s("span", { class: "switch-track" }, [
+        s("span", { class: "switch-thumb" })
+      ], -1)),
+      s("span", {
+        id: `${e.id}-label`,
+        class: "switch-label"
+      }, [
+        B(t.$slots, "default", {}, void 0, !0)
+      ], 8, R)
+    ], 10, x));
+  }
+}), E = (e, u) => {
+  const o = e.__vccOpts || e;
+  for (const [a, l] of u)
+    o[a] = l;
+  return o;
+}, O = /* @__PURE__ */ E($, [["__scopeId", "data-v-752a1efa"]]);
+export {
+  O as Switch
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@phila/phila-ui-switch",
+  "version": "0.0.1-beta.2",
+  "type": "module",
+  "description": "City of Philadelphia switch input component",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "switch",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "2.2.0-beta.2"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}