sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseDataIterator.stories.js

@@ -1,292 +1,292 @@
-import BaseDataIterator from "./BaseDataIterator.vue";
-import BaseSelect from "./BaseSelect.vue";
-import BaseCard from "./BaseCard.vue";
-import BaseCardRow from "./BaseCardRow.vue";
-import BaseLoadingCover from "./BaseLoadingCover.vue";
-import { options, sizes } from "../../.storybook/utils";
-import { computed } from "vue";
-
-export default {
-  title: "Data/BaseDataIterator",
-  component: BaseDataIterator,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-    filtersPosition: {
-      control: { type: "select" },
-      options: ["top", "section"],
-    },
-  },
-  args: {
-    url: "https://faker.witify.io/api/todos",
-    urlQuery: {
-      paginate: '0',
-    },
-    history: false,
-  },
-};
-
-const template = `
-<BaseDataIterator v-bind="args" :url-query="urlQuery">
-  <template #default="{ items, loading }">
-    <div class="relative">
-      <div class="space-y-1.5">
-        <a
-          v-for="item in items"
-          :key="item.id"
-          :href="item.website_url"
-          target="_blank"
-          class="block group"
-        >
-          <BaseCard class="group-hover:bg-slate-100">
-            <BaseCardRow size="sm">
-              <div class="font-medium text-slate-900">
-                {{ item.title }}
-              </div>
-              <p class="text-xs leading-tight text-slate-500">
-                {{ item.subtitle }}
-              </p>
-            </BaseCardRow>
-          </BaseCard>
-        </a>
-      </div>
-
-      <BaseLoadingCover
-        v-show="loading"
-        size="lg"
-        backdropClass="bg-white bg-opacity-50"
-      >
-      </BaseLoadingCover>
-    </div>
-  </template>
-
-  <template #filters="{ query, updateQueryValue }">
-    <div class="space-y-3">
-      <div>
-        <p class="mb-1 text-sm">
-          Type
-        </p>
-        <BaseSelect
-          :model-value="query.type ?? null"
-          class="w-full rounded border-slate-300"
-          placeholder="-"
-          @update:model-value="updateQueryValue('type', $event)"
-        >
-          <option value="video">
-            Video
-          </option>
-          <option value="article">
-            Article
-          </option>
-        </BaseSelect>
-      </div>
-      <div>
-        <p class="mb-1 text-sm">
-          Access Level
-        </p>
-        <BaseSelect
-          :model-value="query.access_level ?? null"
-          class="w-full rounded border-slate-300"
-          placeholder="-"
-          @update:model-value="updateQueryValue('access_level', $event)"
-        >
-          <option value="public">
-            Public
-          </option>
-          <option value="member">
-            Member
-          </option>
-          <option value="vip">
-            VIP
-          </option>
-        </BaseSelect>
-      </div>
-    </div>
-  </template>
-</BaseDataIterator>
-`;
-
-const Template = (args) => ({
-  components: {
-    BaseDataIterator,
-    BaseCard,
-    BaseCardRow,
-    BaseLoadingCover,
-    BaseSelect,
-  },
-  setup() {
-    const urlQuery = ref({});
-    return { args, urlQuery };
-  },
-  template: template,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  searchable: true,
-  actions: [
-    {
-      label: "Open Google",
-      icon: "heroicons:link",
-      href: "https://google.com",
-    },
-    {
-      label: "Export",
-      icon: "heroicons:table-cells",
-      action: () => alert("export!"),
-    },
-    { meta: { line: true } },
-    {
-      label: "Delete all",
-      icon: "heroicons:trash",
-      action: () => alert("Delete All!"),
-      color: "danger",
-    },
-  ],
-};
-
-const SimpleTemplate = (args) => ({
-  components: {
-    BaseDataIterator,
-    BaseCard,
-    BaseCardRow,
-    BaseLoadingCover,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseDataIterator v-bind="args">
-    <template #default="{ items, loading }">
-      <div class="relative">
-        <div class="space-y-1.5">
-          <a
-            v-for="item in items"
-            :key="item.id"
-            :href="item.website_url"
-            target="_blank"
-            class="block group"
-          >
-            <BaseCard class="group-hover:bg-slate-100">
-              <BaseCardRow size="sm">
-                <div class="font-medium text-slate-900">
-                  {{ item.title }}
-                </div>
-                <p class="text-xs leading-tight text-slate-500">
-                  {{ item.subtitle }}
-                </p>
-              </BaseCardRow>
-            </BaseCard>
-          </a>
-        </div>
-  
-        <BaseLoadingCover
-          v-show="loading"
-          size="lg"
-          backdropClass="bg-white bg-opacity-50"
-        >
-        </BaseLoadingCover>
-      </div>
-    </template>
-  </BaseDataIterator>
-  `,
-});
-
-export const Simple = SimpleTemplate.bind({});
-Simple.args = {
-  searchable: false,
-  actions: [],
-};
-
-const LocalDataTemplate = (args) => ({
-  components: {
-    BaseDataIterator,
-    BaseCard,
-    BaseCardRow,
-    BaseLoadingCover,
-    BaseSelect,
-  },
-  setup() {
-    const baseDataIteratorRef = ref(null);
-
-    const filteredItems = computed(() => {
-      return options.filter((item) => {
-        const type = baseDataIteratorRef.value?.query?.filter?.type ?? null;
-
-        if (type) {
-          return item.type === type;
-        }
-
-        return true;
-      });
-    });
-
-    return { args, filteredItems, baseDataIteratorRef };
-  },
-  template: `
-  <BaseDataIterator ref="baseDataIteratorRef" v-bind="args" :items="filteredItems">
-    <template #default="{ items, loading }">
-
-      <div class="relative">
-        <div class="space-y-1.5">
-          <div
-            v-for="item in items"
-            :key="item.id"
-            class="block group"
-          >
-            <BaseCard class="group-hover:bg-slate-100">
-              <BaseCardRow size="xs">
-                <div class="font-medium text-slate-900">
-                  {{ item.label }}
-                </div>
-                <p class="text-xs leading-tight text-slate-500">
-                  {{ item.type }}
-                </p>
-              </BaseCardRow>
-            </BaseCard>
-          </div>
-        </div>
-  
-        <BaseLoadingCover
-          v-show="loading"
-          size="lg"
-          backdropClass="bg-white bg-opacity-50"
-        >
-        </BaseLoadingCover>
-      </div>
-    </template>
-
-    <template #filters="{ query, updateQueryValue }">
-      <div class="space-y-3">
-        <div>
-          <p class="mb-1 text-sm">
-            Type
-          </p>
-          <BaseSelect
-            :model-value="query.filter.type ?? null"
-            class="w-full rounded border-slate-300"
-            placeholder="-"
-            @update:model-value="updateQueryValue('filter.type', $event)"
-          >
-            <option value="jedi">
-              Jedi
-            </option>
-            <option value="sith">
-              Sith
-            </option>
-          </BaseSelect>
-        </div>
-      </div>
-    </template>
-  </BaseDataIterator>
-  `,
-});
-
-export const Local = LocalDataTemplate.bind({});
-Local.args = {
-  url: null,
-  actions: [],
-  perPage: 4,
-};
+import BaseDataIterator from "./BaseDataIterator.vue";
+import BaseSelect from "./BaseSelect.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+import BaseLoadingCover from "./BaseLoadingCover.vue";
+import { options, sizes } from "../../.storybook/utils";
+import { computed } from "vue";
+
+export default {
+  title: "Data/BaseDataIterator",
+  component: BaseDataIterator,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+    filtersPosition: {
+      control: { type: "select" },
+      options: ["top", "section"],
+    },
+  },
+  args: {
+    url: "https://faker.witify.io/api/todos",
+    urlQuery: {
+      paginate: '0',
+    },
+    history: false,
+  },
+};
+
+const template = `
+<BaseDataIterator v-bind="args" :url-query="urlQuery">
+  <template #default="{ items, loading }">
+    <div class="relative">
+      <div class="space-y-1.5">
+        <a
+          v-for="item in items"
+          :key="item.id"
+          :href="item.website_url"
+          target="_blank"
+          class="block group"
+        >
+          <BaseCard class="group-hover:bg-slate-100">
+            <BaseCardRow size="sm">
+              <div class="font-medium text-slate-900">
+                {{ item.title }}
+              </div>
+              <p class="text-xs leading-tight text-slate-500">
+                {{ item.subtitle }}
+              </p>
+            </BaseCardRow>
+          </BaseCard>
+        </a>
+      </div>
+
+      <BaseLoadingCover
+        v-show="loading"
+        size="lg"
+        backdropClass="bg-white bg-opacity-50"
+      >
+      </BaseLoadingCover>
+    </div>
+  </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
+</BaseDataIterator>
+`;
+
+const Template = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
+  setup() {
+    const urlQuery = ref({});
+    return { args, urlQuery };
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  searchable: true,
+  actions: [
+    {
+      label: "Open Google",
+      icon: "heroicons:link",
+      href: "https://google.com",
+    },
+    {
+      label: "Export",
+      icon: "heroicons:table-cells",
+      action: () => alert("export!"),
+    },
+    { meta: { line: true } },
+    {
+      label: "Delete all",
+      icon: "heroicons:trash",
+      action: () => alert("Delete All!"),
+      color: "danger",
+    },
+  ],
+};
+
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataIterator v-bind="args">
+    <template #default="{ items, loading }">
+      <div class="relative">
+        <div class="space-y-1.5">
+          <a
+            v-for="item in items"
+            :key="item.id"
+            :href="item.website_url"
+            target="_blank"
+            class="block group"
+          >
+            <BaseCard class="group-hover:bg-slate-100">
+              <BaseCardRow size="sm">
+                <div class="font-medium text-slate-900">
+                  {{ item.title }}
+                </div>
+                <p class="text-xs leading-tight text-slate-500">
+                  {{ item.subtitle }}
+                </p>
+              </BaseCardRow>
+            </BaseCard>
+          </a>
+        </div>
+  
+        <BaseLoadingCover
+          v-show="loading"
+          size="lg"
+          backdropClass="bg-white bg-opacity-50"
+        >
+        </BaseLoadingCover>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
+Simple.args = {
+  searchable: false,
+  actions: [],
+};
+
+const LocalDataTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
+  setup() {
+    const baseDataIteratorRef = ref(null);
+
+    const filteredItems = computed(() => {
+      return options.filter((item) => {
+        const type = baseDataIteratorRef.value?.query?.filter?.type ?? null;
+
+        if (type) {
+          return item.type === type;
+        }
+
+        return true;
+      });
+    });
+
+    return { args, filteredItems, baseDataIteratorRef };
+  },
+  template: `
+  <BaseDataIterator ref="baseDataIteratorRef" v-bind="args" :items="filteredItems">
+    <template #default="{ items, loading }">
+
+      <div class="relative">
+        <div class="space-y-1.5">
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="block group"
+          >
+            <BaseCard class="group-hover:bg-slate-100">
+              <BaseCardRow size="xs">
+                <div class="font-medium text-slate-900">
+                  {{ item.label }}
+                </div>
+                <p class="text-xs leading-tight text-slate-500">
+                  {{ item.type }}
+                </p>
+              </BaseCardRow>
+            </BaseCard>
+          </div>
+        </div>
+  
+        <BaseLoadingCover
+          v-show="loading"
+          size="lg"
+          backdropClass="bg-white bg-opacity-50"
+        >
+        </BaseLoadingCover>
+      </div>
+    </template>
+
+    <template #filters="{ query, updateQueryValue }">
+      <div class="space-y-3">
+        <div>
+          <p class="mb-1 text-sm">
+            Type
+          </p>
+          <BaseSelect
+            :model-value="query.filter.type ?? null"
+            class="w-full rounded border-slate-300"
+            placeholder="-"
+            @update:model-value="updateQueryValue('filter.type', $event)"
+          >
+            <option value="jedi">
+              Jedi
+            </option>
+            <option value="sith">
+              Sith
+            </option>
+          </BaseSelect>
+        </div>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+export const Local = LocalDataTemplate.bind({});
+Local.args = {
+  url: null,
+  actions: [],
+  perPage: 4,
+};