@mouseless/baked 1.8.7 → 1.9.0

package/dist/runtime/components/NavLink.vue

@@ -2,7 +2,7 @@
   <AwaitLoading :skeleton="{ height: '1.5rem' }">
     <div
       v-if="data"
-      class="flex gap-2"
+      class="flex gap-1"
     >
       <Button
         :icon
@@ -14,21 +14,22 @@
         @mouseenter="openPopover"
         @mouseleave="closePopover"
       />
-      <span
+      <Button
         v-if="summary"
-        class="md:hidden"
+        class="popover-icon hidden"
+        :class="popover?.visible && summaryShown ? 'text-yellow-500' : 'text-inherit'"
+        icon="pi pi-lightbulb"
+        size="small"
+        variant="text"
+        rounded
+        severity="secondary"
         data-icon
         @click="openPopover"
-      >
-        <i class="pi pi-eye" />
-      </span>
+      />
       <PersistentPopover
         v-if="summary"
         ref="popover"
-        class="
-          mx-4 max-w-96
-          max-md:w-[calc(100%-2rem)]
-        "
+        class="max-w-96 max-md:w-[65%]"
       >
         <Bake
           v-if="summaryShown"
@@ -82,8 +83,8 @@ function openPopover(event) {
   }
   clearTimeout(loadPopoverTask);
   clearTimeout(hidePopoverTask);
