sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseDataIteratorSectionBox.vue

@@ -1,33 +1,33 @@
-<template>
-  <BaseCard>
-    <button
-      type="button"
-      class="flex w-full items-center justify-between px-4 py-3"
-      @click="active = !active"
-    >
-      <h2 class="text-sm font-semibold">
-        {{ section.title }}
-      </h2>
-
-      <BaseIcon
-        class="h-5 w-5 text-slate-500 duration-300"
-        :class="active ? 'rotate-90 transform' : ''"
-        icon="heroicons:chevron-right-20-solid"
-      ></BaseIcon>
-    </button>
-    <div v-show="active" class="border-t border-slate-300 py-5 px-4">
-      <slot />
-    </div>
-  </BaseCard>
-</template>
-
-<script lang="ts" setup>
-import { DataIteratorSection } from '@/types';
-import { BaseCard, BaseIcon } from '.';
-
-const props = defineProps<{
-  section: DataIteratorSection;
-}>();
-
-const active = ref<boolean>(props.section.opened ?? false);
-</script>
+<template>
+  <BaseCard>
+    <button
+      type="button"
+      class="flex w-full items-center justify-between px-4 py-3"
+      @click="active = !active"
+    >
+      <h2 class="text-sm font-semibold">
+        {{ section.title }}
+      </h2>
+
+      <BaseIcon
+        class="h-5 w-5 text-slate-500 duration-300"
+        :class="active ? 'rotate-90 transform' : ''"
+        icon="heroicons:chevron-right-20-solid"
+      ></BaseIcon>
+    </button>
+    <div v-show="active" class="border-t border-slate-300 py-5 px-4">
+      <slot />
+    </div>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import { BaseCard, BaseIcon } from '.';
+
+const props = defineProps<{
+  section: DataIteratorSection;
+}>();
+
+const active = ref<boolean>(props.section.opened ?? false);
+</script>

package/src/components/BaseDataIteratorSectionButton.vue

