sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseFieldI18n.stories.js

@@ -1,38 +1,38 @@
-import BaseFieldI18n from './BaseFieldI18n.vue';
-import BaseForm from './BaseForm.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseFieldI18n',
-  component: BaseFieldI18n,
-  decorators: [
-    (story) => ({
-      components: { story, BaseForm },
-      template: `
-      <BaseForm method="post" url="https://faker.witify.io/api/todos/422" :data="{}">
-        <story/>
-        <button type="submit" class="btn btn-primary mt-5">Submit</button>
-      </BaseForm>`,
-    }),
-  ],
-  args: {
-    component: 'BaseInput',
-    required: true,
-    name: 'name',
-    label: 'Name',
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseFieldI18n, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseFieldI18n v-model="value" v-bind="args" class="w-full"></BaseFieldI18n>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
+import BaseFieldI18n from './BaseFieldI18n.vue';
+import BaseForm from './BaseForm.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseFieldI18n',
+  component: BaseFieldI18n,
+  decorators: [
+    (story) => ({
+      components: { story, BaseForm },
+      template: `
+      <BaseForm method="post" url="https://faker.witify.io/api/todos/422" :data="{}">
+        <story/>
+        <button type="submit" class="btn btn-primary mt-5">Submit</button>
+      </BaseForm>`,
+    }),
+  ],
+  args: {
+    component: 'BaseInput',
+    required: true,
+    name: 'name',
+    label: 'Name',
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseFieldI18n, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseFieldI18n v-model="value" v-bind="args" class="w-full"></BaseFieldI18n>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});

package/src/components/BaseFieldI18n.vue

