sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseAppSnackbars.vue

@@ -1,40 +1,40 @@
-<template>
-  <Teleport to="body">
-    <div
-      class="pointer-events-none fixed inset-0 z-snackbars flex items-end justify-end p-6 md:p-8"
-    >
-      <div class="w-full">
-        <TransitionGroup
-          enter-active-class="transition duration-300 ease-out transform"
-          enter-from-class="translate-y-2 opacity-0"
-          enter-to-class="translate-y-0 opacity-100"
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="translate-y-0 opacity-100"
-          leave-to-class="translate-y-2 opacity-0"
-        >
-          <div
-            v-for="snackbar in snackbars"
-            :key="snackbar.id"
-          >
-            <BaseToast
-              class="mt-4"
-              :text="snackbar.text"
-              :color="snackbar.color"
-            />
-          </div>
-        </TransitionGroup>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useSnackbarsStore } from '@/index';
-import BaseToast from './BaseToast.vue';
-
-const snackbarsStore = useSnackbarsStore();
-
-const snackbars = computed(() => {
-  return snackbarsStore.snackbars;
-});
-</script>
+<template>
+  <Teleport to="body">
+    <div
+      class="pointer-events-none fixed inset-0 z-snackbars flex items-end justify-end p-6 md:p-8"
+    >
+      <div class="w-full">
+        <TransitionGroup
+          enter-active-class="transition duration-300 ease-out transform"
+          enter-from-class="translate-y-2 opacity-0"
+          enter-to-class="translate-y-0 opacity-100"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="translate-y-0 opacity-100"
+          leave-to-class="translate-y-2 opacity-0"
+        >
+          <div
+            v-for="snackbar in snackbars"
+            :key="snackbar.id"
+          >
+            <BaseToast
+              class="mt-4"
+              :text="snackbar.text"
+              :color="snackbar.color"
+            />
+          </div>
+        </TransitionGroup>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useSnackbarsStore } from '@/index';
+import BaseToast from './BaseToast.vue';
+
+const snackbarsStore = useSnackbarsStore();
+
+const snackbars = computed(() => {
+  return snackbarsStore.snackbars;
+});
+</script>

package/src/components/BaseAssign.mdx

@@ -1,99 +1,99 @@
-import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
- 
-import * as BaseAssignStories from './BaseAssign.stories';
- 
-<Meta of={BaseAssignStories} />
- 
-# BaseAssign
-
-## Introduction
- 
-This is the BaseAssign component, similar to the [BaseBelongsTo](?path=/docs/form-basebelongsto--docs) component, it allows you to select multiple items from a list of items. The modelValue is an array, only containing the primary (usually the `id`) key values of the selected items.
-
-You may declare **filters** and **selectors** to customize the list of items to select from. The **filters** are used to filter the list of items, while the **selectors** are used to quickly select items from the list. In the example below, the **filters** are the blue links `Jedi` and `Sith`, while the **selectors** are the white buttons `All`, `Jedi`, and `Sith`.
-
-<Primary />
-
-The `primary-key` prop is used to identify the primary key of the items in the list. The `field` prop is used to identify the field to display in the list.
-
-```js
-<BaseAssign
-  v-model="modelValue"
-  :options="options"
-  primary-key="value" // 👈 Primary key
-  field="name" // 👈 Field to display
-/>
-```
-
-## Search key
-
-By default, the search bar will search the `field` prop. You may change this by using the `search-key` prop.
-
-```js
-<BaseAssign
-  v-model="modelValue"
-  :options="options"
-  primary-key="value"
-  field="name"
-  search-key="type" // 👈 Search by type
-/>
-```
-
-## Filters
-
-You may add filters using the `filters` props. 
-
-```js
-const filters = [
-    {
-        id: 'type',
-        label: 'Type',
-        options: [
-            { label: 'All', id: 'all', action() { return true } },
-            { label: 'Jedi', id: 'jedi', action(item) { return item.type === 'jedi' } },
-            { label: 'Sith', id: 'sith', action(item) { return item.type === 'sith' } },
-        ],
-    },
-];
-    
-<BaseAssign
-  v-model="modelValue"
-  :filters="filters"
-  :options="options"
-  primary-key="value"
-  field="name"
-/>
-```
-
-## Selectors
-
-You may add selectors using the `selectors` props. 
-
-```js
-const selectors = [
-    {
-        label: 'Jedi',
-        action(item) {
-        return item.type === 'jedi'
-        }
-    },
-    {
-        label: 'Sith',
-        action(item) {
-        return item.type === 'sith'
-        }
-    }
-];
-
-<BaseAssign
-  v-model="modelValue"
-  :selectors="selectors"
-  :options="options"
-  primary-key="value"
-  field="name"
-/>
-```
-
-## Props
- 
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
+ 
+import * as BaseAssignStories from './BaseAssign.stories';
+ 
+<Meta of={BaseAssignStories} />
+ 
+# BaseAssign
+
+## Introduction
+ 
+This is the BaseAssign component, similar to the [BaseBelongsTo](?path=/docs/form-basebelongsto--docs) component, it allows you to select multiple items from a list of items. The modelValue is an array, only containing the primary (usually the `id`) key values of the selected items.
+
+You may declare **filters** and **selectors** to customize the list of items to select from. The **filters** are used to filter the list of items, while the **selectors** are used to quickly select items from the list. In the example below, the **filters** are the blue links `Jedi` and `Sith`, while the **selectors** are the white buttons `All`, `Jedi`, and `Sith`.
+
+<Primary />
+
+The `primary-key` prop is used to identify the primary key of the items in the list. The `field` prop is used to identify the field to display in the list.
+
+```js
+<BaseAssign
+  v-model="modelValue"
+  :options="options"
+  primary-key="value" // 👈 Primary key
+  field="name" // 👈 Field to display
+/>
+```
+
+## Search key
+
+By default, the search bar will search the `field` prop. You may change this by using the `search-key` prop.
+
+```js
+<BaseAssign
+  v-model="modelValue"
+  :options="options"
+  primary-key="value"
+  field="name"
+  search-key="type" // 👈 Search by type
+/>
+```
+
+## Filters
+
+You may add filters using the `filters` props. 
+
+```js
+const filters = [
+    {
+        id: 'type',
+        label: 'Type',
+        options: [
+            { label: 'All', id: 'all', action() { return true } },
+            { label: 'Jedi', id: 'jedi', action(item) { return item.type === 'jedi' } },
+            { label: 'Sith', id: 'sith', action(item) { return item.type === 'sith' } },
+        ],
+    },
+];
+    
+<BaseAssign
+  v-model="modelValue"
+  :filters="filters"
+  :options="options"
+  primary-key="value"
+  field="name"
+/>
+```
+
+## Selectors
+
+You may add selectors using the `selectors` props. 
+
+```js
+const selectors = [
+    {
+        label: 'Jedi',
+        action(item) {
+        return item.type === 'jedi'
+        }
+    },
+    {
+        label: 'Sith',
+        action(item) {
+        return item.type === 'sith'
+        }
+    }
+];
+
+<BaseAssign
+  v-model="modelValue"
+  :selectors="selectors"
+  :options="options"
+  primary-key="value"
+  field="name"
+/>
+```
+
+## Props
+ 
 <Controls />

