@phila/phila-ui-radio 0.0.6 → 0.0.10

package/README.md

@@ -1,16 +1,30 @@
-# Radio component
+## Usage
 
-## Create a new local build
+#### Import single component...
 
-In src/components/COMPONENT_NAME:
+```js
+import { Radio } from '@phila/phila-ui';
 
-```
-npm run build
-npm pack
+//register it locally...
+components: {
+  Radio,
+}
+
+//... or register it globally
+Vue.component('radio', Radio);
 ```
 
-copy .tgz file to project and run:
+#### or import the whole library,
 
+```js
+import * as PhilaUI from "@phila/phila-ui";
+
+//register it globally
+Vue.use(PhilaUI);
 ```
-npm install COMPONENT_NAME*.tgz
-```
+
+#### then use it in the vue template
+
+```html
+<radio></radio>
+```

package/dist/Radio.js

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

package/dist/Radio.umd.cjs

@@ -1 +1 @@
-(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.Radio=l(e.Vue,e.PhilaUICore))})(this,function(e,l){"use strict";const m={key:0,class:"input-error-msg"},f=e.createElementVNode("span",{class:"icon"},[e.createElementVNode("i",{class:"fas fa-exclamation-circle"})],-1),u={key:1,class:"is-field-info"},h={key:0,class:"is-field-info"},k=["id"],V=["id","aria-checked","name","value"],B=["for"],{formHelpers:s}=l,{randomID:g}=s,y={inheritAttrs:!1};return e.defineComponent({...y,__name:"Radio",props:{id:{default:g()},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:{type:[String,Number,Boolean],default:""},numOfColumns:{default:1},small:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(E,{emit:$}){const n=E,i=$,N=e.getCurrentInstance(),{error:d,classes:C,optionText:S,optionValue:c}=s.useInput.useInputComposable(N,n),a=e.ref(n.modelValue);e.watch(()=>n.modelValue,o=>{a.value=o});const _=o=>{i("change",o),i("update:modelValue",a.value)};return(o,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap input-radio",[e.unref(C),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,[f,e.createElementVNode("span",null,e.toDisplayString(e.unref(d)),1)])):e.createCommentVNode("",!0),o.desc?(e.openBlock(),e.createElementBlock("div",u,e.toDisplayString(o.desc),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[o.$slots.desc?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(o.$slots,"desc")])):e.createCommentVNode("",!0)],64)),e.createElementVNode("div",{id:`rd-group-${o.id}`,style:e.normalizeStyle(`columns: ${o.numOfColumns} auto`),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(r,t)=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"control"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:`rd-${t}-${o.id}`,"onUpdate:modelValue":p[0]||(p[0]=b=>a.value=b),type:"radio",role:"radio","aria-checked":o.modelValue===e.unref(c)(r,t),name:`rd-${t}-${o.id}`,class:"is-checkradio",value:e.unref(c)(r,t),ref_for:!0},o.$attrs,{onChange:_}),null,16,V),[[e.vModelRadio,a.value]]),e.createElementVNode("label",{for:`rd-${t}-${o.id}`},e.toDisplayString(e.unref(S)(r)),9,B)]))),128))],12,k)])],2))}})});
+(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.Radio=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","aria-checked","name","value"],V=["for"],{formHelpers:i}=l,{randomID:B}=i,g={inheritAttrs:!1};return e.defineComponent({...g,__name:"Radio",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:{type:[String,Number,Boolean],default:""},numOfColumns:{default:1},small:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(y,{emit:E}){const n=y,d=E,$=e.getCurrentInstance(),{error:c,classes:N,optionText:C,optionValue:p}=i.useInput.useInputComposable($,n),a=e.ref(n.modelValue);e.watch(()=>n.modelValue,o=>{a.value=o});const S=o=>{d("change",o),d("update:modelValue",a.value)};return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap input-radio",[e.unref(N),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(c)?(e.openBlock(),e.createElementBlock("div",m,[r[1]||(r[1]=e.createElementVNode("span",{class:"icon"},[e.createElementVNode("i",{class:"fas fa-exclamation-circle"})],-1)),e.createElementVNode("span",null,e.toDisplayString(e.unref(c)),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:`rd-group-${o.id}`,style:e.normalizeStyle(`columns: ${o.numOfColumns} auto`),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(s,t)=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"control"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:`rd-${t}-${o.id}`,"onUpdate:modelValue":r[0]||(r[0]=b=>a.value=b),type:"radio",role:"radio","aria-checked":o.modelValue===e.unref(p)(s,t),name:`rd-${t}-${o.id}`,class:"is-checkradio",value:e.unref(p)(s,t),ref_for:!0},o.$attrs,{onChange:S}),null,16,h),[[e.vModelRadio,a.value]]),e.createElementVNode("label",{for:`rd-${t}-${o.id}`},e.toDisplayString(e.unref(C)(s)),9,V)]))),128))],12,k)])],2))}})});

package/dist/Radio.vue.d.ts

@@ -1,7 +1,7 @@
 import { InputProps } from '@phila/phila-ui-core';
 import { RadioProps } from './types';
 
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & RadioProps>, {
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & RadioProps>, {
     id: any;
     errors(): never[];
     label: string;
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         "option-2": string;
         "option-3": string;
     };
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     change: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & RadioProps>, {
@@ -34,10 +34,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         "option-2": string;
         "option-3": string;
     };
-}>>> & {
+}>>> & 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) & (object | (string | number | object)[]);
@@ -48,7 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     modelValue: string | number | boolean;
     numOfColumns: string | number;
     small: boolean;
-}, {}>, {
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
     label?(_: {}): any;
     desc?(_: {}): any;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phila/phila-ui-radio",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.10",
   "type": "module",
   "files": [
     "dist"
@@ -25,7 +25,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "^1.0.21",
+    "@phila/phila-ui-core": "^1.0.24",
     "bulma": "^0.9.4",
     "vue": "^3.3.8"
   },
@@ -33,15 +33,15 @@
     "@types/node": "^20.10.3",
     "@vitejs/plugin-vue": "^4.5.0",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
+    "typescript": "^5.8.2",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-lib-inject-css": "^1.3.0",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^2.2.8"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.com/",
     "access": "public"
   },
-  "gitHead": "62924e3ac0fd1187900911ff3346a09929ec5aa3"
+  "gitHead": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
 }