@@ -1,162 +1,162 @@
-<template>
-  <div :data-name="nameInternal">
-    <div class="space-y-2">
-      <div v-for="(locale, key) in localesInternal" :key="key">
-        <BaseField
-          :name="`${nameInternal}.${key}`"
-          :required="requiredInternal"
-          :label="getLabel(locale)"
-        >
-          <BaseInput
-            v-if="component == 'BaseInput'"
-            :model-value="formattedValue[key] + ''"
-            class="w-full bg-white"
-            v-bind="componentProps"
-            @update:model-value="onInput($event, key + '')"
-          />
-          <BaseTextarea
-            v-else-if="component == 'BaseTextarea'"
-            :model-value="formattedValue[key] + ''"
-            :required="requiredInternal"
-            :name="`${nameInternal}.${key}`"
-            class="w-full bg-white"
-            v-bind="componentProps"
-            @update:model-value="onInput($event, key + '')"
-          />
-        </BaseField>
-      </div>
-    </div>
-    <BaseAlert v-if="globalErrorMessage" class="mt-3" bordered color="danger">
-      {{ globalErrorMessage }}
-    </BaseAlert>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Locales } from '@/types';
-import { get, isPlainObject } from 'lodash';
-import objectHash from 'object-hash';
-import { PropType } from 'vue';
-import { config } from '..';
-import { useField } from '@/composables/field';
-import BaseInput from './BaseInput.vue';
-import BaseTextarea from './BaseTextarea.vue';
-import BaseField from './BaseField.vue';
-import BaseAlert from './BaseAlert.vue';
-
-defineComponent({
-  components: {
-    BaseInput,
-    BaseTextarea,
-  },
-});
-
-type Value = { [locale: string]: string | number | boolean };
-
-const props = defineProps({
-  modelValue: {
-    default: null,
-    type: [Object, null] as PropType<Value | null>,
-  },
-  locales: {
-    default: undefined,
-    type: Object as PropType<Locales>,
-  },
-  component: {
-    default: 'BaseInput',
-    type: String as PropType<'BaseInput' | 'BaseTextarea'>,
-  },
-  componentProps: {
-    default: undefined,
-    type: Object,
-  },
-  defaultValue: {
-    default: '',
-    type: [String, Boolean, Number] as PropType<string | boolean | number>,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  label: {
-    default: undefined,
-    type: String,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { nameInternal, requiredInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const getErrorMessageByName = inject(
-  'form:getErrorMessageByName',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (name: string) => {
-    return null;
-  }
-) as (name: string) => string | null | undefined;
-
-const colors = ref(['#10b981', '#06b6d4', '#a855f7']);
-
-const localesInternal = computed((): Locales => {
-  if (props.locales) {
-    return props.locales;
-  }
-  return config.locales;
-});
-
-const formattedValue = computed((): Value => {
-  // Get current value
-  let value = {} as Value;
-  if (props.modelValue && isPlainObject(props.modelValue)) {
-    value = props.modelValue as Value;
-  }
-  // Fill missing locales
-  Object.keys(localesInternal.value).forEach((locale) => {
-    const currentValue = get(props.modelValue, locale);
-    if (!currentValue) {
-      value[locale] = props.defaultValue;
-    }
-  });
-  return value;
-});
-
-// If formatted value is different, send event to parent
-if (
-  !props.modelValue ||
-  objectHash(formattedValue.value) !== objectHash(props.modelValue)
-) {
-  const newFormattedValue = formattedValue.value;
-  emit('update:modelValue', newFormattedValue);
-}
-
-function onInput(value: string, locale: string) {
-  const newFormattedValue = formattedValue.value;
-  newFormattedValue[locale] = value;
-  emit('update:modelValue', newFormattedValue);
-}
-
-function getLabel(locale: string): string | undefined {
-  if (!props.label) {
-    return undefined;
-  }
-  return `${props.label} (${locale})`;
-}
-
-const globalErrorMessage = computed(() => {
-  return getErrorMessageByName(nameInternal.value);
-});
-</script>
+<template>
+  <div :data-name="nameInternal">
+    <div class="space-y-2">
+      <div v-for="(locale, key) in localesInternal" :key="key">
+        <BaseField
+          :name="`${nameInternal}.${key}`"
+          :required="requiredInternal"
+          :label="getLabel(locale)"
+        >
+          <BaseInput
+            v-if="component == 'BaseInput'"
+            :model-value="formattedValue[key] + ''"
+            class="w-full bg-white"
+            v-bind="componentProps"
+            @update:model-value="onInput($event, key + '')"
+          />
+          <BaseTextarea
+            v-else-if="component == 'BaseTextarea'"
+            :model-value="formattedValue[key] + ''"
+            :required="requiredInternal"
+            :name="`${nameInternal}.${key}`"
+            class="w-full bg-white"
+            v-bind="componentProps"
+            @update:model-value="onInput($event, key + '')"
+          />
+        </BaseField>
+      </div>
+    </div>
+    <BaseAlert v-if="globalErrorMessage" class="mt-3" bordered color="danger">
+      {{ globalErrorMessage }}
+    </BaseAlert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Locales } from '@/types';
+import { get, isPlainObject } from 'lodash';
+import objectHash from 'object-hash';
+import { PropType } from 'vue';
+import { config } from '..';
+import { useField } from '@/composables/field';
+import BaseInput from './BaseInput.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseField from './BaseField.vue';
+import BaseAlert from './BaseAlert.vue';
+
+defineComponent({
+  components: {
+    BaseInput,
+    BaseTextarea,
+  },
+});
+
+type Value = { [locale: string]: string | number | boolean };
+
+const props = defineProps({
+  modelValue: {
+    default: null,
+    type: [Object, null] as PropType<Value | null>,
+  },
+  locales: {
+    default: undefined,
+    type: Object as PropType<Locales>,
+  },
+  component: {
+    default: 'BaseInput',
+    type: String as PropType<'BaseInput' | 'BaseTextarea'>,
+  },
+  componentProps: {
+    default: undefined,
+    type: Object,
+  },
+  defaultValue: {
+    default: '',
+    type: [String, Boolean, Number] as PropType<string | boolean | number>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  label: {
+    default: undefined,
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const getErrorMessageByName = inject(
+  'form:getErrorMessageByName',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (name: string) => {
+    return null;
+  }
+) as (name: string) => string | null | undefined;
+
+const colors = ref(['#10b981', '#06b6d4', '#a855f7']);
+
+const localesInternal = computed((): Locales => {
+  if (props.locales) {
+    return props.locales;
+  }
+  return config.locales;
+});
+
+const formattedValue = computed((): Value => {
+  // Get current value
+  let value = {} as Value;
+  if (props.modelValue && isPlainObject(props.modelValue)) {
+    value = props.modelValue as Value;
+  }
+  // Fill missing locales
+  Object.keys(localesInternal.value).forEach((locale) => {
+    const currentValue = get(props.modelValue, locale);
+    if (!currentValue) {
+      value[locale] = props.defaultValue;
+    }
+  });
+  return value;
+});
+
+// If formatted value is different, send event to parent
+if (
+  !props.modelValue ||
+  objectHash(formattedValue.value) !== objectHash(props.modelValue)
+) {
+  const newFormattedValue = formattedValue.value;
+  emit('update:modelValue', newFormattedValue);
+}
+
+function onInput(value: string, locale: string) {
+  const newFormattedValue = formattedValue.value;
+  newFormattedValue[locale] = value;
+  emit('update:modelValue', newFormattedValue);
+}
+
+function getLabel(locale: string): string | undefined {
+  if (!props.label) {
+    return undefined;
+  }
+  return `${props.label} (${locale})`;
+}
+
+const globalErrorMessage = computed(() => {
+  return getErrorMessageByName(nameInternal.value);
+});
+</script>

package/src/components/BaseFilePicker.stories.js

@@ -1,78 +1,78 @@
-import BaseFilePicker from './BaseFilePicker.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-
-export default {
-  title: 'Form/BaseFilePicker',
-  component: BaseFilePicker,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
-  setup() {
-    const file = ref(null);
-
-    function onSelect(f) {
-      file.value = f;
-    }
-
-    return { args, file, onSelect };
-  },
-  template: `
-    <BaseFilePicker v-bind="args" @select="onSelect">
-      <template #default="{ dragging, disabled }">
-        <div
-          class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
-          :class="[
-            dragging ? 'bg-slate-100' : 'bg-white',
-            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
-          ]"
-        >
-          <div class="rounded-full bg-slate-200 p-2">
-            <BaseIcon
-              icon="heroicons:arrow-up-on-square"
-              class="h-6 w-6"
-              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
-            />
-          </div>
-          <div class="text-left">
-            <p 
-              class="mb-0 text-sm font-medium leading-tight" 
-              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
-            >
-              {{ $t("sui.drop_or_click_to_upload") }}
-            </p>
-            <div class="mt-1">
-              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
-              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </BaseFilePicker>
-
-    <ShowValue :value="file" />
-
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const MaxSize = Template.bind({});
-MaxSize.args = {
-  maxSize: 1024 * 10, // 10kb
-};
-
-export const FileExtension = Template.bind({});
-FileExtension.args = {
-  acceptedExtensions: ['xlsx', 'xls'],
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
+import BaseFilePicker from './BaseFilePicker.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+
+export default {
+  title: 'Form/BaseFilePicker',
+  component: BaseFilePicker,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
+  setup() {
+    const file = ref(null);
+
+    function onSelect(f) {
+      file.value = f;
+    }
+
+    return { args, file, onSelect };
+  },
+  template: `
+    <BaseFilePicker v-bind="args" @select="onSelect">
+      <template #default="{ dragging, disabled }">
+        <div
+          class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
+          :class="[
+            dragging ? 'bg-slate-100' : 'bg-white',
+            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
+          ]"
+        >
+          <div class="rounded-full bg-slate-200 p-2">
+            <BaseIcon
+              icon="heroicons:arrow-up-on-square"
+              class="h-6 w-6"
+              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
+            />
+          </div>
+          <div class="text-left">
+            <p 
+              class="mb-0 text-sm font-medium leading-tight" 
+              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
+            >
+              {{ $t("sui.drop_or_click_to_upload") }}
+            </p>
+            <div class="mt-1">
+              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
+              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </BaseFilePicker>
+
+    <ShowValue :value="file" />
+
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 1024 * 10, // 10kb
+};
+
+export const FileExtension = Template.bind({});
+FileExtension.args = {
+  acceptedExtensions: ['xlsx', 'xls'],
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};