package/src/components/BaseAssign.stories.js

@@ -1,78 +1,78 @@
-import BaseAssign from "./BaseAssign.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { createFieldStory, options } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseAssign",
-  component: BaseAssign,
-  argTypes: {
-  },
-  args: {
-    options: options,
-    field: "label",
-    primaryKey: "value",
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => {
-  return {
-    components: { BaseAssign, ShowValue },
-    setup() {
-      const value = ref([options[4].value]);
-
-      const selectors = [
-        {
-          label: 'Jedi',
-          action(item) {
-            return item.type === 'jedi'
-          }
-        },
-        {
-          label: 'Sith',
-          action(item) {
-            return item.type === 'sith'
-          }
-        }
-      ];
-
-      const filters = [
-        {
-          id: 'type',
-          label: 'Type',
-          options: [
-            { label: 'All', id: 'all', action() { return true } },
-            { label: 'Jedi', id: 'jedi', action(item) { return item.type === 'jedi' } },
-            { label: 'Sith', id: 'sith', action(item) { return item.type === 'sith' } },
-          ],
-        },
-      ];
-
-      return { args, value, selectors, filters };
-    },
-    template: `
-      <BaseAssign
-        v-model="value"
-        :selectors="selectors"
-        :filters="filters"
-        v-bind="args"
-      ></BaseAssign>
-      <ShowValue :value="value" />
-  `,
-  };
-};
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseAssign,
-  componentName: "BaseAssign",
-  label: "Name",
-  errorType: 'alert'
-});
+import BaseAssign from "./BaseAssign.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, options } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseAssign",
+  component: BaseAssign,
+  argTypes: {
+  },
+  args: {
+    options: options,
+    field: "label",
+    primaryKey: "value",
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseAssign, ShowValue },
+    setup() {
+      const value = ref([options[4].value]);
+
+      const selectors = [
+        {
+          label: 'Jedi',
+          action(item) {
+            return item.type === 'jedi'
+          }
+        },
+        {
+          label: 'Sith',
+          action(item) {
+            return item.type === 'sith'
+          }
+        }
+      ];
+
+      const filters = [
+        {
+          id: 'type',
+          label: 'Type',
+          options: [
+            { label: 'All', id: 'all', action() { return true } },
+            { label: 'Jedi', id: 'jedi', action(item) { return item.type === 'jedi' } },
+            { label: 'Sith', id: 'sith', action(item) { return item.type === 'sith' } },
+          ],
+        },
+      ];
+
+      return { args, value, selectors, filters };
+    },
+    template: `
+      <BaseAssign
+        v-model="value"
+        :selectors="selectors"
+        :filters="filters"
+        v-bind="args"
+      ></BaseAssign>
+      <ShowValue :value="value" />
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseAssign,
+  componentName: "BaseAssign",
+  label: "Name",
+  errorType: 'alert'
+});