sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseBelongsToFetch.vue

@@ -1,213 +1,213 @@
-<template>
-  <BaseAutocompleteFetch
-    ref="autocompleteFetch"
-    :model-value="model"
-    :url="url"
-    :disabled="disabled"
-    :name="name"
-    :placeholder="placeholder"
-    :required="required"
-    :value-key="primaryKey"
-    :label-key="field"
-    :has-error="hasError"
-    :inline="inline"
-    :size="size"
-    :dropdown-show="dropdownShow"
-    :show-model-value="showModelValue"
-    :show-empty-option="showEmptyOption"
-    :show-remove-button="showRemoveButton"
-    :empty-option-label="emptyOptionLabel"
-    :visible-focus="visibleFocus"
-    :focus-on-mount="focusOnMount"
-    :select="select"
-    @update:model-value="onUpdate"
-  >
-    <template #option="optionProps">
-      <slot
-        name="option"
-        v-bind="optionProps"
-      />
-    </template>
-    <template #empty="emptyProps">
-      <slot
-        name="empty"
-        v-bind="emptyProps"
-      />
-    </template>
-    <template #footer="footerProps">
-      <slot
-        name="footer"
-        v-bind="footerProps"
-      />
-    </template>
-  </BaseAutocompleteFetch>
-</template>
-
-<script lang="ts" setup>
-import { AxiosResponse } from 'axios';
-import { config } from '@/index';
-import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import { RawOption, SelectConfiguration } from '@/types';
-import { Size } from '@/utils/sizes';
-import { debounce, isObject, uniqueId } from 'lodash';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | null;
-    url: string;
-    showRouteUrl?: (id: string | number) => string;
-    primaryKey?: string;
-    field: string | ((option: RawOption) => string);
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    placeholder?: string;
-    currentModel?: RawOption | null | undefined;
-    hasError?: boolean;
-    inline?: boolean;
-    size?: Size;
-    dropdownShow?: 'focus' | 'always';
-    showModelValue?: boolean;
-    visibleFocus?: boolean;
-    focusOnMount?: boolean;
-    showEmptyOption?: boolean;
-    showRemoveButton?: boolean;
-    emptyOptionLabel?: string;
-    select?: SelectConfiguration;
-  }>(),
-  {
-    modelValue: undefined,
-    showRouteUrl: undefined,
-    primaryKey: 'id',
-    required: false,
-    disabled: false,
-    name: undefined,
-    placeholder: undefined,
-    currentModel: undefined,
-    hasError: false,
-    inline: false,
-    size: undefined,
-    dropdownShow: 'focus',
-    showModelValue: true,
-    visibleFocus: true,
-    focusOnMount: false,
-    showEmptyOption: false,
-    showRemoveButton: true,
-    emptyOptionLabel: undefined,
-    select: undefined,
-  }
-);
-
-const http = config.http;
-
-const emit = defineEmits(['update:modelValue']);
-
-const autocompleteFetch = ref<InstanceType<
-  typeof BaseAutocompleteFetch
-> | null>(null);
-
-const model = ref<RawOption | null>(null);
-
-const ensureModelIsFilledWithRouteDebounced = debounce(ensureModelIsFilledWithRoute, 50);
-
-watch(
-  () => props.currentModel,
-  ensureModelIsFilled,
-);
-
-watch(
-  () => props.modelValue,
-  ensureModelIsFilled,
-);
-
-ensureModelIsFilled();
-
-function onUpdate(newModel: RawOption | null) {
-  if (!newModel) {
-    model.value = null;
-    emit('update:modelValue', null, null);
-  } else {
-    model.value = newModel;
-    emit('update:modelValue', newModel[props.primaryKey], newModel);
-  }
-}
-
-function ensureModelIsFilled() {
-
-  if (props.modelValue == null) {
-    model.value = null;
-    return;
-  }
-
-  const modelId = model.value ? model.value[props.primaryKey as never] : null;
-
-  // Current value is already set
-  if (props.modelValue == modelId) {
-    return;
-  }
-
-  // Try with current model
-  if (props.currentModel && props.currentModel[props.primaryKey as never] == props.modelValue) {
-    model.value = props.currentModel;
-    return;
-  }
-
-  // Try with show route
-
-  if (props.showRouteUrl == null) {
-    return;
-  }
-
-  ensureModelIsFilledWithRouteDebounced();
-}
-
-
-let ensureModelIsFilledWithRouteLastId = null as string | number | null;
-
-function ensureModelIsFilledWithRoute() {
-  if (props.modelValue == null) {
-    model.value = null;
-    return;
-  }
-
-  if (props.showRouteUrl == null) {
-    return;
-  }
-
-  const ensureModelIsFilledWithRouteCurrentId = uniqueId();
-  ensureModelIsFilledWithRouteLastId = ensureModelIsFilledWithRouteCurrentId;
-
-  http
-    .get(props.showRouteUrl(props.modelValue))
-    .then((response: AxiosResponse) => {
-
-      if (ensureModelIsFilledWithRouteLastId !== ensureModelIsFilledWithRouteCurrentId) {
-        return;
-      }
-
-      const data = response.data as Record<string, unknown>;
-
-      if (!isObject(data)) {
-        return;
-      }
-
-      if (data[props.primaryKey as never] == props.modelValue) {
-        model.value = data;
-        return;
-      }
-
-      if (isObject(data.data) && data.data[props.primaryKey as never] == props.modelValue) {
-        model.value = data.data;
-        return;
-      }
-    });
-}
-
-defineExpose({
-  focus: () => autocompleteFetch.value?.focus(),
-  blur: () => autocompleteFetch.value?.blur(),
-  open: () => autocompleteFetch.value?.open(),
-  close: () => autocompleteFetch.value?.close(),
-  setKeywords: (input: string) => autocompleteFetch.value?.setKeywords(input),
-});
-</script>
+<template>
+  <BaseAutocompleteFetch
+    ref="autocompleteFetch"
+    :model-value="model"
+    :url="url"
+    :disabled="disabled"
+    :name="name"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="primaryKey"
+    :label-key="field"
+    :has-error="hasError"
+    :inline="inline"
+    :size="size"
+    :dropdown-show="dropdownShow"
+    :show-model-value="showModelValue"
+    :show-empty-option="showEmptyOption"
+    :show-remove-button="showRemoveButton"
+    :empty-option-label="emptyOptionLabel"
+    :visible-focus="visibleFocus"
+    :focus-on-mount="focusOnMount"
+    :select="select"
+    @update:model-value="onUpdate"
+  >
+    <template #option="optionProps">
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
+    </template>
+    <template #empty="emptyProps">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
+    </template>
+    <template #footer="footerProps">
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
+    </template>
+  </BaseAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { AxiosResponse } from 'axios';
+import { config } from '@/index';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import { RawOption, SelectConfiguration } from '@/types';
+import { Size } from '@/utils/sizes';
+import { debounce, isObject, uniqueId } from 'lodash';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | null;
+    url: string;
+    showRouteUrl?: (id: string | number) => string;
+    primaryKey?: string;
+    field: string | ((option: RawOption) => string);
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    placeholder?: string;
+    currentModel?: RawOption | null | undefined;
+    hasError?: boolean;
+    inline?: boolean;
+    size?: Size;
+    dropdownShow?: 'focus' | 'always';
+    showModelValue?: boolean;
+    visibleFocus?: boolean;
+    focusOnMount?: boolean;
+    showEmptyOption?: boolean;
+    showRemoveButton?: boolean;
+    emptyOptionLabel?: string;
+    select?: SelectConfiguration;
+  }>(),
+  {
+    modelValue: undefined,
+    showRouteUrl: undefined,
+    primaryKey: 'id',
+    required: false,
+    disabled: false,
+    name: undefined,
+    placeholder: undefined,
+    currentModel: undefined,
+    hasError: false,
+    inline: false,
+    size: undefined,
+    dropdownShow: 'focus',
+    showModelValue: true,
+    visibleFocus: true,
+    focusOnMount: false,
+    showEmptyOption: false,
+    showRemoveButton: true,
+    emptyOptionLabel: undefined,
+    select: undefined,
+  }
+);
+
+const http = config.http;
+
+const emit = defineEmits(['update:modelValue']);
+
+const autocompleteFetch = ref<InstanceType<
+  typeof BaseAutocompleteFetch
+> | null>(null);
+
+const model = ref<RawOption | null>(null);
+
+const ensureModelIsFilledWithRouteDebounced = debounce(ensureModelIsFilledWithRoute, 50);
+
+watch(
+  () => props.currentModel,
+  ensureModelIsFilled,
+);
+
+watch(
+  () => props.modelValue,
+  ensureModelIsFilled,
+);
+
+ensureModelIsFilled();
+
+function onUpdate(newModel: RawOption | null) {
+  if (!newModel) {
+    model.value = null;
+    emit('update:modelValue', null, null);
+  } else {
+    model.value = newModel;
+    emit('update:modelValue', newModel[props.primaryKey], newModel);
+  }
+}
+
+function ensureModelIsFilled() {
+
+  if (props.modelValue == null) {
+    model.value = null;
+    return;
+  }
+
+  const modelId = model.value ? model.value[props.primaryKey as never] : null;
+
+  // Current value is already set
+  if (props.modelValue == modelId) {
+    return;
+  }
+
+  // Try with current model
+  if (props.currentModel && props.currentModel[props.primaryKey as never] == props.modelValue) {
+    model.value = props.currentModel;
+    return;
+  }
+
+  // Try with show route
+
+  if (props.showRouteUrl == null) {
+    return;
+  }
+
+  ensureModelIsFilledWithRouteDebounced();
+}
+
+
+let ensureModelIsFilledWithRouteLastId = null as string | number | null;
+
+function ensureModelIsFilledWithRoute() {
+  if (props.modelValue == null) {
+    model.value = null;
+    return;
+  }
+
+  if (props.showRouteUrl == null) {
+    return;
+  }
+
+  const ensureModelIsFilledWithRouteCurrentId = uniqueId();
+  ensureModelIsFilledWithRouteLastId = ensureModelIsFilledWithRouteCurrentId;
+
+  http
+    .get(props.showRouteUrl(props.modelValue))
+    .then((response: AxiosResponse) => {
+
+      if (ensureModelIsFilledWithRouteLastId !== ensureModelIsFilledWithRouteCurrentId) {
+        return;
+      }
+
+      const data = response.data as Record<string, unknown>;
+
+      if (!isObject(data)) {
+        return;
+      }
+
+      if (data[props.primaryKey as never] == props.modelValue) {
+        model.value = data;
+        return;
+      }
+
+      if (isObject(data.data) && data.data[props.primaryKey as never] == props.modelValue) {
+        model.value = data.data;
+        return;
+      }
+    });
+}
+
+defineExpose({
+  focus: () => autocompleteFetch.value?.focus(),
+  blur: () => autocompleteFetch.value?.blur(),
+  open: () => autocompleteFetch.value?.open(),
+  close: () => autocompleteFetch.value?.close(),
+  setKeywords: (input: string) => autocompleteFetch.value?.setKeywords(input),
+});
+</script>