@@ -1,40 +1,40 @@
-<template>
-  <button
-    class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
-    :class="[width > 600 ? 'px-4' : 'px-3.5']"
-    type="button"
-    @click="open()"
-  >
-    <BaseIcon class="h-5 w-5 text-slate-500" :icon="section.icon" />
-    <span
-      v-if="section.title && width > 600"
-      class="ml-2 whitespace-pre text-sm"
-      >{{ section.title }}</span
-    >
-    <BaseBadge
-      v-if="section.count"
-      class="ml-2"
-      :label="section.count"
-    ></BaseBadge>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { DataIteratorSection } from '@/types';
-import { BaseIcon } from '.';
-import BaseBadge from './BaseBadge.vue';
-
-defineProps<{
-  section: DataIteratorSection;
-}>();
-
-const emit = defineEmits<{
-  (event: 'open'): void;
-}>();
-
-const width = inject('dataIterator:width', ref(0));
-
-function open() {
-  emit('open');
-}
-</script>
+<template>
+  <button
+    class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
+    :class="[width > 600 ? 'px-4' : 'px-3.5']"
+    type="button"
+    @click="open()"
+  >
+    <BaseIcon class="h-5 w-5 text-slate-500" :icon="section.icon" />
+    <span
+      v-if="section.title && width > 600"
+      class="ml-2 whitespace-pre text-sm"
+      >{{ section.title }}</span
+    >
+    <BaseBadge
+      v-if="section.count"
+      class="ml-2"
+      :label="section.count"
+    ></BaseBadge>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import { BaseIcon } from '.';
+import BaseBadge from './BaseBadge.vue';
+
+defineProps<{
+  section: DataIteratorSection;
+}>();
+
+const emit = defineEmits<{
+  (event: 'open'): void;
+}>();
+
+const width = inject('dataIterator:width', ref(0));
+
+function open() {
+  emit('open');
+}
+</script>

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -1,67 +1,67 @@
-<template>
-  <ul>
-    <li v-for="col in toggleableColumns" :key="col.newKey">
-      <label class="cursor-pointer">
-        <input
-          :checked="visibleColumns.includes(col.newKey)"
-          type="checkbox"
-          class="mr-2 h-3.5 w-3.5 cursor-pointer rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
-          :value="col.newKey"
-          @change="onVisibleColumnChange($event, col.newKey)"
-        />
-        <span class="text-xs text-slate-700">
-          {{ col.label }}
-        </span>
-      </label>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import { PropType } from 'vue';
-import BaseTable from './BaseTable.vue';
-
-const props = defineProps({
-  table: {
-    required: true,
-    type: [Object, null] as PropType<InstanceType<typeof BaseTable> | null>,
-  },
-  visibleColumns: {
-    required: true,
-    type: Array as PropType<number[]>,
-  },
-});
-
-const emit = defineEmits(['update:visibleColumns']);
-
-const toggleableColumns = computed(() => {
-  const tableVue = props.table;
-
-  if (tableVue == null) {
-    return [];
-  }
-
-  if (!tableVue.newColumns) {
-    return [];
-  }
-
-  return tableVue.newColumns.filter((c) => c.toggle);
-});
-
-function onVisibleColumnChange(event: any, newKey: number) {
-  const checked = event.target.checked as boolean;
-
-  let newVisibleColumns = cloneDeep(props.visibleColumns);
-
-  if (checked) {
-    if (!newVisibleColumns.includes(newKey)) {
-      newVisibleColumns.push(newKey);
-    }
-  } else {
-    newVisibleColumns = newVisibleColumns.filter((c) => c != newKey);
-  }
-
-  emit('update:visibleColumns', newVisibleColumns);
-}
-</script>
+<template>
+  <ul>
+    <li v-for="col in toggleableColumns" :key="col.newKey">
+      <label class="cursor-pointer">
+        <input
+          :checked="visibleColumns.includes(col.newKey)"
+          type="checkbox"
+          class="mr-2 h-3.5 w-3.5 cursor-pointer rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
+          :value="col.newKey"
+          @change="onVisibleColumnChange($event, col.newKey)"
+        />
+        <span class="text-xs text-slate-700">
+          {{ col.label }}
+        </span>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { PropType } from 'vue';
+import BaseTable from './BaseTable.vue';
+
+const props = defineProps({
+  table: {
+    required: true,
+    type: [Object, null] as PropType<InstanceType<typeof BaseTable> | null>,
+  },
+  visibleColumns: {
+    required: true,
+    type: Array as PropType<number[]>,
+  },
+});
+
+const emit = defineEmits(['update:visibleColumns']);
+
+const toggleableColumns = computed(() => {
+  const tableVue = props.table;
+
+  if (tableVue == null) {
+    return [];
+  }
+
+  if (!tableVue.newColumns) {
+    return [];
+  }
+
+  return tableVue.newColumns.filter((c) => c.toggle);
+});
+
+function onVisibleColumnChange(event: any, newKey: number) {
+  const checked = event.target.checked as boolean;
+
+  let newVisibleColumns = cloneDeep(props.visibleColumns);
+
+  if (checked) {
+    if (!newVisibleColumns.includes(newKey)) {
+      newVisibleColumns.push(newKey);
+    }
+  } else {
+    newVisibleColumns = newVisibleColumns.filter((c) => c != newKey);
+  }
+
+  emit('update:visibleColumns', newVisibleColumns);
+}
+</script>

package/src/components/BaseDataIteratorSectionModal.vue

@@ -1,41 +1,41 @@
-<template>
-  <BaseModalSide
-    :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-  >
-    <div>
-      <div class="border-b border-slate-300 p-4">
-        <h2 class="text-base font-semibold">
-          {{ section.title }}
-        </h2>
-      </div>
-
-      <div class="py-5 px-4">
-        <slot />
-      </div>
-
-      <div class="border-t border-slate-300 p-4">
-        <button
-          class="btn btn-primary w-full sm:w-auto"
-          @click="emit('update:modelValue', false)"
-        >
-          {{ section.closeText }}
-        </button>
-      </div>
-    </div>
-  </BaseModalSide>
-</template>
-
-<script lang="ts" setup>
-import { DataIteratorSection } from '@/types';
-import BaseModalSide from './BaseModalSide.vue';
-
-defineProps<{
-  modelValue: boolean;
-  section: DataIteratorSection;
-}>();
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void;
-}>();
-</script>
+<template>
+  <BaseModalSide
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div>
+      <div class="border-b border-slate-300 p-4">
+        <h2 class="text-base font-semibold">
+          {{ section.title }}
+        </h2>
+      </div>
+
+      <div class="py-5 px-4">
+        <slot />
+      </div>
+
+      <div class="border-t border-slate-300 p-4">
+        <button
+          class="btn btn-primary w-full sm:w-auto"
+          @click="emit('update:modelValue', false)"
+        >
+          {{ section.closeText }}
+        </button>
+      </div>
+    </div>
+  </BaseModalSide>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import BaseModalSide from './BaseModalSide.vue';
+
+defineProps<{
+  modelValue: boolean;
+  section: DataIteratorSection;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void;
+}>();
+</script>