tedir-select - npm Package Compare versions

Comparing version 0.0.1-wood1 to 0.0.1-wood2

dist/tedir-select-vue.es.js

@@ -1,2 +0,2 @@
-import { defineComponent, ref, onUpdated, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, Fragment, createTextVNode, toDisplayString, renderList, renderSlot, pushScopeId, popScopeId } from "vue";
+import { defineComponent, ref, onUpdated, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, Fragment, createTextVNode, toDisplayString, renderList, unref, renderSlot, pushScopeId, popScopeId } from "vue";
 var SelectBox_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -10,3 +10,3 @@ var _export_sfc = (sfc, props) => {
 };
-const _withScopeId = (n) => (pushScopeId("data-v-211fa5b0"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-0c4d3d82"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "selectPicker" };
@@ -24,11 +24,17 @@ const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "selectWrap" }, [
 const _hoisted_4 = ["onClick"];
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = {
+const _hoisted_5 = { class: "selectCheck" };
+const _hoisted_6 = ["checked", "id", "onChange"];
+const _hoisted_7 = ["for"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "selectCheck" };
+const _hoisted_10 = ["checked", "id", "onChange"];
+const _hoisted_11 = ["for"];
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = {
   key: 1,
   class: "selectList"
 };
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = ["onClick"];
-const _hoisted_10 = ["onClick"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -49,2 +55,11 @@ props: {
     });
+    const randomChar = () => {
+      let allChar = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      let resChar = "";
+      for (let i = 0; i < 10; i++) {
+        resChar += allChar.charAt(Math.floor(Math.random() * allChar.length));
+      }
+      return resChar;
+    };
+    const getRandomChar = randomChar();
     return (_ctx, _cache) => {
@@ -82,23 +97,51 @@ return openBlock(), createElementBlock("div", {
                   onClick: ($event) => {
-                    if (!__props.modelValue.includes(option)) {
-                      __props.modelValue.push(option);
-                    }
+                    !__props.modelValue.includes(option) ? __props.modelValue.push(option) : __props.modelValue.splice(__props.modelValue.findIndex((i) => i === option), 1);
                     emit("update:modelValue", __props.modelValue);
                   },
                   class: "selectItem"
-                }, toDisplayString(option), 9, _hoisted_4)) : typeof option === "object" && __props.prop in option ? (openBlock(), createElementBlock("div", {
+                }, [
+                  createElementVNode("div", _hoisted_5, [
+                    createElementVNode("input", {
+                      type: "checkbox",
+                      class: "selectCheckInput",
+                      checked: __props.modelValue.includes(option),
+                      id: "check-" + (unref(getRandomChar) + String(index)),
+                      onChange: ($event) => {
+                        !__props.modelValue.includes(option) ? __props.modelValue.push(option) : __props.modelValue.splice(__props.modelValue.findIndex((j) => j === option), 1);
+                        emit("update:modelValue", __props.modelValue);
+                      }
+                    }, null, 40, _hoisted_6),
+                    createElementVNode("label", {
+                      class: "selectCheckLabel",
+                      for: "check-" + (unref(getRandomChar) + String(index))
+                    }, toDisplayString(option), 9, _hoisted_7)
+                  ])
+                ], 8, _hoisted_4)) : typeof option === "object" && __props.prop in option ? (openBlock(), createElementBlock("div", {
                   key: 1,
                   onClick: ($event) => {
-                    if (!__props.modelValue.includes(option)) {
-                      __props.modelValue.push(option);
-                    }
+                    !__props.modelValue.includes(option) ? __props.modelValue.push(option) : __props.modelValue.splice(__props.modelValue.findIndex((i) => i[__props.prop] === option[__props.prop]), 1);
                     emit("update:modelValue", __props.modelValue);
                   },
                   class: "selectItem"
-                }, toDisplayString(option[__props.prop]), 9, _hoisted_5)) : (openBlock(), createElementBlock("div", {
+                }, [
+                  createElementVNode("div", _hoisted_9, [
+                    createElementVNode("input", {
+                      type: "checkbox",
+                      class: "selectCheckInput",
+                      checked: __props.modelValue.includes(option),
+                      id: "check-" + (unref(getRandomChar) + String(index)),
+                      onChange: ($event) => {
+                        !__props.modelValue.includes(option) ? __props.modelValue.push(option) : __props.modelValue.splice(__props.modelValue.findIndex((j) => j[__props.prop] === option[__props.prop]), 1);
+                        emit("update:modelValue", __props.modelValue);
+                      }
+                    }, null, 40, _hoisted_10),
+                    createElementVNode("label", {
+                      class: "selectCheckLabel",
+                      for: "check-" + (unref(getRandomChar) + String(index))
+                    }, toDisplayString(option[__props.prop]), 9, _hoisted_11)
+                  ])
+                ], 8, _hoisted_8)) : (openBlock(), createElementBlock("div", {
                   key: 2,
                   onClick: ($event) => {
-                    if (!__props.modelValue.includes(option)) {
-                      __props.modelValue.push(option);
-                    }
+                    !__props.modelValue.includes(option) ? __props.modelValue.push(option) : __props.modelValue.splice(__props.modelValue.findIndex((i) => i === option), 1);
                     emit("update:modelValue", __props.modelValue);
@@ -108,7 +151,10 @@ },
                 }, [
-                  renderSlot(_ctx.$slots, "default", { option }, void 0, true)
-                ], 8, _hoisted_6))
+                  renderSlot(_ctx.$slots, "default", {
+                    option,
+                    items: __props.modelValue
+                  }, void 0, true)
+                ], 8, _hoisted_12))
               ], 64);
             }), 128))
