@phila/phila-ui-checkbox 0.0.8 → 0.0.10

package/README.md

@@ -1,16 +1,75 @@
-# Checkbox component
+# Checkbox Component
 
-## Create a new local build
+A simple, customizable Vue 3. Checkbox component built with TypeScript and Vite.
+A checkbox input.
 
-In src/components/COMPONENT_NAME:
+## Features
 
+- 🎯 TypeScript support with full type definitions
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-checkbox
+# or
+yarn add @phila/phila-ui-checkbox
+# or
+pnpm add @phila/phila-ui-checkbox
 ```
-npm run build
-npm pack
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Checkbox } from "@phila/phila-ui-checkbox";
+</script>
+<template>...Add basic component template here...</template>
 ```
 
-copy .tgz file to project and run:
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+
+| ...Add props here...
+
+## Events
+
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+
+| ...Add events here...
+
+## Examples
+
+...Add examples here...
+
+## Development
 
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
 ```
-npm install COMPONENT_NAME*.tgz
+
+### Build Library
+
+```bash
+pnpm build
 ```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/Checkbox.vue.d.ts

@@ -1,29 +1,4 @@
-import { InputProps } from "@phila/phila-ui-core";
-import { CheckboxProps } from "./types";
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputProps & CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    change: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<InputProps & CheckboxProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-}>, {
-    id: string;
-    errors: import("@phila/phila-ui-core").InputErrors;
-    options: (import("@phila/phila-ui-core").HTMLInputValue[] | import("@phila/phila-ui-core").InputOptions | import("@phila/phila-ui-core").InputOptions[] | import("@phila/phila-ui-core").InputOptionsGroup | import("@phila/phila-ui-core").InputOptionObject[] | undefined) & (import("@phila/phila-ui-core").InputOptions | import("@phila/phila-ui-core").InputOptions[]);
-    textKey: string;
-    valueKey: string;
-    label: string;
-    desc: string;
-    modelValue: Array<string | number | boolean>;
-    numOfColumns: string | number;
-    small: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    label?: ((props: {}) => any) | undefined;
-    desc?: ((props: {}) => any) | undefined;
-}>;
+import { CheckboxProps } from './index';
+declare const _default: import('vue').DefineComponent<CheckboxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CheckboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+//# sourceMappingURL=Checkbox.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AAGA;AAgCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AA+D7C,wBASG"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseProps } from '@phila/phila-ui-core';
+export { default as Checkbox } from './Checkbox.vue';
+export interface CheckboxProps extends BaseProps {
+}
+//# 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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIrD,MAAM,WAAW,aAAc,SAAQ,SAAS;CAE/C"}

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"),a=e.defineComponent({__name:"Checkbox",props:{className:{}},setup(c,{emit:s}){const o=c,t=e.computed(()=>r.cn("default-class",o.className));return(n,u)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(t.value)}," Hello world! I am Checkbox ",2))}}),l=(c,s)=>{const o=c.__vccOpts||c;for(const[t,n]of s)o[t]=n;return o},p=l(a,[["__scopeId","data-v-cb719132"]]);exports.Checkbox=p;

package/dist/index.mjs

@@ -0,0 +1,22 @@
+import { defineComponent as a, computed as n, createElementBlock as r, openBlock as l, normalizeClass as m } from "vue";
+import { cn as p } from "@phila/phila-ui-core";
+import './index.css';const _ = /* @__PURE__ */ a({
+  __name: "Checkbox",
+  props: {
+    className: {}
+  },
+  setup(e, { emit: t }) {
+    const o = e, c = n(() => p("default-class", o.className));
+    return (s, f) => (l(), r("span", {
+      class: m(c.value)
+    }, " Hello world! I am Checkbox ", 2));
+  }
+}), u = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [c, s] of t)
+    o[c] = s;
+  return o;
+}, k = /* @__PURE__ */ u(_, [["__scopeId", "data-v-cb719132"]]);
+export {
+  k as Checkbox
+};

package/package.json

@@ -1,47 +1,52 @@
 {
   "name": "@phila/phila-ui-checkbox",
-  "private": false,
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/checkbox.umd.cjs",
-  "module": "./dist/checkbox.js",
-  "types": "./dist/types.d.ts",
+  "description": "A checkbox input.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/types.d.ts",
-        "default": "./dist/checkbox.js"
-      },
-      "require": "./dist/checkbox.umd.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "prepublish": "npm i && npm run build",
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
-    "preview": "vite preview"
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "checkbox",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "^1.0.24",
-    "bulma": "^0.9.4",
-    "vue": "^3.3.8"
+    "@phila/phila-ui-core": "2.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.3",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "sass": "^1.69.5",
-    "typescript": "^5.8.2",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vue-tsc": "^2.2.8"
+    "@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"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.com/",
-    "access": "public"
-  },
-  "gitHead": "09f2b67c1d3db773c813231e21b62b37e34aefbd"
-}
+  "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 ."
+  }
+}

package/dist/checkbox.js

@@ -1,105 +0,0 @@
-import { defineComponent as B, getCurrentInstance as I, ref as w, watch as D, createElementBlock as o, openBlock as l, normalizeClass as N, unref as a, createElementVNode as s, createCommentVNode as h, renderSlot as b, Fragment as c, createTextVNode as P, toDisplayString as n, normalizeStyle as S, renderList as _, withDirectives as z, mergeProps as E, vModelCheckbox as K } from "vue";
-import T from "@phila/phila-ui-core";
-const U = {
-  key: 0,
-  class: "input-error-msg"
-}, q = {
-  key: 1,
-  class: "is-field-info"
-}, A = {
-  key: 0,
-  class: "is-field-info"
-}, F = ["id"], H = ["id", "name", "aria-checked", "value"], L = ["for"], { formHelpers: v } = T, { randomID: M } = v, j = {
-  inheritAttrs: !1
-}, Q = /* @__PURE__ */ B({
-  ...j,
-  __name: "Checkbox",
-  props: {
-    id: { default: M() },
-    errors: { default() {
-      return [];
-    } },
-    optgroup: { type: Boolean },
-    disableableOptions: { type: Boolean },
-    options: { default: () => ({
-      "option-1": "Option 1",
-      "option-2": "Option 2",
-      "option-3": "Option 3"
-    }) },
-    name: {},
-    textKey: { default: "" },
-    valueKey: { default: "" },
-    imaskProps: {},
-    label: { default: "" },
-    desc: { default: "" },
-    modelValue: { default: () => [] },
-    numOfColumns: { default: 1 },
-    small: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(k, { emit: $ }) {
-    const i = k, p = $, V = I(), { error: m, classes: g, optionText: y, optionValue: f } = v.useInput.useInputComposable(V, i), r = w(i.modelValue);
-    D(
-      () => i.modelValue,
-      (e) => {
-        r.value = e;
-      }
-    );
-    const C = (e) => {
-      p("change", e), p("update:modelValue", r.value);
-    };
-    return (e, d) => (l(), o("div", {
-      class: N(["input-wrap input-checkbox", [a(g), i.small && "small-checkradio"]])
-    }, [
-      s("fieldset", null, [
-        s("legend", null, [
-          e.label ? (l(), o(c, { key: 0 }, [
-            P(n(e.label) + " " + n(e.$attrs.required !== void 0 ? "*" : ""), 1)
-          ], 64)) : b(e.$slots, "label", { key: 1 })
-        ]),
-        a(m) ? (l(), o("div", U, [
-          d[1] || (d[1] = s("span", { class: "icon" }, [
-            s("i", { class: "fas fa-exclamation-circle" })
-          ], -1)),
-          s("span", null, n(a(m)), 1)
-        ])) : h("", !0),
-        e.desc ? (l(), o("div", q, n(e.desc), 1)) : (l(), o(c, { key: 2 }, [
-          e.$slots.desc ? (l(), o("div", A, [
-            b(e.$slots, "desc")
-          ])) : h("", !0)
-        ], 64)),
-        s("div", {
-          id: `cb-group-${e.id}`,
-          style: S(`columns: ${e.numOfColumns} auto`)
-        }, [
-          (l(!0), o(c, null, _(e.options, (u, t) => (l(), o("div", {
-            key: `k-${t}`,
-            class: "control"
-          }, [
-            z(s("input", E({
-              id: `cb-${t}-${e.id}`,
-              "onUpdate:modelValue": d[0] || (d[0] = (O) => r.value = O),
-              name: `cb-${t}-${e.id}`,
-              type: "checkbox",
-              "aria-checked": e.modelValue.includes(a(f)(u, t)),
-              class: "is-checkradio",
-              role: "checkbox",
-              ref_for: !0
-            }, e.$attrs, {
-              value: a(f)(u, t),
-              onChange: C
-            }), null, 16, H), [
-              [K, r.value]
-            ]),
-            s("label", {
-              for: `cb-${t}-${e.id}`
-            }, n(a(y)(u)), 9, L)
-          ]))), 128))
-        ], 12, F)
-      ])
-    ], 2));
-  }
-});
-export {
-  Q as default
-};

package/dist/checkbox.umd.cjs

@@ -1 +0,0 @@
-(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue"),require("@phila/phila-ui-core")):typeof define=="function"&&define.amd?define(["vue","@phila/phila-ui-core"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.Checkbox=l(e.Vue,e.PhilaUICore))})(this,function(e,l){"use strict";const m={key:0,class:"input-error-msg"},f={key:1,class:"is-field-info"},u={key:0,class:"is-field-info"},k=["id"],h=["id","name","aria-checked","value"],V=["for"],{formHelpers:i}=l,{randomID:B}=i,b={inheritAttrs:!1};return e.defineComponent({...b,__name:"Checkbox",props:{id:{default:B()},errors:{default(){return[]}},optgroup:{type:Boolean},disableableOptions:{type:Boolean},options:{default:()=>({"option-1":"Option 1","option-2":"Option 2","option-3":"Option 3"})},name:{},textKey:{default:""},valueKey:{default:""},imaskProps:{},label:{default:""},desc:{default:""},modelValue:{default:()=>[]},numOfColumns:{default:1},small:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(y,{emit:E}){const n=y,c=E,g=e.getCurrentInstance(),{error:d,classes:$,optionText:C,optionValue:p}=i.useInput.useInputComposable(g,n),a=e.ref(n.modelValue);e.watch(()=>n.modelValue,o=>{a.value=o});const N=o=>{c("change",o),c("update:modelValue",a.value)};return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap input-checkbox",[e.unref($),n.small&&"small-checkradio"]])},[e.createElementVNode("fieldset",null,[e.createElementVNode("legend",null,[o.label?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.label)+" "+e.toDisplayString(o.$attrs.required!==void 0?"*":""),1)],64)):e.renderSlot(o.$slots,"label",{key:1})]),e.unref(d)?(e.openBlock(),e.createElementBlock("div",m,[s[1]||(s[1]=e.createElementVNode("span",{class:"icon"},[e.createElementVNode("i",{class:"fas fa-exclamation-circle"})],-1)),e.createElementVNode("span",null,e.toDisplayString(e.unref(d)),1)])):e.createCommentVNode("",!0),o.desc?(e.openBlock(),e.createElementBlock("div",f,e.toDisplayString(o.desc),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[o.$slots.desc?(e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(o.$slots,"desc")])):e.createCommentVNode("",!0)],64)),e.createElementVNode("div",{id:`cb-group-${o.id}`,style:e.normalizeStyle(`columns: ${o.numOfColumns} auto`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(r,t)=>(e.openBlock(),e.createElementBlock("div",{key:`k-${t}`,class:"control"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:`cb-${t}-${o.id}`,"onUpdate:modelValue":s[0]||(s[0]=S=>a.value=S),name:`cb-${t}-${o.id}`,type:"checkbox","aria-checked":o.modelValue.includes(e.unref(p)(r,t)),class:"is-checkradio",role:"checkbox",ref_for:!0},o.$attrs,{value:e.unref(p)(r,t),onChange:N}),null,16,h),[[e.vModelCheckbox,a.value]]),e.createElementVNode("label",{for:`cb-${t}-${o.id}`},e.toDisplayString(e.unref(C)(r)),9,V)]))),128))],12,k)])],2))}})});

package/dist/types.d.ts

@@ -1,35 +0,0 @@
-import Checkbox from "./Checkbox.vue";
-import { InputOptions } from "@phila/phila-ui-core";
-declare module "vue" {
-    interface GlobalComponents {
-        /**
-         *  PhilaUI Checkbox is a Vue3 component that renders a checkbox input.
-         * @example
-         * <checkbox
-         *  v-model="modelValue"
-         *  label="Label"
-         *  desc="Description"
-         *  textKey="text"
-         *  valueKey="value"
-         *  :options="[
-         *    {
-         *        value: '1',
-         *        text: 'Option 1',
-         *    },
-         *  ]"
-         * />
-         * */
-        Checkbox: typeof Checkbox;
-    }
-}
-export interface CheckboxProps {
-    label?: string;
-    desc?: string;
-    modelValue: Array<string | number | boolean>;
-    valueKey?: string;
-    textKey?: string;
-    numOfColumns?: string | number;
-    small?: boolean;
-    options: InputOptions | InputOptions[];
-}
-export default Checkbox;