@mouseless/baked 1.2.2 → 1.2.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Select.vue

@@ -13,7 +13,8 @@
         :options="data"
         :placeholder="l(label)"
         :show-clear
-        class="hide-placeholder w-full"
+        :filter
+        class="w-full"
       >
         <template #value="slotProps">
           <span>
@@ -42,11 +43,11 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { label, localizeLabel, optionLabel, optionValue, showClear, stateful } = schema;
+const { filter, label, localizeLabel, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
 const path = context.injectPath();
 const selected = ref();
 watch(
-  [() => data, () => model.value],
+  [() => data, getModel],
   ([_data, _model]) => {
     if (!_data) {
       return;
@@ -65,12 +66,15 @@ function getValueLabel(slotProps) {
   const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? label;
   return localizeLabel ? l(result) : result;
 }
+function getModel() {
+  return targetProp ? model.value?.[targetProp] : model.value;
+}
 function setModel(selected2) {
   const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
-  model.value = selectedValue;
   if (stateful) {
     selectStates[path] = selectedValue;
   }
+  model.value = selectedValue ? targetProp ? { [targetProp]: selectedValue } : selectedValue : void 0;
 }
 function setSelected(value) {
   if (!data) {
@@ -79,7 +83,7 @@ function setSelected(value) {
   selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
   if (stateful) {
     const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
-    if (model.value !== selectedValue) {
+    if (getModel() !== selectedValue) {
       setModel(selected.value);
     }
   }
@@ -87,15 +91,5 @@ function setSelected(value) {
 </script>
 
 <style>
-/*
-placeholder gives select the initial width, but it overlaps with label so it is
-hidden
-*/
-.hide-placeholder .p-placeholder {
-  visibility: hidden;
-}
-
-.p-select-label {
-  font-size: inherit;
-}
+.b-component--Select .p-placeholder{visibility:hidden}.b-component--Select .p-select-label{font-size:inherit}
 </style>

package/dist/runtime/components/SelectButton.vue

@@ -34,11 +34,11 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { allowEmpty = false, localizeLabel, optionLabel, optionValue, stateful } = schema;
+const { allowEmpty = false, localizeLabel, optionLabel, optionValue, stateful, targetProp } = schema;
 const path = context.injectPath();
 const selected = ref();
 watch(
-  [() => data, () => model.value],
+  [() => data, getModel],
   ([_data, _model]) => {
     if (!_data) {
       return;
@@ -53,12 +53,15 @@ function getOptionLabel(slotProps) {
   const result = slotProps.option[optionLabel] ?? slotProps.option;
   return localizeLabel ? l(result) : result;
 }
+function getModel() {
+  return targetProp ? model.value?.[targetProp] : model.value;
+}
 function setModel(selected2) {
   const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
-  model.value = selectedValue;
   if (stateful) {
     selectButtonStates[path] = selectedValue;
   }
+  model.value = selectedValue ? targetProp ? { [targetProp]: selectedValue } : selectedValue : void 0;
 }
 function setSelected(value) {
   if (!data) {
@@ -67,7 +70,7 @@ function setSelected(value) {
   selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
   if (stateful) {
     const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
-    if (model.value !== selectedValue) {
+    if (getModel() !== selectedValue) {
       setModel(selected.value);
     }
   }
@@ -75,5 +78,5 @@ function setSelected(value) {
 </script>
 
 <style>
-.p-popover-content .p-selectbutton{@apply max-sm:flex-col}.p-popover-content .p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
+.p-popover-content .b-component--SelectButton.p-selectbutton{@apply max-sm:flex-col}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",