-          ])) : (openBlock(), createElementBlock("div", _hoisted_7, [
+          ])) : (openBlock(), createElementBlock("div", _hoisted_13, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
@@ -125,3 +171,3 @@ return openBlock(), createElementBlock(Fragment, {
                   class: "selectItem"
-                }, toDisplayString(option), 9, _hoisted_8)) : typeof option === "object" && __props.prop in option ? (openBlock(), createElementBlock("div", {
+                }, toDisplayString(option), 9, _hoisted_14)) : typeof option === "object" && __props.prop in option ? (openBlock(), createElementBlock("div", {
                   key: 1,
@@ -133,3 +179,3 @@ onClick: ($event) => {
                   class: "selectItem"
-                }, toDisplayString(option[__props.prop]), 9, _hoisted_9)) : (openBlock(), createElementBlock("div", {
+                }, toDisplayString(option[__props.prop]), 9, _hoisted_15)) : (openBlock(), createElementBlock("div", {
                   key: 2,
@@ -143,3 +189,3 @@ onClick: ($event) => {
                   renderSlot(_ctx.$slots, "default", { option }, void 0, true)
-                ], 8, _hoisted_10))
+                ], 8, _hoisted_16))
               ], 64);
@@ -153,3 +199,3 @@ }), 128))
 });
-var SelectBox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-211fa5b0"]]);
+var SelectBox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0c4d3d82"]]);
 export { SelectBox };

dist/tedir-select-vue.umd.js

