sprintify-ui 0.2.17 → 0.2.18

package/src/components/BaseHasMany.stories.js

@@ -1,189 +1,189 @@
-import BaseHasMany from './BaseHasMany.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, options } from '../../.storybook/utils';
-import BaseAppNotifications from './BaseAppNotifications.vue';
-
-export default {
-  title: 'Form/BaseHasMany',
-  component: BaseHasMany,
-  argTypes: {},
-  args: {
-    url: 'https://effettandem.com/api/content/articles',
-    field: 'title',
-    primaryKey: 'id',
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => {
-  return {
-    components: { BaseHasMany, ShowValue, BaseAppNotifications },
-    setup() {
-      const value = ref([]);
-      return { args, value };
-    },
-    template: `
-      <BaseHasMany
-        v-model="value"
-        v-bind="args"
-      ></BaseHasMany>
-      <ShowValue :value="value" />
-      <BaseAppNotifications />
-  `,
-  };
-};
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Disabled = (args) => {
-  return {
-    components: { BaseHasMany },
-    setup() {
-      const value = ref([]);
-      const currentModel = options[0];
-      return { args, value, currentModel };
-    },
-    template: `<BaseHasMany
-      v-bind="args"
-      v-model="value"
-      :current-models="[currentModel]"
-      :disabled="true"
-      primaryKey="value"
-      field="label"
-    ></BaseHasMany>`,
-  };
-};
-
-export const Maximum = Template.bind({});
-Maximum.args = {
-  max: 3,
-};
-
-export const SlotOption = (args) => {
-  return {
-    components: { BaseHasMany },
-    setup() {
-      const value = ref([]);
-      return { args, value };
-    },
-    template: `
-  <div class="mb-20">
-    <BaseHasMany
-      v-model="value"
-      v-bind="args"
-    >
-      <template #option="{ option, active, selected }">
-        <div
-          class="rounded px-2 py-1"
-          :class="{
-            'hover:bg-slate-100': !active && !selected,
-            'bg-slate-200 hover:bg-slate-300': active && !selected,
-            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
-          }"
-        >
-          <p class="text-sm font-medium">{{ option.title }}</p>
-          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
-        </div>
-      </template>
-    </BaseHasMany>
-  </div>
-  `,
-  };
-};
-
-export const SlotItem = (args) => {
-  return {
-    components: { BaseHasMany },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-    <BaseHasMany
-      v-model="value"
-      v-bind="args"
-    >
-      <template #items="{items, removeOption}">
-        <div
-          v-for="item in items"
-          :key="item"
-          class="p-0.5"
-        >
-          <div class="flex  items-center rounded border pl-2 py-1 bg-white">
-            <BaseIcon icon="heroicons:tag" class="mr-2 text-slate-500" />
-            <div>
-              {{ item.label }}
-            </div>
-
-            <button
-              type="button"
-              class="flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent pl-1 pr-3 text-xs outline-none"
-              @click=removeOption(item)
-            >
-              ✕
-            </button>
-          </div>
-        </div>
-      </template>
-    </BaseHasMany>
-  `,
-  };
-};
-
-export const SlotFooter = (args) => {
-  return {
-    components: { BaseHasMany },
-    setup() {
-      const value = ref([]);
-      function onClick() {
-        setTimeout(() => {
-          alert(1);
-        }, 300);
-      }
-      return { args, value, onClick };
-    },
-    template: `
-    <BaseHasMany
-      v-model="value"
-      v-bind="args"
-    >
-      <template #footer>
-        <div class="text-center p-2 border-t">
-          <button type="button" @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
-        </div>
-      </template>
-    </BaseHasMany>
-  `,
-  };
-};
-
-export const SlotEmpty = (args) => {
-  return {
-    components: { BaseHasMany },
-    setup() {
-      const value = ref([]);
-      return { args, value };
-    },
-    template: `
-    <BaseHasMany
-      v-model="value"
-      v-bind="args"
-    >
-      <template #empty="props">
-        <div>
-          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
-          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
-        </div>
-      </template>
-    </BaseHasMany>
-  `,
-  };
-};
-
-export const Field = createFieldStory({
-  component: BaseHasMany,
-  componentName: 'BaseHasMany',
-  label: 'Name',
-});
+import BaseHasMany from './BaseHasMany.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory, options } from '../../.storybook/utils';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+
+export default {
+  title: 'Form/BaseHasMany',
+  component: BaseHasMany,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    field: 'title',
+    primaryKey: 'id',
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseHasMany, ShowValue, BaseAppNotifications },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+      <BaseHasMany
+        v-model="value"
+        v-bind="args"
+      ></BaseHasMany>
+      <ShowValue :value="value" />
+      <BaseAppNotifications />
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      const currentModel = options[0];
+      return { args, value, currentModel };
+    },
+    template: `<BaseHasMany
+      v-bind="args"
+      v-model="value"
+      :current-models="[currentModel]"
+      :disabled="true"
+      primaryKey="value"
+      field="label"
+    ></BaseHasMany>`,
+  };
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseHasMany
+      v-model="value"
+      v-bind="args"
+    >
+      <template #option="{ option, active, selected }">
+        <div
+          class="rounded px-2 py-1"
+          :class="{
+            'hover:bg-slate-100': !active && !selected,
+            'bg-slate-200 hover:bg-slate-300': active && !selected,
+            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+          }"
+        >
+          <p class="text-sm font-medium">{{ option.title }}</p>
+          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+        </div>
+      </template>
+    </BaseHasMany>
+  </div>
+  `,
+  };
+};
+
+export const SlotItem = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseHasMany
+      v-model="value"
+      v-bind="args"
+    >
+      <template #items="{items, removeOption}">
+        <div
+          v-for="item in items"
+          :key="item"
+          class="p-0.5"
+        >
+          <div class="flex  items-center rounded border pl-2 py-1 bg-white">
+            <BaseIcon icon="heroicons:tag" class="mr-2 text-slate-500" />
+            <div>
+              {{ item.label }}
+            </div>
+
+            <button
+              type="button"
+              class="flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent pl-1 pr-3 text-xs outline-none"
+              @click=removeOption(item)
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      </template>
+    </BaseHasMany>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        setTimeout(() => {
+          alert(1);
+        }, 300);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseHasMany
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-2 border-t">
+          <button type="button" @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseHasMany>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseHasMany
+      v-model="value"
+      v-bind="args"
+    >
+      <template #empty="props">
+        <div>
+          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
+          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
+        </div>
+      </template>
+    </BaseHasMany>
+  `,
+  };
+};
+
+export const Field = createFieldStory({
+  component: BaseHasMany,
+  componentName: 'BaseHasMany',
+  label: 'Name',
+});

package/src/components/BaseHasMany.vue

@@ -1,137 +1,137 @@
-<template>
-  <BaseTagAutocompleteFetch
-    ref="tagAutocompleteFetch"
-    :model-value="models"
-    :url="url"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :required="required"
-    :value-key="primaryKey"
-    :label-key="field"
-    :has-error="hasError"
-    :query-key="queryKey"
-    :max="max"
-    @update:model-value="onUpdate"
-  >
-    <template #items="itemProps">
-      <slot
-        name="items"
-        v-bind="itemProps"
-      />
-    </template>
-
-    <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>
-  </BaseTagAutocompleteFetch>
-</template>
-
-<script lang="ts" setup>
-import { isEqual } from 'lodash';
-import { Option } from '@/types';
-import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [Array, null, undefined] as PropType<string[] | null | undefined>,
-  },
-  url: {
-    required: true,
-    type: String,
-  },
-  primaryKey: {
-    default: 'id',
-    type: String,
-  },
-  field: {
-    required: true,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  queryKey: {
-    default: 'search',
-    type: String,
-  },
-  currentModels: {
-    default() {
-      return [];
-    },
-    type: Array as PropType<Option[]>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const tagAutocompleteFetch = ref<InstanceType<
-  typeof BaseTagAutocompleteFetch
-> | null>(null);
-
-const models = ref(props.currentModels);
-
-watch(
-  () => props.currentModels,
-  (newValue, oldValue) => {
-    if (isEqual(newValue, oldValue)) {
-      return;
-    }
-
-    models.value = newValue;
-  },
-  { deep: true }
-);
-
-function onUpdate(newModels: Option[]) {
-  models.value = newModels;
-  emit(
-    'update:modelValue',
-    newModels.map((m) => m[props.primaryKey])
-  );
-}
-
-defineExpose({
-  focus: () => tagAutocompleteFetch.value?.focus(),
-  blur: () => tagAutocompleteFetch.value?.blur(),
-  open: () => tagAutocompleteFetch.value?.open(),
-  close: () => tagAutocompleteFetch.value?.close(),
-  setKeywords: (input: string) =>
-    tagAutocompleteFetch.value?.setKeywords(input),
-});
-</script>
+<template>
+  <BaseTagAutocompleteFetch
+    ref="tagAutocompleteFetch"
+    :model-value="models"
+    :url="url"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="primaryKey"
+    :label-key="field"
+    :has-error="hasError"
+    :query-key="queryKey"
+    :max="max"
+    @update:model-value="onUpdate"
+  >
+    <template #items="itemProps">
+      <slot
+        name="items"
+        v-bind="itemProps"
+      />
+    </template>
+
+    <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>
+  </BaseTagAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { isEqual } from 'lodash';
+import { Option } from '@/types';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Array, null, undefined] as PropType<string[] | null | undefined>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  primaryKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+  currentModels: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Option[]>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const tagAutocompleteFetch = ref<InstanceType<
+  typeof BaseTagAutocompleteFetch
+> | null>(null);
+
+const models = ref(props.currentModels);
+
+watch(
+  () => props.currentModels,
+  (newValue, oldValue) => {
+    if (isEqual(newValue, oldValue)) {
+      return;
+    }
+
+    models.value = newValue;
+  },
+  { deep: true }
+);
+
+function onUpdate(newModels: Option[]) {
+  models.value = newModels;
+  emit(
+    'update:modelValue',
+    newModels.map((m) => m[props.primaryKey])
+  );
+}
+
+defineExpose({
+  focus: () => tagAutocompleteFetch.value?.focus(),
+  blur: () => tagAutocompleteFetch.value?.blur(),
+  open: () => tagAutocompleteFetch.value?.open(),
+  close: () => tagAutocompleteFetch.value?.close(),
+  setKeywords: (input: string) =>
+    tagAutocompleteFetch.value?.setKeywords(input),
+});
+</script>