package/src/components/BaseBoolean.stories.js

@@ -1,35 +1,35 @@
-import BaseBoolean from "./BaseBoolean.vue";
-
-export default {
-  title: "Data/BaseBoolean",
-  component: BaseBoolean,
-  argTypes: {
-    modelValue: {
-      control: { type: "boolean" },
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseBoolean },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseBoolean v-bind="args"></BaseBoolean>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const AllValues = (args) => ({
-  components: { BaseBoolean },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseBoolean :model-value="true"></BaseBoolean>
-    <BaseBoolean :model-value="false"></BaseBoolean>
-  `,
-});
+import BaseBoolean from "./BaseBoolean.vue";
+
+export default {
+  title: "Data/BaseBoolean",
+  component: BaseBoolean,
+  argTypes: {
+    modelValue: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBoolean },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBoolean v-bind="args"></BaseBoolean>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const AllValues = (args) => ({
+  components: { BaseBoolean },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBoolean :model-value="true"></BaseBoolean>
+    <BaseBoolean :model-value="false"></BaseBoolean>
+  `,
+});

package/src/components/BaseBoolean.vue

@@ -1,26 +1,26 @@
-<template>
-  <div
-    class="inline-flex h-5 w-5 items-center justify-center rounded-full"
-    :class="classes"
-  >
-    <div v-if="modelValue">
-      <BaseIcon icon="heroicons-solid:check" />
-    </div>
-    <div v-else>
-      <BaseIcon icon="heroicons-solid:x" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  modelValue?: boolean | string | number | null | undefined;
-}>();
-
-const classes = computed(() => {
-  if (props.modelValue) {
-    return 'text-white bg-green-500';
-  }
-  return 'text-white bg-red-500';
-});
-</script>
+<template>
+  <div
+    class="inline-flex h-5 w-5 items-center justify-center rounded-full"
+    :class="classes"
+  >
+    <div v-if="modelValue">
+      <BaseIcon icon="heroicons-solid:check" />
+    </div>
+    <div v-else>
+      <BaseIcon icon="heroicons-solid:x" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue?: boolean | string | number | null | undefined;
+}>();
+
+const classes = computed(() => {
+  if (props.modelValue) {
+    return 'text-white bg-green-500';
+  }
+  return 'text-white bg-red-500';
+});
+</script>

