espri-vue-select-float 1.0.0

package/README.md

@@ -0,0 +1 @@
+# Select Float - Vue component

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import type { DefineComponent } from 'vue';
+import type { SelectFloatEmitsForDoc } from './interfaces/select-float-emits.interface';
+import type SelectFloatProps from './interfaces/select-float-props.interface';
+/**
+ * **ESPRI Digital - Select Float (Vue component)**
+ * --- ---
+ * ![ESPRIDigital](https://espridigital.fr/wp-content/uploads/2024/09/logo_espri_digital_white-100-1.png)
+ *
+ */
+declare const SelectFloat: DefineComponent<SelectFloatProps, {}, // For slots if any
+{}, // For methods or data if any
+{}, // Computed
+{}, // Methods
+{}, // Mixin
+{}, // Extends
+SelectFloatEmitsForDoc>;
+export default SelectFloat;

package/dist/interfaces/select-float-emits.interface.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectEmitsOptions } from 'vue';
+export default interface SelectFloatEmits {
+    (e: 'update:modelValue', value: any): void;
+}
+export interface SelectFloatEmitsForDoc extends ObjectEmitsOptions {
+    /**
+     * Called when modelValue is updated.
+     */
+    'update:modelValue': (value: any) => void;
+}

package/dist/interfaces/select-float-props.interface.d.ts

@@ -0,0 +1,65 @@
+export default interface SelectFloatProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Array of options available for selection.
+     */
+    options: Array<{
+        /** Display text for the option */
+        label: string;
+        /** Value associated with the option */
+        value: any;
+    }>;
+    /**
+     * Optional CSS class applied to the input element.
+     */
+    classInput?: string;
+    /**
+     * Disables the input when true.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the input as required when true.
+     */
+    required?: boolean;
+    /**
+     * Shows error messages when true.
+     */
+    showError?: boolean;
+    /**
+     * Validation rules for the input.
+     * Each rule can be undefined or an object containing:
+     * - $invalid: whether the rule is violated
+     * - $message: the error message associated with the rule
+     */
+    rules?: Array<{
+        $invalid: boolean;
+        $message: string;
+    } | undefined>;
+    /**
+     * Maximum number of characters allowed in the input.
+     */
+    maxlength?: number;
+    /**
+     * Placeholder text displayed inside the input.
+     */
+    placeholder?: string;
+    /**
+     * CSS style of the component.
+     */
+    style?: any;
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Indicates if the input is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Model value representing the current state of the input.
+     */
+    modelValue: any;
+}

package/dist/select-float.es.js

@@ -0,0 +1,84 @@
+import { defineComponent as b, computed as c, createElementBlock as m, openBlock as s, normalizeClass as p, createBlock as f, createElementVNode as h, unref as a, withCtx as y, createVNode as k, createTextVNode as x, createCommentVNode as B, toDisplayString as V } from "vue";
+import { Skeleton as C, FloatLabel as w, Select as E } from "primevue";
+const N = ["for"], S = {
+  key: 0,
+  class: "text-danger"
+}, $ = { class: "text-danger" }, z = /* @__PURE__ */ b({
+  __name: "select-float",
+  props: {
+    label: {},
+    options: {},
+    classInput: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    maxlength: {},
+    placeholder: {},
+    style: {},
+    class: {},
+    loading: { type: Boolean },
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: g }) {
+    const n = e, d = g, i = Math.random().toString(16).slice(2), r = c({
+      get() {
+        return n.modelValue;
+      },
+      set(t) {
+        d("update:modelValue", t);
+      }
+    }), u = c(() => {
+      if (n.showError) {
+        const t = n.rules || [];
+        for (let l = 0; l < t.length; l++) {
+          const o = t[l];
+          if (o && o.$invalid && o.$message)
+            return o.$message;
+        }
+      }
+      return "";
+    });
+    function v(t) {
+      const { value: l = "" } = t;
+      d("update:modelValue", l);
+    }
+    return (t, l) => (s(), m("div", {
+      class: p(`field ${n.class || ""}`)
+    }, [
+      e.loading ? (s(), f(a(C), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (s(), f(a(w), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: y(() => [
+          k(a(E), {
+            modelValue: r.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (o) => r.value = o),
+            options: e.options,
+            "option-label": "label",
+            "option-value": "value",
+            class: p(["w-full", e.classInput]),
+            invalid: !!u.value,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": a(i),
+            onChange: v
+          }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "input-id"]),
+          h("label", { for: a(i) }, [
+            x(V(e.label), 1),
+            e.required ? (s(), m("span", S, " *")) : B("", !0)
+          ], 8, N)
+        ]),
+        _: 1
+      })),
+      h("small", $, V(u.value), 1)
+    ], 2));
+  }
+});
+export {
+  z as default
+};

package/dist/select-float.umd.js

@@ -0,0 +1 @@
+(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue"),require("primevue")):typeof define=="function"&&define.amd?define(["vue","primevue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.SelectFloat=o(e.Vue,e.PrimeVue))})(this,(function(e,o){"use strict";const u=["for"],m={key:0,class:"text-danger"},p={class:"text-danger"};return e.defineComponent({__name:"select-float",props:{label:{},options:{},classInput:{},disabled:{type:Boolean},required:{type:Boolean},showError:{type:Boolean},rules:{},maxlength:{},placeholder:{},style:{},class:{},loading:{type:Boolean},modelValue:{}},emits:["update:modelValue"],setup(l,{emit:f}){const s=l,i=f,d=Math.random().toString(16).slice(2),r=e.computed({get(){return s.modelValue},set(n){i("update:modelValue",n)}}),c=e.computed(()=>{if(s.showError){const n=s.rules||[];for(let t=0;t<n.length;t++){const a=n[t];if(a&&a.$invalid&&a.$message)return a.$message}}return""});function h(n){const{value:t=""}=n;i("update:modelValue",t)}return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`field ${s.class||""}`)},[l.loading?(e.openBlock(),e.createBlock(e.unref(o.Skeleton),{key:0,class:"skeleton-input mt-3"})):(e.openBlock(),e.createBlock(e.unref(o.FloatLabel),{key:1,class:"mt-3"},{default:e.withCtx(()=>[e.createVNode(e.unref(o.Select),{modelValue:r.value,"onUpdate:modelValue":t[0]||(t[0]=a=>r.value=a),options:l.options,"option-label":"label","option-value":"value",class:e.normalizeClass(["w-full",l.classInput]),invalid:!!c.value,disabled:l.disabled,placeholder:l.placeholder,"input-id":e.unref(d),onChange:h},null,8,["modelValue","options","class","invalid","disabled","placeholder","input-id"]),e.createElementVNode("label",{for:e.unref(d)},[e.createTextVNode(e.toDisplayString(l.label),1),l.required?(e.openBlock(),e.createElementBlock("span",m," *")):e.createCommentVNode("",!0)],8,u)]),_:1})),e.createElementVNode("small",p,e.toDisplayString(c.value),1)],2))}})}));

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "espri-vue-select-float",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Select Float - Vue component",
+  "author": "ESPRI Digital",
+  "homepage": "https://github.com/ESPRI-Digital/vue-select-float#readme",
+  "main": "dist/select-float.umd.js",
+  "module": "dist/select-float.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "lint": "eslint .",
+    "ts-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "primevue": ">=4.0.0 <5.0.0",
+    "vue": ">=3.0.0 <4.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "eslint": "^9.39.1",
+    "eslint-config-espri-front": "^3.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vue-tsc": "^3.1.5"
+  }
+}