sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseBelongsToFetch.stories.js

@@ -1,223 +1,223 @@
-import BaseBelongsToFetch from "./BaseBelongsToFetch.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { createFieldStory, sizes } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseBelongsToFetch",
-  component: BaseBelongsToFetch,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-  args: {
-    url: "https://faker.witify.io/api/todos",
-    field: "name",
-    primaryKey: "id",
-    showRouteUrl(id) {
-      return `https://faker.witify.io/api/todos/${id}`;
-    },
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseBelongsToFetch, ShowValue },
-  setup() {
-    const value = ref(4);
-    return { args, value };
-  },
-  template: `
-      <BaseBelongsToFetch v-model="value" v-bind="args"></BaseBelongsToFetch>
-      <ShowValue :value="value" />
-    `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const LabelFunction = Template.bind({});
-LabelFunction.args = {
-  labelKey: (option) => {
-    return option.name + " (" + option.uuid + ")";
-  },
-};
-
-export const AlwaysShowDropdown = Template.bind({});
-AlwaysShowDropdown.args = {
-  inline: true,
-  dropdownShow: "always",
-};
-
-export const NoFocus = Template.bind({});
-NoFocus.args = {
-  visibleFocus: false,
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  inline: true,
-};
-
-export const ShowEmptyOption = Template.bind({});
-ShowEmptyOption.args = {
-  showEmptyOption: true,
-  emptyOptionLabel: "No Jedi",
-};
-
-export const Sizes = (args) => ({
-  components: { BaseBelongsToFetch },
-  setup() {
-    const value = ref(null);
-    return { args, sizes, value };
-  },
-  template: `
-  <div v-for="size in sizes" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
-    <BaseBelongsToFetch v-model="value" v-bind="args" :size="size"></BaseBelongsToFetch>
-  </div>
-  `,
-});
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const SlotOption = (args) => {
-  return {
-    components: { BaseBelongsToFetch },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <BaseBelongsToFetch
-        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.description }}</p>
-          </div>
-        </template>
-      </BaseBelongsToFetch>
-    `,
-  };
-};
-
-export const SlotFooter = (args) => {
-  return {
-    components: { BaseBelongsToFetch },
-    setup() {
-      const value = ref(null);
-      function onClick() {
-        setTimeout(() => {
-          alert(1);
-        }, 150);
-      }
-      return { args, value, onClick };
-    },
-    template: `
-      <BaseBelongsToFetch
-        v-model="value"
-        v-bind="args"
-      >
-        <template #footer>
-          <div class="text-center p-2 border-t">
-            <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
-          </div>
-        </template>
-      </BaseBelongsToFetch>
-    `,
-  };
-};
-
-export const SlotEmpty = (args) => {
-  return {
-    components: { BaseBelongsToFetch },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <BaseBelongsToFetch
-        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 p-6">Start your search... 🔎</div>
-          </div>
-        </template>
-      </BaseBelongsToFetch>
-    `,
-  };
-};
-
-export const WithSelect = (args) => {
-  return {
-    components: { BaseBelongsToFetch, ShowValue },
-    setup() {
-      const selected = ref(null);
-      const value = ref(5);
-
-      const select = {
-        options: [
-          { label: "All", value: "all" },
-          { label: "Personal", value: "personal" },
-          { label: "Work", value: "work" },
-          { label: "Family", value: "family" },
-        ],
-        labelKey: "label",
-        valueKey: "value",
-        onChange: (option) => {
-          selected.value = option.value;
-        },
-      };
-
-      const url = computed(() => {
-        if (selected.value == "all" || !selected.value) {
-          return "https://faker.witify.io/api/todos";
-        }
-        return "https://faker.witify.io/api/todos" + "?type=" + selected.value;
-      });
-
-      return { args, value, url, selected, select };
-    },
-    template: `
-  <BaseBelongsToFetch
-    v-model="value"
-    v-bind="args"
-    :url="url"
-    :select="select"
-  >
-  </BaseBelongsToFetch>
-
-  <div class="mb-2"></div>
-
-  <p class="text-xs mb-0">Selection</p>
-  <ShowValue class="mt-0 mb-2" :value="selected" />
-  
-  <p class="text-xs mb-0">Model Value</p>
-  <ShowValue class="mt-0" :value="value" />
-`,
-  };
-};
-
-export const Field = createFieldStory({
-  component: BaseBelongsToFetch,
-  componentName: "BaseBelongsToFetch",
-  label: "Article",
-});
+import BaseBelongsToFetch from "./BaseBelongsToFetch.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseBelongsToFetch",
+  component: BaseBelongsToFetch,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+  args: {
+    url: "https://faker.witify.io/api/todos",
+    field: "name",
+    primaryKey: "id",
+    showRouteUrl(id) {
+      return `https://faker.witify.io/api/todos/${id}`;
+    },
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseBelongsToFetch, ShowValue },
+  setup() {
+    const value = ref(4);
+    return { args, value };
+  },
+  template: `
+      <BaseBelongsToFetch v-model="value" v-bind="args"></BaseBelongsToFetch>
+      <ShowValue :value="value" />
+    `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.name + " (" + option.uuid + ")";
+  },
+};
+
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: "always",
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const ShowEmptyOption = Template.bind({});
+ShowEmptyOption.args = {
+  showEmptyOption: true,
+  emptyOptionLabel: "No Jedi",
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBelongsToFetch },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBelongsToFetch v-model="value" v-bind="args" :size="size"></BaseBelongsToFetch>
+  </div>
+  `,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsToFetch
+        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.description }}</p>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      function onClick() {
+        setTimeout(() => {
+          alert(1);
+        }, 150);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+      <BaseBelongsToFetch
+        v-model="value"
+        v-bind="args"
+      >
+        <template #footer>
+          <div class="text-center p-2 border-t">
+            <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsToFetch
+        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 p-6">Start your search... 🔎</div>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const WithSelect = (args) => {
+  return {
+    components: { BaseBelongsToFetch, ShowValue },
+    setup() {
+      const selected = ref(null);
+      const value = ref(5);
+
+      const select = {
+        options: [
+          { label: "All", value: "all" },
+          { label: "Personal", value: "personal" },
+          { label: "Work", value: "work" },
+          { label: "Family", value: "family" },
+        ],
+        labelKey: "label",
+        valueKey: "value",
+        onChange: (option) => {
+          selected.value = option.value;
+        },
+      };
+
+      const url = computed(() => {
+        if (selected.value == "all" || !selected.value) {
+          return "https://faker.witify.io/api/todos";
+        }
+        return "https://faker.witify.io/api/todos" + "?type=" + selected.value;
+      });
+
+      return { args, value, url, selected, select };
+    },
+    template: `
+  <BaseBelongsToFetch
+    v-model="value"
+    v-bind="args"
+    :url="url"
+    :select="select"
+  >
+  </BaseBelongsToFetch>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
+export const Field = createFieldStory({
+  component: BaseBelongsToFetch,
+  componentName: "BaseBelongsToFetch",
+  label: "Article",
+});