package/src/components/BaseBreadcrumbs.stories.js

@@ -1,50 +1,50 @@
-import BaseBreadcrumbs from "./BaseBreadcrumbs.vue";
-
-const breadcrumbs = [
-  {
-    label: "Home",
-    icon: "heroicons:home-20-solid",
-    to: "/",
-  },
-  {
-    label: "Users",
-    to: "/users",
-  },
-  {
-    label: "John Doe",
-    to: "/users/1",
-  },
-  {
-    label: "Very long title this is a very long title that will be truncated",
-    to: "/users/1/settings",
-  },
-];
-
-export default {
-  title: "Layout/BaseBreadcrumbs",
-  component: BaseBreadcrumbs,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["sm", "md"],
-    },
-  },
-  args: {
-    breadcrumbs: breadcrumbs,
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseBreadcrumbs },
-  setup() {
-    return { args, breadcrumbs };
-  },
-  template: `
-    <BaseBreadcrumbs v-bind="args"></BaseBreadcrumbs>
-
-    <pre class="mt-4 bg-slate-800 text-xs p-3 rounded text-white">{{ breadcrumbs }}</pre>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseBreadcrumbs from "./BaseBreadcrumbs.vue";
+
+const breadcrumbs = [
+  {
+    label: "Home",
+    icon: "heroicons:home-20-solid",
+    to: "/",
+  },
+  {
+    label: "Users",
+    to: "/users",
+  },
+  {
+    label: "John Doe",
+    to: "/users/1",
+  },
+  {
+    label: "Very long title this is a very long title that will be truncated",
+    to: "/users/1/settings",
+  },
+];
+
+export default {
+  title: "Layout/BaseBreadcrumbs",
+  component: BaseBreadcrumbs,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+    },
+  },
+  args: {
+    breadcrumbs: breadcrumbs,
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBreadcrumbs },
+  setup() {
+    return { args, breadcrumbs };
+  },
+  template: `
+    <BaseBreadcrumbs v-bind="args"></BaseBreadcrumbs>
+
+    <pre class="mt-4 bg-slate-800 text-xs p-3 rounded text-white">{{ breadcrumbs }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};