sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseBelongsTo.vue

@@ -1,193 +1,193 @@
-<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"
-    :empty-option-label="emptyOptionLabel"
-    :visible-focus="visibleFocus"
-    :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 { PropType } from 'vue';
-import { AxiosResponse } from 'axios';
-import { config } from '@/index';
-import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import { Option, SelectConfiguration } from '@/types';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, Number, null] as PropType<
-      string | number | null | undefined
-    >,
-  },
-  url: {
-    required: true,
-    type: String,
-  },
-  showRouteUrl: {
-    default: undefined,
-    type: Function as PropType<((id: string | number) => string) | undefined>,
-  },
-  primaryKey: {
-    default: 'id',
-    type: String,
-  },
-  field: {
-    required: true,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  currentModel: {
-    default: null,
-    type: [Object, null] as PropType<Option | null>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  inline: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
-  },
-  dropdownShow: {
-    default: 'focus',
-    type: String as PropType<'focus' | 'always'>,
-  },
-  showModelValue: {
-    default: true,
-    type: Boolean,
-  },
-  visibleFocus: {
-    default: true,
-    type: Boolean,
-  },
-  showEmptyOption: {
-    default: false,
-    type: Boolean,
-  },
-  emptyOptionLabel: {
-    default: undefined,
-    type: String,
-  },
-  select: {
-    default: undefined,
-    type: Object as PropType<SelectConfiguration | undefined>,
-  },
-});
-
-const http = config.http;
-
-const emit = defineEmits(['update:modelValue']);
-
-const autocompleteFetch = ref<InstanceType<
-  typeof BaseAutocompleteFetch
-> | null>(null);
-
-const model = ref(props.currentModel);
-
-watch(
-  () => props.currentModel,
-  (newValue, oldValue) => {
-    model.value = newValue;
-  },
-  { deep: true }
-);
-
-watch(
-  () => props.modelValue,
-  (newValue, oldValue) => {
-    if (!props.modelValue) {
-      model.value = null;
-      return;
-    }
-
-    if (newValue == oldValue) {
-      return;
-    }
-
-    if (props.showRouteUrl == null) {
-      return;
-    }
-
-    http
-      .get(props.showRouteUrl(props.modelValue))
-      .then((response: AxiosResponse) => {
-        model.value = response.data.data;
-      })
-      .catch((e: Error) => e);
-  },
-  { immediate: true }
-);
-
-function onUpdate(newModel: Option | null) {
-  if (!newModel) {
-    model.value = null;
-    emit('update:modelValue', null);
-  } else {
-    model.value = newModel;
-    emit('update:modelValue', newModel[props.primaryKey]);
-  }
-}
-
-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"
+    :empty-option-label="emptyOptionLabel"
+    :visible-focus="visibleFocus"
+    :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 { PropType } from 'vue';
+import { AxiosResponse } from 'axios';
+import { config } from '@/index';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import { Option, SelectConfiguration } from '@/types';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Number, null] as PropType<
+      string | number | null | undefined
+    >,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  showRouteUrl: {
+    default: undefined,
+    type: Function as PropType<((id: string | number) => string) | undefined>,
+  },
+  primaryKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  currentModel: {
+    default: null,
+    type: [Object, null] as PropType<Option | null>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  inline: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+  },
+  dropdownShow: {
+    default: 'focus',
+    type: String as PropType<'focus' | 'always'>,
+  },
+  showModelValue: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default: undefined,
+    type: String,
+  },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
+});
+
+const http = config.http;
+
+const emit = defineEmits(['update:modelValue']);
+
+const autocompleteFetch = ref<InstanceType<
+  typeof BaseAutocompleteFetch
+> | null>(null);
+
+const model = ref(props.currentModel);
+
+watch(
+  () => props.currentModel,
+  (newValue, oldValue) => {
+    model.value = newValue;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modelValue,
+  (newValue, oldValue) => {
+    if (!props.modelValue) {
+      model.value = null;
+      return;
+    }
+
+    if (newValue == oldValue) {
+      return;
+    }
+
+    if (props.showRouteUrl == null) {
+      return;
+    }
+
+    http
+      .get(props.showRouteUrl(props.modelValue))
+      .then((response: AxiosResponse) => {
+        model.value = response.data.data;
+      })
+      .catch((e: Error) => e);
+  },
+  { immediate: true }
+);
+
+function onUpdate(newModel: Option | null) {
+  if (!newModel) {
+    model.value = null;
+    emit('update:modelValue', null);
+  } else {
+    model.value = newModel;
+    emit('update:modelValue', newModel[props.primaryKey]);
+  }
+}
+
+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: 'Components/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,45 +1,45 @@
-import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
-
-const breadcrumbs = [
-  {
-    label: 'Home',
-    icon: 'heroicons:home-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: {},
-  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 font-light 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-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: {},
+  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 font-light text-xs p-3 rounded text-white">{{ breadcrumbs }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};