sprintify-ui 0.1.16 → 0.1.18

package/dist/types/src/components/BaseHasMany.vue.d.ts

@@ -109,6 +109,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     primaryKey: string;
     currentModels: Option[];
 }>, {
+    items: (_: {
+        items: import("@/types").NormalizedOption[];
+        removeOption: (option: import("@/types").NormalizedOption) => void;
+        disabled: boolean;
+    }) => any;
     option: (_: {
         focus: () => void;
         blur: () => void;

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -65,6 +65,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"focus" | "always">;
     };
+    containerClass: {
+        default: string;
+        type: StringConstructor;
+    };
 }, {
     focus: () => void;
     blur: () => void;
@@ -136,6 +140,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"focus" | "always">;
     };
+    containerClass: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
@@ -155,7 +163,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
     dropdownShow: "focus" | "always";
+    containerClass: string;
 }>, {
+    items: (_: {
+        items: NormalizedOption[];
+        removeOption: (option: NormalizedOption) => void;
+        disabled: boolean;
+    }) => any;
     empty: (_: {
         focus: () => void;
         blur: () => void;

package/dist/types/src/components/BaseTagAutocompleteFetch.vue.d.ts

@@ -101,6 +101,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     hasError: boolean;
     queryKey: string;
 }>, {
+    items: (_: {
+        items: import("@/types").NormalizedOption[];
+        removeOption: (option: import("@/types").NormalizedOption) => void;
+        disabled: boolean;
+    }) => any;
     option: (_: {
         focus: () => void;
         blur: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataIterator.vue

@@ -16,7 +16,7 @@
           <div v-if="searchable" class="grow">
             <div class="relative h-11">
               <div
-                class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+                class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center pl-2.5"
               >
                 <BaseIcon
                   class="h-6 w-6 text-slate-400"
@@ -33,7 +33,7 @@
               />
               <div
                 v-if="searchQuery"
-                class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
+                class="absolute right-0 top-0 flex h-full items-center justify-center p-1"
               >
                 <button
                   type="button"
@@ -494,6 +494,13 @@ watch(
   }
 );
 
+watch(
+  () => props.url,
+  () => {
+    fetch();
+  }
+);
+
 watch(
   () => props.urlQuery,
   () => {

package/src/components/BaseHasMany.stories.js

@@ -62,7 +62,7 @@ Maximum.args = {
 
 export const SlotOption = (args) => {
   return {
-    components: {},
+    components: { BaseHasMany },
     setup() {
       const value = ref([]);
       return { args, value };
@@ -93,9 +93,48 @@ export const SlotOption = (args) => {
   };
 };
 
+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: {},
+    components: { BaseHasMany },
     setup() {
       const value = ref([]);
       function onClick() {
@@ -122,7 +161,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: {},
+    components: { BaseHasMany },
     setup() {
       const value = ref([]);
       return { args, value };

package/src/components/BaseHasMany.vue

@@ -13,12 +13,18 @@
     :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>

package/src/components/BaseTagAutocomplete.stories.js

@@ -124,6 +124,85 @@ export const SlotOption = (args) => ({
   `,
 });
 
+export const SlotItem = (args) => {
+  return {
+    components: { BaseTagAutocomplete },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocomplete
+      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>
+    </BaseTagAutocomplete>
+  `,
+  };
+};
+
+export const SlotBlockItem = (args) => {
+  return {
+    components: { BaseTagAutocomplete },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocomplete
+      v-model="value"
+      v-bind="args"
+      container-class="block"
+    >
+      <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>
+    </BaseTagAutocomplete>
+  `,
+  };
+};
+
 export const SlotFooter = (args) => {
   return {
     components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },

package/src/components/BaseTagAutocomplete.vue

@@ -7,32 +7,41 @@
         wrapperClass,
       ]"
     >
-      <div class="-m-0.5 flex flex-wrap">
-        <div
-          v-for="selection in normalizedModelValue"
-          :key="selection.value ? selection.value : 'null'"
-          class="p-0.5"
+      <div :class="containerClass">
+        <slot
+          name="items"
+          :items="normalizedModelValue"
+          :remove-option="removeOption"
+          :disabled="disabled"
         >
           <div
-            class="flex items-stretch rounded border"
-            :class="[
-              disabled ? 'cursor-not-allowed opacity-60' : '',
-              selectionClass(selection),
-            ]"
+            v-for="selection in normalizedModelValue"
+            :key="selection.value ? selection.value : 'null'"
+            class="p-0.5"
           >
-            <div :class="[selectionLabelClass]">
-              {{ selection.label }}
-            </div>
-            <button
-              v-if="!disabled"
-              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(selection)"
+            <div
+              class="flex items-stretch rounded border"
+              :class="[
+                disabled ? 'cursor-not-allowed opacity-60' : '',
+                selectionClass(selection),
+              ]"
             >
-              ✕
-            </button>
+              <div :class="[selectionLabelClass]">
+                {{ selection.label }}
+              </div>
+
+              <button
+                v-if="!disabled"
+                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(selection)"
+              >
+                ✕
+              </button>
+            </div>
           </div>
-        </div>
+        </slot>
+
         <div class="grow p-0.5">
           <input
             ref="inputElement"
@@ -141,6 +150,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+
   max: {
     default: undefined,
     type: Number,
@@ -165,6 +175,10 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
+  containerClass: {
+    default: '-m-0.5 flex flex-wrap',
+    type: String,
+  },
 });
 
 const emit = defineEmits([

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -89,6 +89,45 @@ export const SlotOption = (args) => {
   };
 };
 
+export const SlotItem = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      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>
+    </BaseTagAutocompleteFetch>
+  `,
+  };
+};
+
 export const SlotFooter = (args) => {
   return {
     components: { BaseTagAutocompleteFetch },

package/src/components/BaseTagAutocompleteFetch.vue

@@ -17,6 +17,10 @@
     @scroll-bottom="scrollBottom"
     @update:model-value="$emit('update:modelValue', $event)"
   >
+    <template #items="itemProps">
+      <slot name="items" v-bind="itemProps" />
+    </template>
+
     <template #option="optionProps">
       <slot name="option" v-bind="optionProps" />
     </template>