@@ -1,1 +0,1 @@
-(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.TedirSelect={},a.Vue))})(this,function(a,e){"use strict";var x="",s=(l,o)=>{const c=l.__vccOpts||l;for(const[i,n]of o)c[i]=n;return c};const r=l=>(e.pushScopeId("data-v-211fa5b0"),l=l(),e.popScopeId(),l),m={class:"selectPicker"},k=r(()=>e.createElementVNode("div",{class:"selectWrap"},[e.createElementVNode("input",{type:"search",class:"selectSearch"})],-1)),y={key:0,class:"selectList"},f=["onClick"],V=["onClick"],B=["onClick"],g={key:1,class:"selectList"},h=["onClick"],E=["onClick"],u=["onClick"];var S=s(e.defineComponent({props:{modelValue:{default:null},options:{default:[]},prop:{default:"value"},placeholder:{default:"-- Select option --"}},emits:["update:modelValue"],setup(l,{emit:o}){const c=e.ref(!1);return e.onUpdated(()=>{document.addEventListener("click",()=>{c.value=!1})}),(i,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select",{show:c.value===!0}]),onClick:n[1]||(n[1]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",{class:"selectBox",onClick:n[0]||(n[0]=t=>c.value=!c.value)},[typeof l.modelValue=="string"&&l.modelValue!==""?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(l.modelValue),1)],64)):typeof l.modelValue=="object"&&l.prop in l.modelValue?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(l.modelValue[l.prop]),1)],64)):Array.isArray(l.modelValue)&&l.modelValue.length>=1&&typeof l.modelValue[0]=="string"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(l.modelValue.join(", ")),1)],64)):Array.isArray(l.modelValue)&&l.modelValue.length>=1&&typeof l.modelValue[0]=="object"&&l.prop in l.modelValue[0]?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(l.modelValue.map(t=>t[l.prop]).join(", ")),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:4},[e.createTextVNode(e.toDisplayString(l.placeholder),1)],64))]),e.createElementVNode("div",m,[k,Array.isArray(l.modelValue)?(e.openBlock(),e.createElementBlock("div",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(t,C)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:"option-"+t},[typeof t=="string"?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:d=>{l.modelValue.includes(t)||l.modelValue.push(t),o("update:modelValue",l.modelValue)},class:"selectItem"},e.toDisplayString(t),9,f)):typeof t=="object"&&l.prop in t?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:d=>{l.modelValue.includes(t)||l.modelValue.push(t),o("update:modelValue",l.modelValue)},class:"selectItem"},e.toDisplayString(t[l.prop]),9,V)):(e.openBlock(),e.createElementBlock("div",{key:2,onClick:d=>{l.modelValue.includes(t)||l.modelValue.push(t),o("update:modelValue",l.modelValue)},class:"selectItem"},[e.renderSlot(i.$slots,"default",{option:t},void 0,!0)],8,B))],64))),128))])):(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(t,C)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:"option-"+t},[typeof t=="string"?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:d=>{o("update:modelValue",t),c.value=!1},class:"selectItem"},e.toDisplayString(t),9,h)):typeof t=="object"&&l.prop in t?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:d=>{o("update:modelValue",t),c.value=!1},class:"selectItem"},e.toDisplayString(t[l.prop]),9,E)):(e.openBlock(),e.createElementBlock("div",{key:2,onClick:d=>{o("update:modelValue",t),c.value=!1},class:"selectItem"},[e.renderSlot(i.$slots,"default",{option:t},void 0,!0)],8,u))],64))),128))]))])],2))}}),[["__scopeId","data-v-211fa5b0"]]);a.SelectBox=S,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.TedirSelect={},n.Vue))})(this,function(n,e){"use strict";var A="",V=(l,c)=>{const a=l.__vccOpts||l;for(const[k,i]of c)a[k]=i;return a};const h=l=>(e.pushScopeId("data-v-0c4d3d82"),l=l(),e.popScopeId(),l),f={class:"selectPicker"},u=h(()=>e.createElementVNode("div",{class:"selectWrap"},[e.createElementVNode("input",{type:"search",class:"selectSearch"})],-1)),y={key:0,class:"selectList"},B=["onClick"],g={class:"selectCheck"},C=["checked","id","onChange"],E=["for"],S=["onClick"],I={class:"selectCheck"},x=["checked","id","onChange"],N=["for"],b=["onClick"],$={key:1,class:"selectList"},D=["onClick"],F=["onClick"],T=["onClick"];var j=V(e.defineComponent({props:{modelValue:{default:null},options:{default:[]},prop:{default:"value"},placeholder:{default:"-- Select option --"}},emits:["update:modelValue"],setup(l,{emit:c}){const a=e.ref(!1);e.onUpdated(()=>{document.addEventListener("click",()=>{a.value=!1})});const i=(()=>{let m="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",o="";for(let t=0;t<10;t++)o+=m.charAt(Math.floor(Math.random()*m.length));return o})();return(m,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select",{show:a.value===!0}]),onClick:o[1]||(o[1]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",{class:"selectBox",onClick:o[0]||(o[0]=t=>a.value=!a.value)},[typeof l.modelValue=="string"&&l.modelValue!==""?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(l.modelValue),1)],64)):typeof l.modelValue=="object"&&l.prop in l.modelValue?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(l.modelValue[l.prop]),1)],64)):Array.isArray(l.modelValue)&&l.modelValue.length>=1&&typeof l.modelValue[0]=="string"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(l.modelValue.join(", ")),1)],64)):Array.isArray(l.modelValue)&&l.modelValue.length>=1&&typeof l.modelValue[0]=="object"&&l.prop in l.modelValue[0]?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(l.modelValue.map(t=>t[l.prop]).join(", ")),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:4},[e.createTextVNode(e.toDisplayString(l.placeholder),1)],64))]),e.createElementVNode("div",f,[u,Array.isArray(l.modelValue)?(e.openBlock(),e.createElementBlock("div",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:"option-"+t},[typeof t=="string"?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:s=>{l.modelValue.includes(t)?l.modelValue.splice(l.modelValue.findIndex(d=>d===t),1):l.modelValue.push(t),c("update:modelValue",l.modelValue)},class:"selectItem"},[e.createElementVNode("div",g,[e.createElementVNode("input",{type:"checkbox",class:"selectCheckInput",checked:l.modelValue.includes(t),id:"check-"+(e.unref(i)+String(r)),onChange:s=>{l.modelValue.includes(t)?l.modelValue.splice(l.modelValue.findIndex(d=>d===t),1):l.modelValue.push(t),c("update:modelValue",l.modelValue)}},null,40,C),e.createElementVNode("label",{class:"selectCheckLabel",for:"check-"+(e.unref(i)+String(r))},e.toDisplayString(t),9,E)])],8,B)):typeof t=="object"&&l.prop in t?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:s=>{l.modelValue.includes(t)?l.modelValue.splice(l.modelValue.findIndex(d=>d[l.prop]===t[l.prop]),1):l.modelValue.push(t),c("update:modelValue",l.modelValue)},class:"selectItem"},[e.createElementVNode("div",I,[e.createElementVNode("input",{type:"checkbox",class:"selectCheckInput",checked:l.modelValue.includes(t),id:"check-"+(e.unref(i)+String(r)),onChange:s=>{l.modelValue.includes(t)?l.modelValue.splice(l.modelValue.findIndex(d=>d[l.prop]===t[l.prop]),1):l.modelValue.push(t),c("update:modelValue",l.modelValue)}},null,40,x),e.createElementVNode("label",{class:"selectCheckLabel",for:"check-"+(e.unref(i)+String(r))},e.toDisplayString(t[l.prop]),9,N)])],8,S)):(e.openBlock(),e.createElementBlock("div",{key:2,onClick:s=>{l.modelValue.includes(t)?l.modelValue.splice(l.modelValue.findIndex(d=>d===t),1):l.modelValue.push(t),c("update:modelValue",l.modelValue)},class:"selectItem"},[e.renderSlot(m.$slots,"default",{option:t,items:l.modelValue},void 0,!0)],8,b))],64))),128))])):(e.openBlock(),e.createElementBlock("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:"option-"+t},[typeof t=="string"?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:s=>{c("update:modelValue",t),a.value=!1},class:"selectItem"},e.toDisplayString(t),9,D)):typeof t=="object"&&l.prop in t?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:s=>{c("update:modelValue",t),a.value=!1},class:"selectItem"},e.toDisplayString(t[l.prop]),9,F)):(e.openBlock(),e.createElementBlock("div",{key:2,onClick:s=>{c("update:modelValue",t),a.value=!1},class:"selectItem"},[e.renderSlot(m.$slots,"default",{option:t},void 0,!0)],8,T))],64))),128))]))])],2))}}),[["__scopeId","data-v-0c4d3d82"]]);n.SelectBox=j,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "tedir-select",
-  "version": "0.0.1-wood1",
+  "version": "0.0.1-wood2",
   "description": "Tedir Select is a Vue 3 & Web Component Custom SelectBox, ListBox, Taggable, etc.",
@@ -5,0 +5,0 @@ "main": "dist/tedir-select-vue.umd.js",

README.md

 # Tedir Select
 Tedir Select is a Vue 3 Custom SelectBox, ListBox, Taggable, etc.
 
-![Demo](examples/demo-selectbox.png "Tedir SelectBox")
+#### Select box in string type
+![String SelectBox](examples/select-in-string-type.gif "String SelectBox")
+
+#### Select box in object type
+![Object SelectBox](examples/select-in-object-type.gif "Object SelectBox")
+
+#### Select box in array of strings
+![Array of Strings SelectBox](examples/select-in-array-of-strings.gif "Array of Strings SelectBox")
+
+#### Select box in array of objects
+![Array of Objects SelectBox](examples/select-in-array-of-objects.gif "Array of Objects SelectBox")

No alert changes

Improved metrics

Total package byte prevSize

26513

increased by25.54%

Lines of code

226

increased by31.4%

Number of lines in readme file

15

increased by200%

No dependency changes