-  const target = event.target || event;
-  const onIcon = event.target.dataset["icon"] !== void 0;
+  const target = event.currentTarget || event.target || event;
+  const onIcon = target.dataset["icon"] !== void 0;
   loadPopoverTask = setTimeout(
     () => {
       if (summaryShown.value) {

package/dist/runtime/components/Select.vue

@@ -15,6 +15,7 @@
           v-model="selected"
           :input-id="path"
           :options="data"
+          :option-value
           :placeholder
           :show-clear
           :filter
@@ -35,9 +36,8 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
 import { Select } from "primevue";
-import { useContext, useUiStates, useLocalization } from "#imports";
+import { useContext, useUiStates, useLocalization, useSelection } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
@@ -47,50 +47,27 @@ const { schema, data } = defineProps({
   data: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { filter, label, localizeOptionLabels, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
+const { autoSelectFirst, filter, label, localizeOptionLabels, optionLabel, optionValue, showClear, stateful, targetProp } = schema;
 const path = context.injectPath();
-const selected = ref();
+const { selected } = useSelection({
+  data,
+  model,
+  path,
+  stateStore: selectStates,
+  stateful,
+  targetProp,
+  autoSelectFirst,
+  optionValue,
+  mode: "single"
+});
 const placeholder = label?.text ? l(label.text) : null;
-watch(
-  [() => data, getModel],
-  ([_data, _model]) => {
-    if (!_data) {
-      return;
-    }
-    const value = stateful ? selectStates[path] ?? _model : _model;
-    setSelected(value);
-  },
-  { immediate: true }
-);
-watch(selected, (newSelected) => setModel(newSelected));
 function getOptionLabel(slotProps) {
   const result = slotProps.option[optionLabel] ?? slotProps.option;
   return localizeOptionLabels ? l(result) : result;
 }
 function getValueLabel(slotProps) {
-  const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? placeholder;
+  const option = optionValue && slotProps.value != null ? data?.find((item) => item[optionValue] === slotProps.value) : slotProps.value;
+  const result = option?.[optionLabel] ?? option ?? placeholder;
   return (localizeOptionLabels ? l(result) : result) ?? "\xA0";
 }
-function getModel() {
-  return targetProp ? model.value?.[targetProp] : model.value;
-}
-function setModel(selected2) {
-  const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
-  if (stateful) {
-    selectStates[path] = selectedValue;
-  }
-  model.value = selectedValue ? targetProp ? { [targetProp]: selectedValue } : selectedValue : void 0;
-}
-function setSelected(value) {
-  if (!data) {
-    return;
-  }
-  selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
-  if (stateful) {
-    const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
-    if (getModel() !== selectedValue) {
-      setModel(selected.value);
-    }
-  }
-}
 </script>

package/dist/runtime/components/SelectButton.vue

@@ -32,6 +32,7 @@
           :allow-empty
           :data-key="optionValue"
           :option-label
+          :option-value
           class="!w-auto"
           pt:pc-toggle-button:root="text-[length:inherit]"
         >
@@ -45,9 +46,8 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
 import { SelectButton } from "primevue";
-import { useContext, useLocalization, useUiStates } from "#imports";
+import { useContext, useLocalization, useUiStates, useSelection } from "#imports";
 import { AwaitLoading, Labeler, Validation } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
@@ -59,6 +59,7 @@ const { schema, data } = defineProps({
 const model = defineModel({ type: null, required: true });
 const {
   allowEmpty = false,
+  autoSelectFirst,
   label,
   localizeOptionLabels,
   optionLabel,
@@ -67,43 +68,19 @@ const {
   targetProp
 } = schema;
 const path = context.injectPath();
-const selected = ref();
-watch(
-  [() => data, getModel],
-  ([_data, _model]) => {
-    if (!_data) {
-      return;
-    }
-    const value = stateful ? selectButtonStates[path] ?? _model : _model;
-    setSelected(value);
-  },
-  { immediate: true }
-);
-watch(selected, (newSelected) => setModel(newSelected));
+const { selected } = useSelection({
+  data,
+  model,
+  path,
+  stateStore: selectButtonStates,
+  stateful,
+  targetProp,
+  autoSelectFirst,
+  optionValue,
+  mode: "single"
+});
 function getOptionLabel(slotProps) {
   const result = slotProps.option[optionLabel] ?? slotProps.option;
   return localizeOptionLabels ? l(result) : result;
 }
-function getModel() {
-  return targetProp ? model.value?.[targetProp] : model.value;
-}
-function setModel(selected2) {
-  const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
-  if (stateful) {
-    selectButtonStates[path] = selectedValue;
-  }
-  model.value = selectedValue ? targetProp ? { [targetProp]: selectedValue } : selectedValue : void 0;
-}
-function setSelected(value) {
-  if (!data) {
-    return;
-  }
-  selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
-  if (stateful) {
-    const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
-    if (getModel() !== selectedValue) {
-      setModel(selected.value);
-    }
-  }
-}
 </script>

package/dist/runtime/components/TextLink.d.vue.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/TextLink.vue

@@ -0,0 +1,43 @@
+<template>
+  <AwaitLoading :skeleton="{ height: '1.5rem' }">
+    <Button
+      v-if="rawData"
+      v-tooltip.bottom="tooltip"
+      :icon
+      icon-pos="right"
+      :label="text"
+      :href="rawData"
+      variant="link"
+      as="a"
+      target="_blank"
+      rel="noopener"
+      class="m-0 p-0 justify-start text-[length:inherit]"
+    />
+    <span v-else>-</span>
+  </AwaitLoading>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Button } from "primevue";
+import { useFormat } from "#imports";
+import { AwaitLoading } from "#components";
+const { truncate } = useFormat();
+const { schema, data: rawData } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { icon = "pi pi-external-link", maxLength = 50 } = schema;
+const data = computed(() => rawData.includes("://") ? rawData.split("://")[1] : rawData);
+const lengthIsExceeded = computed(() => maxLength && data.value.length > maxLength);
+const text = computed(() => lengthIsExceeded.value ? truncate(data.value, maxLength) : data.value);
+const tooltip = computed(() => ({
+  value: `${data.value}`,
+  disabled: !lengthIsExceeded.value,
+  pt: {
+    root: {
+      style: maxLength ? `min-width: ${maxLength / 4}rem;` : ""
+    }
+  }
+}));
+</script>

package/dist/runtime/components/TextLink.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Textarea.d.vue.ts

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,36 @@
+<template>
+  <AwaitLoading
+    :skeleton="{
+      height: label.mode === 'ifta' ? '10rem' : '9.6rem',
+      class: 'min-w-60'
+    }"
+  >
+    <Validation>
+      <Labeler
+        :label
+        :path
+      >
+        <Textarea
+          :id="path"
+          v-model="model"
+          v-bind="$attrs"
+          rows="5"
+          fluid
+        />
+      </Labeler>
+    </Validation>
+  </AwaitLoading>
+</template>
+
+<script setup>
+import { Textarea } from "primevue";
+import { useContext } from "#imports";
+import { AwaitLoading, Labeler, Validation } from "#components";
+const context = useContext();
+const { schema } = defineProps({
+  schema: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+const { label } = schema;
+const path = context.injectPath();
+</script>

package/dist/runtime/components/Textarea.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/composables/useInputValidator.d.ts

@@ -0,0 +1,20 @@
+export default function _default(): {
+    date: {
+        message: any;
+        validate: (value: any, { silent }?: {
+            silent?: boolean | undefined;
+        }) => any;
+    };
+    mailAddress: {
+        message: any;
+        validate: (value: any, { silent }?: {
+            silent?: boolean | undefined;
+        }) => any;
+    };
+    url: {
+        message: any;
+        validate: (value: any, { silent }?: {
+            silent?: boolean | undefined;
+        }) => any;
+    };
+};

package/dist/runtime/composables/useInputValidator.js

@@ -0,0 +1,111 @@
+import { useValidation, useLocalization } from "#imports";
+
+export default function() {
+  const { localize: lc } = useLocalization({ group: "useInputValidator" });
+  const validation = useValidation();
+
+  const mutable = validation.injectMutable();
+
+  return {
+    date: WithMutable(Date(lc), mutable),
+    mailAddress: WithMutable(MailAddress(lc), mutable),
+    url: WithMutable(Url(lc), mutable)
+  };
+}
+
+function WithMutable(validator, mutable) {
+  function validate(value, { silent = false } = {}) {
+    const valid = validator.validate(value);
+    if(silent) { return valid; }
+
+    if(valid || !value) {
+      mutable.clear();
+    } else {
+      mutable.setError(validator.message);
+    }
+
+    return valid;
+  }
+
+  return {
+    message: validator.message,
+    validate
+  };
+}
+
+function Date(lc) {
+  const message = lc("Invalid date");
+
+  function validate(value) {
+    if(value?.length != 8) { return false; }
+    if(isNaN(value)) { return false; }
+
+    const day = Number(value.slice(0, 2));
+    const month = Number(value.slice(2, 4));
+    const year = Number(value.slice(4, 8));
+
+    if(year < 1000 || year > 9999) { return false; }
+    if(month < 1 || month > 12) { return false; }
+    if(day < 1 || day > 31) { return false; }
+
+    // edge cases like Feb 30, Apr 31
+    const date = new globalThis.Date(year, month - 1, day);
+
+    return date.getFullYear() === year &&
+      date.getMonth() === month - 1 &&
+      date.getDate() === day;
+  }
+
+  return {
+    message,
+    validate
+  };
+}
+
+function MailAddress(lc) {
+  const message = lc("Invalid e-mail address");
+  const regex = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9][a-zA-Z0-9.-]*[a-zA-Z0-9]\\.[a-zA-Z]{2,}$/";
+  const parts = regex.match(/^\/(.*)\/([gimsuy]*)$/);
+
+  function validate(value) {
+    return new RegExp(parts[1], parts[2]).test(value);
+  }
+
+  return {
+    message,
+    validate
+  };
+}
+
+function Url(lc) {
+  const message = lc("Invalid URL");
+
+  function validate(value) {
+    // backend adds trailing "/" to absolute url when no query string -> account for that extra char
+    const effectiveLength = value?.length + (!value?.includes("?") && !value?.endsWith("/") ? 1 : 0);
+    if(effectiveLength > 255) { return false; }
+
+    try {
+      const url = new URL(value);
+
+      // don't accept whitespace on host part
+      if(url.host.includes("%20")) { return false; }
+
+      // "test.com." -> "test.com" -> ["test", "com"]
+      const parts = url.hostname.replace(/\.$/, "").split(".");
+
+      // "www.xxx" likely missing TLD -> require 3 parts when starts with www
+      const minParts = parts[0] === "www" ? 3 : 2;
+
+      // protocol must be http/https/ftp, TLD must be bigger than one character
+      return (url.protocol === "http:" || url.protocol === "https:" || url.protocol === "ftp:") &&
+        parts.length >= minParts &&
+        parts[parts.length - 1].length >= 2;
+    } catch { return false; }
+  }
+
+  return {
+    message,
+    validate
+  };
+}

package/dist/runtime/composables/useSelection.d.ts

@@ -0,0 +1,13 @@
+export default function useSelection({ data, model, path, stateStore, stateful, targetProp, optionValue, autoSelectFirst, mode }: {
+    data: any;
+    model: any;
+    path: any;
+    stateStore: any;
+    stateful: any;
+    targetProp: any;
+    optionValue: any;
+    autoSelectFirst: any;
+    mode?: string | undefined;
+}): {
+    selected: import("vue").Ref<never[] | undefined, never[] | undefined>;
+};

package/dist/runtime/composables/useSelection.js

@@ -0,0 +1,94 @@
+import { ref, watch } from "vue";
+
+export default function useSelection({
+  data,
+  model,
+  path,
+  stateStore,
+  stateful,
+  targetProp,
+  optionValue,
+  autoSelectFirst,
+  mode = "single"
+}) {
+  const isMulti = mode === "multi";
+  const selected = ref(isMulti ? [] : undefined);
+
+  function getModel() {
+    if(isMulti) {
+      return targetProp
+        ? model.value?.map(selection => selection[targetProp])
+        : model.value;
+    }
+
+    return targetProp
+      ? model.value?.[targetProp]
+      : model.value;
+  }
+
+  function setModel(selected) {
+    let value = selected;
+
+    if(isMulti && !selected?.length) {
+      value = undefined;
+    }
+
+    if(stateful) {
+      stateStore[path] = value;
+    }
+
+    if(isMulti) {
+      if(arrayEquals(value, getModel())) { return; }
+
+      model.value = value
+        ? targetProp
+          ? value.map(item => ({ [targetProp]: item }))
+          : value
+        : undefined;
+
+      return;
+    }
+
+    model.value = value
+      ? targetProp
+        ? { [targetProp]: value }
+        : value
+      : undefined;
+  }
+
+  watch(
+    [() => data, getModel],
+    ([_data, _model]) => {
+      if(!_data) { return; }
+
+      selected.value = stateful ? (stateStore[path] ?? _model) : _model ?? null;
+
+      if(!isMulti && autoSelectFirst && isEmpty(selected.value) && _data.length) {
+        selected.value = optionValue ? _data[0][optionValue] : _data[0];
+      }
+
+      if((stateful || autoSelectFirst) && !hasChanges(selected.value)) {
+        setModel(selected.value);
+      }
+    },
+    { immediate: true }
+  );
+
+  watch(selected, setModel);
+
+  function isEmpty(value) {
+    return value === null || value === undefined;
+  }
+
+  function arrayEquals(a, b) {
+    return a?.length === b?.length && a?.every((value, index) => value === b[index]);
+  }
+
+  function hasChanges(value) {
+    return isMulti ? arrayEquals(value, getModel()) : value === getModel();
+  }
+
+  return {
+    selected
+  };
+}

package/dist/types.d.mts

@@ -1,3 +1,3 @@
 export { default } from './module.mjs'
 
-export { type CacheOptions, type Components, type Composables, type ModuleOptions, type NavLinkOptions, type PageOptions, type Plugins, type PrimeVueOptions, type RetryOptions, type ScreenOptions, type UseBreakpointsOptions, type UseDataFetcherOptions, type UseFormatOptions } from './module.mjs'
+export { type CacheOptions, type Components, type Composables, type InputMoneyOptions, type ModuleOptions, type NavLinkOptions, type PageOptions, type Plugins, type PrimeVueOptions, type RetryOptions, type ScreenOptions, type UseBreakpointsOptions, type UseDataFetcherOptions, type UseFormatOptions } from './module.mjs'