sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseTable.stories.js

@@ -1,214 +1,214 @@
-import BaseTable from "./BaseTable.vue";
-import BaseTableHead from "./BaseTableHead.vue";
-import BaseTableBody from "./BaseTableBody.vue";
-import BaseTableRow from "./BaseTableRow.vue";
-import BaseTableCell from "./BaseTableCell.vue";
-import BaseTableHeader from "./BaseTableHeader.vue";
-import BaseBadge from "./BaseBadge.vue";
-import { options, optionsLarge } from "../../.storybook/utils";
-
-export default {
-  title: "Data/BaseTable",
-  component: BaseTable,
-  args: {},
-  argTypes: {
-    size: {
-      control: {
-        type: "select",
-      },
-      options: ["none", "xs", "sm", "md", "lg"],
-    },
-    loading: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const headTemplate = `<BaseTableHead>
-<BaseTableRow>
-  <BaseTableHeader tooltip="Lorem ipsum" sortable>Label</BaseTableHeader>
-  <BaseTableHeader sortable>ID</BaseTableHeader>
-  <BaseTableHeader>Type</BaseTableHeader>
-  <BaseTableHeader>Description</BaseTableHeader>
-</BaseTableRow>
-</BaseTableHead>`;
-
-const cellsTemplate = `<BaseTableCell class="font-medium whitespace-nowrap">
-{{ option.label }}
-</BaseTableCell>
-<BaseTableCell>
-<BaseBadge class="font-mono">
-  {{ option.value ?? 'N/A' }}
-</BaseBadge>
-</BaseTableCell>
-<BaseTableCell>
-{{ option.type ?? 'N/A' }}
-</BaseTableCell>
-<BaseTableCell class="whitespace-nowrap">
-Long description here to test the overflow and wrap the lorem ipsum dolor Et occaecat quis ex Lorem cupidatat deserunt culpa dolore. Est sit aliquip exercitation exercitation deserunt.
-</BaseTableCell>
-`;
-
-const components = {
-  BaseTable,
-  BaseTableHead,
-  BaseTableBody,
-  BaseTableRow,
-  BaseTableCell,
-  BaseTableHeader,
-  BaseBadge,
-};
-
-const Template = (args) => ({
-  components: components,
-  setup() {
-    return { args, optionsLarge };
-  },
-  template: `
-  <div class="">
-    <BaseTable class="w-full" v-bind="args">
-      ${headTemplate}
-      <BaseTableBody>
-        <BaseTableRow 
-          v-for="option in optionsLarge" 
-          :key="option.value"
-          :href="'https://www.google.com/search?q=' + option.label"
-          target="_blank"
-          :selected="option.value === 'darth_maul'"
-        >
-          ${cellsTemplate}
-        </BaseTableRow>
-      </BaseTableBody>
-    </BaseTable>
-  </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Grid = Template.bind({});
-Grid.args = {
-  grid: true,
-};
-
-export const Striped = Template.bind({});
-Striped.args = {
-  striped: true,
-};
-
-export const Flush = Template.bind({});
-Flush.args = {
-  flush: true,
-};
-
-export const VirtualScroll = Template.bind({});
-VirtualScroll.args = {
-  virtualScrolling: true,
-};
-
-export const FixedHeader = Template.bind({});
-FixedHeader.args = {
-  fixedHeader: true,
-  maxHeight: 300,
-};
-
-export const FixedColumn = Template.bind({});
-FixedColumn.args = {
-  fixedColumn: true,
-};
-
-const TemplateRouterLink = (args) => ({
-  components: components,
-  setup() {
-    return { args, options };
-  },
-  template: `
-  <div class="p-6">
-    <BaseTable class="" v-bind="args">
-      ${headTemplate}
-      <BaseTableBody>
-        <BaseTableRow 
-          v-for="option in options" 
-          :key="option.value"
-          :to="'/articles/' + option.value"
-          :title="option.label"
-        >
-          ${cellsTemplate}
-        </BaseTableRow>
-      </BaseTableBody>
-    </BaseTable>
-  </div>`,
-});
-
-export const RouterLink = TemplateRouterLink.bind({});
-RouterLink.args = {};
-
-const TemplateCellClick = (args) => ({
-  components: components,
-  setup() {
-    const al = function () {
-      alert("clicked");
-    };
-
-    return { args, options, al };
-  },
-  template: `
-  <div class="p-6">
-
-    <div class="text-sm mb-5">
-      <p>Row = a link to Bing</p>
-      <p>Cell #1 = a link to Google</p>
-      <p>Cell #2 = RouterLink to article </p>
-      <p>Cell #5 = Click </p>
-    </div>
-
-    <BaseTable class="" v-bind="args">
-      <BaseTableHead>
-        <BaseTableRow>
-          <BaseTableHeader sortable>Label</BaseTableHeader>
-          <BaseTableHeader sortable>ID</BaseTableHeader>
-          <BaseTableHeader>Type</BaseTableHeader>
-          <BaseTableHeader>Actions</BaseTableHeader>
-          <BaseTableHeader>Click</BaseTableHeader>
-          <BaseTableHeader>Ignore</BaseTableHeader>
-        </BaseTableRow>
-      </BaseTableHead>
-      <BaseTableBody>
-        <BaseTableRow 
-          v-for="option in options" 
-          :key="option.value"
-          href="https://bing.com"
-          target="_blank"
-        >
-          <BaseTableCell class="font-medium" href="https://google.com" target="_blank">
-          {{ option.label }}
-          </BaseTableCell>
-          <BaseTableCell :to="'/articles/' + option.value">
-          <BaseBadge class="font-mono">
-            {{ option.value ?? 'N/A' }}
-          </BaseBadge>
-          </BaseTableCell>
-          <BaseTableCell>
-          {{ option.type ?? 'N/A' }}
-          </BaseTableCell>
-          <BaseTableCell>
-           Actions...
-          </BaseTableCell>
-          <BaseTableCell @click="al()">
-           Click me
-          </BaseTableCell>
-          <BaseTableCell ignore-row-interactions>
-            ignore row interactions
-          </BaseTableCell>
-        </BaseTableRow>
-      </BaseTableBody>
-    </BaseTable>
-  </div>
-  `,
-});
-
-export const CellClick = TemplateCellClick.bind({});
-CellClick.args = {};
+import BaseTable from "./BaseTable.vue";
+import BaseTableHead from "./BaseTableHead.vue";
+import BaseTableBody from "./BaseTableBody.vue";
+import BaseTableRow from "./BaseTableRow.vue";
+import BaseTableCell from "./BaseTableCell.vue";
+import BaseTableHeader from "./BaseTableHeader.vue";
+import BaseBadge from "./BaseBadge.vue";
+import { options, optionsLarge } from "../../.storybook/utils";
+
+export default {
+  title: "Data/BaseTable",
+  component: BaseTable,
+  args: {},
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "xs", "sm", "md", "lg"],
+    },
+    loading: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+const headTemplate = `<BaseTableHead>
+<BaseTableRow>
+  <BaseTableHeader tooltip="Lorem ipsum" sortable>Label</BaseTableHeader>
+  <BaseTableHeader sortable>ID</BaseTableHeader>
+  <BaseTableHeader>Type</BaseTableHeader>
+  <BaseTableHeader>Description</BaseTableHeader>
+</BaseTableRow>
+</BaseTableHead>`;
+
+const cellsTemplate = `<BaseTableCell class="font-medium whitespace-nowrap">
+{{ option.label }}
+</BaseTableCell>
+<BaseTableCell>
+<BaseBadge class="font-mono">
+  {{ option.value ?? 'N/A' }}
+</BaseBadge>
+</BaseTableCell>
+<BaseTableCell>
+{{ option.type ?? 'N/A' }}
+</BaseTableCell>
+<BaseTableCell class="whitespace-nowrap">
+Long description here to test the overflow and wrap the lorem ipsum dolor Et occaecat quis ex Lorem cupidatat deserunt culpa dolore. Est sit aliquip exercitation exercitation deserunt.
+</BaseTableCell>
+`;
+
+const components = {
+  BaseTable,
+  BaseTableHead,
+  BaseTableBody,
+  BaseTableRow,
+  BaseTableCell,
+  BaseTableHeader,
+  BaseBadge,
+};
+
+const Template = (args) => ({
+  components: components,
+  setup() {
+    return { args, optionsLarge };
+  },
+  template: `
+  <div class="">
+    <BaseTable class="w-full" v-bind="args">
+      ${headTemplate}
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in optionsLarge" 
+          :key="option.value"
+          :href="'https://www.google.com/search?q=' + option.label"
+          target="_blank"
+          :selected="option.value === 'darth_maul'"
+        >
+          ${cellsTemplate}
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Grid = Template.bind({});
+Grid.args = {
+  grid: true,
+};
+
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true,
+};
+
+export const Flush = Template.bind({});
+Flush.args = {
+  flush: true,
+};
+
+export const VirtualScroll = Template.bind({});
+VirtualScroll.args = {
+  virtualScrolling: true,
+};
+
+export const FixedHeader = Template.bind({});
+FixedHeader.args = {
+  fixedHeader: true,
+  maxHeight: 300,
+};
+
+export const FixedColumn = Template.bind({});
+FixedColumn.args = {
+  fixedColumn: true,
+};
+
+const TemplateRouterLink = (args) => ({
+  components: components,
+  setup() {
+    return { args, options };
+  },
+  template: `
+  <div class="p-6">
+    <BaseTable class="" v-bind="args">
+      ${headTemplate}
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in options" 
+          :key="option.value"
+          :to="'/articles/' + option.value"
+          :title="option.label"
+        >
+          ${cellsTemplate}
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>`,
+});
+
+export const RouterLink = TemplateRouterLink.bind({});
+RouterLink.args = {};
+
+const TemplateCellClick = (args) => ({
+  components: components,
+  setup() {
+    const al = function () {
+      alert("clicked");
+    };
+
+    return { args, options, al };
+  },
+  template: `
+  <div class="p-6">
+
+    <div class="text-sm mb-5">
+      <p>Row = a link to Bing</p>
+      <p>Cell #1 = a link to Google</p>
+      <p>Cell #2 = RouterLink to article </p>
+      <p>Cell #5 = Click </p>
+    </div>
+
+    <BaseTable class="" v-bind="args">
+      <BaseTableHead>
+        <BaseTableRow>
+          <BaseTableHeader sortable>Label</BaseTableHeader>
+          <BaseTableHeader sortable>ID</BaseTableHeader>
+          <BaseTableHeader>Type</BaseTableHeader>
+          <BaseTableHeader>Actions</BaseTableHeader>
+          <BaseTableHeader>Click</BaseTableHeader>
+          <BaseTableHeader>Ignore</BaseTableHeader>
+        </BaseTableRow>
+      </BaseTableHead>
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in options" 
+          :key="option.value"
+          href="https://bing.com"
+          target="_blank"
+        >
+          <BaseTableCell class="font-medium" href="https://google.com" target="_blank">
+          {{ option.label }}
+          </BaseTableCell>
+          <BaseTableCell :to="'/articles/' + option.value">
+          <BaseBadge class="font-mono">
+            {{ option.value ?? 'N/A' }}
+          </BaseBadge>
+          </BaseTableCell>
+          <BaseTableCell>
+          {{ option.type ?? 'N/A' }}
+          </BaseTableCell>
+          <BaseTableCell>
+           Actions...
+          </BaseTableCell>
+          <BaseTableCell @click="al()">
+           Click me
+          </BaseTableCell>
+          <BaseTableCell ignore-row-interactions>
+            ignore row interactions
+          </BaseTableCell>
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>
+  `,
+});
+
+export const CellClick = TemplateCellClick.bind({});
+CellClick.args = {};

package/src/components/BaseTable.vue

@@ -1,112 +1,112 @@
-<template>
-  <div class="relative max-w-full">
-    <div
-      ref="scrollableRef"
-      class="overflow-x-auto overflow-y-auto max-w-full"
-      data-scroll-lock-scrollable
-      :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
-    >
-      <table :class="classes">
-        <slot />
-      </table>
-    </div>
-
-    <slot name="loading">
-      <Transition
-        enter-active-class="transition ease-out duration-200"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="transition ease-in duration-200"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div
-          v-if="loading"
-          class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
-        >
-          <div class="absolute h-full w-full bg-white bg-opacity-60" />
-
-          <div class="pt-20">
-            <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
-          </div>
-        </div>
-      </Transition>
-    </slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { twMerge } from 'tailwind-merge';
-import { useScroll } from '@vueuse/core';
-import BaseSpinnerLarge from '@/svg/BaseSpinnerLarge.vue';
-import { TableProps } from '@/services/table/types';
-import { Ref } from 'vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<TableProps>(), {
-  size: 'md',
-  fixedHeader: false,
-  fixedColumn: false,
-  grid: false,
-  striped: false,
-  flush: false,
-  class: undefined,
-  maxHeight: undefined,
-  loading: false,
-  virtualScrolling: false,
-});
-
-const classes = computed(() => {
-
-  const base = 'text-sm';
-
-  if (!props.class) {
-    return base;
-  }
-
-  return twMerge(
-    base,
-    props.class,
-  );
-});
-
-// Sticky styles
-
-const horizontalScrolling = ref(false);
-const scrollableRef = ref<null | HTMLElement>(null);
-
-const { x } = useScroll(scrollableRef);
-watch(x, (value) => {
-  horizontalScrolling.value = value > 0;
-});
-
-function scrollTop() {
-  if (scrollableRef.value) {
-    scrollableRef.value.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-}
-
-// Virtual Scrolling
-
-const virtualScrollingDefaultRowHeight = ref(null) as Ref<number | null | undefined>;
-function setVirtualScrollingDefaultRowHeight(height: number) {
-  virtualScrollingDefaultRowHeight.value = height;
-}
-
-// Provide
-
-provide('table:props', computed(() => props));
-provide('table:horizontalScrolling', computed(() => horizontalScrolling.value));
-provide('table:virtualScrollingDefaultRowHeight', computed(() => virtualScrollingDefaultRowHeight.value));
-provide('table:setVirtualScrollingDefaultRowHeight', setVirtualScrollingDefaultRowHeight);
-
-// Expose
-
-defineExpose({
-  scrollTop,
-});
-
+<template>
+  <div class="relative max-w-full">
+    <div
+      ref="scrollableRef"
+      class="overflow-x-auto overflow-y-auto max-w-full"
+      data-scroll-lock-scrollable
+      :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
+    >
+      <table :class="classes">
+        <slot />
+      </table>
+    </div>
+
+    <slot name="loading">
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition ease-in duration-200"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="loading"
+          class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
+        >
+          <div class="absolute h-full w-full bg-white bg-opacity-60" />
+
+          <div class="pt-20">
+            <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
+          </div>
+        </div>
+      </Transition>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge';
+import { useScroll } from '@vueuse/core';
+import BaseSpinnerLarge from '@/svg/BaseSpinnerLarge.vue';
+import { TableProps } from '@/services/table/types';
+import { Ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TableProps>(), {
+  size: 'md',
+  fixedHeader: false,
+  fixedColumn: false,
+  grid: false,
+  striped: false,
+  flush: false,
+  class: undefined,
+  maxHeight: undefined,
+  loading: false,
+  virtualScrolling: false,
+});
+
+const classes = computed(() => {
+
+  const base = 'text-sm';
+
+  if (!props.class) {
+    return base;
+  }
+
+  return twMerge(
+    base,
+    props.class,
+  );
+});
+
+// Sticky styles
+
+const horizontalScrolling = ref(false);
+const scrollableRef = ref<null | HTMLElement>(null);
+
+const { x } = useScroll(scrollableRef);
+watch(x, (value) => {
+  horizontalScrolling.value = value > 0;
+});
+
+function scrollTop() {
+  if (scrollableRef.value) {
+    scrollableRef.value.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+}
+
+// Virtual Scrolling
+
+const virtualScrollingDefaultRowHeight = ref(null) as Ref<number | null | undefined>;
+function setVirtualScrollingDefaultRowHeight(height: number) {
+  virtualScrollingDefaultRowHeight.value = height;
+}
+
+// Provide
+
+provide('table:props', computed(() => props));
+provide('table:horizontalScrolling', computed(() => horizontalScrolling.value));
+provide('table:virtualScrollingDefaultRowHeight', computed(() => virtualScrollingDefaultRowHeight.value));
+provide('table:setVirtualScrollingDefaultRowHeight', setVirtualScrollingDefaultRowHeight);
+
+// Expose
+
+defineExpose({
+  scrollTop,
+});
+
 </script>

package/src/components/BaseTableBody.vue

@@ -1,15 +1,15 @@
-<template>
-  <tbody>
-    <slot />  
-  </tbody> 
-</template>
-
-<script lang="ts" setup>
-
-const baseTable = inject('table:props');
-
-if (!baseTable) {
-  throw new Error('BaseTableBody must be used within a BaseTable.');
-}
-
+<template>
+  <tbody>
+    <slot />  
+  </tbody> 
+</template>
+
+<script lang="ts" setup>
+
+const baseTable = inject('table:props');
+
+if (!baseTable) {
+  throw new Error('BaseTableBody must be used within a BaseTable.');
+}
+
 </script>