sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseTableColumn.vue

@@ -1,124 +1,124 @@
-<script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
-
-export default defineComponent({
-  name: 'BaseTableColumn',
-  props: {
-    label: {
-      default: '',
-      type: String,
-    },
-    customKey: {
-      default: '',
-      type: [String, Number],
-    },
-    field: {
-      default: '',
-      type: String,
-    },
-    meta: {
-      default: undefined,
-      type: [Object, Array],
-    },
-    width: {
-      default: undefined,
-      type: Number,
-    },
-    padding: {
-      default: undefined,
-      type: String,
-    },
-    numeric: {
-      default: false,
-      type: Boolean,
-    },
-    position: {
-      default: 'left',
-      type: String as PropType<'left' | 'center' | 'right'>,
-    },
-    searchable: {
-      default: false,
-      type: Boolean,
-    },
-    sortable: {
-      default: false,
-      type: Boolean,
-    },
-    clickable: {
-      default: true,
-      type: Boolean,
-    },
-    toggle: {
-      type: Boolean,
-      default: false,
-    },
-    toggleDefault: {
-      type: Boolean,
-      default: true,
-    },
-    customSort: {
-      default: undefined,
-      type: Function,
-    },
-    customSearch: {
-      default: undefined,
-      type: Function,
-    },
-    /** Adds native attributes to th :th-attrs="(column)" => ({})" */
-    thAttrs: {
-      type: Function,
-      default: () => ({}),
-    },
-    /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
-    tdAttrs: {
-      type: Function,
-      default: () => ({}),
-    },
-  },
-  setup() {
-    const nextSequence = inject('nextSequence') as any;
-    const addColumn = inject('addColumn') as any;
-    const removeColumn = inject('removeColumn') as any;
-
-    return {
-      nextSequence,
-      addColumn,
-      removeColumn,
-    };
-  },
-  data() {
-    return {
-      newKey: undefined as string | undefined,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.width ? this.width + 'px' : undefined,
-        padding: this.padding ? this.padding : '0.5rem 0.75rem',
-      };
-    },
-  },
-  created() {
-    if (this.toggle && !this.customKey) {
-      throw new Error(
-        'BaseTableColumn: customKey props is required when toggle props is true'
-      );
-    }
-
-    if (this.customKey) {
-      this.newKey = this.customKey + '';
-    } else {
-      this.newKey = this.nextSequence();
-    }
-    this.addColumn(this);
-  },
-  beforeUnmount() {
-    this.removeColumn(this);
-  },
-  render() {
-    // render-less
-    return h('span', { 'data-id': this.newKey }, this.label);
-  },
-});
-</script>
+<script lang="ts">
+import { defineComponent, h, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'BaseTableColumn',
+  props: {
+    label: {
+      default: '',
+      type: String,
+    },
+    customKey: {
+      default: '',
+      type: [String, Number],
+    },
+    field: {
+      default: '',
+      type: String,
+    },
+    meta: {
+      default: undefined,
+      type: [Object, Array],
+    },
+    width: {
+      default: undefined,
+      type: Number,
+    },
+    padding: {
+      default: undefined,
+      type: String,
+    },
+    numeric: {
+      default: false,
+      type: Boolean,
+    },
+    position: {
+      default: 'left',
+      type: String as PropType<'left' | 'center' | 'right'>,
+    },
+    searchable: {
+      default: false,
+      type: Boolean,
+    },
+    sortable: {
+      default: false,
+      type: Boolean,
+    },
+    clickable: {
+      default: true,
+      type: Boolean,
+    },
+    toggle: {
+      type: Boolean,
+      default: false,
+    },
+    toggleDefault: {
+      type: Boolean,
+      default: true,
+    },
+    customSort: {
+      default: undefined,
+      type: Function,
+    },
+    customSearch: {
+      default: undefined,
+      type: Function,
+    },
+    /** Adds native attributes to th :th-attrs="(column)" => ({})" */
+    thAttrs: {
+      type: Function,
+      default: () => ({}),
+    },
+    /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
+    tdAttrs: {
+      type: Function,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const nextSequence = inject('nextSequence') as any;
+    const addColumn = inject('addColumn') as any;
+    const removeColumn = inject('removeColumn') as any;
+
+    return {
+      nextSequence,
+      addColumn,
+      removeColumn,
+    };
+  },
+  data() {
+    return {
+      newKey: undefined as string | undefined,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        width: this.width ? this.width + 'px' : undefined,
+        padding: this.padding ? this.padding : '0.5rem 0.75rem',
+      };
+    },
+  },
+  created() {
+    if (this.toggle && !this.customKey) {
+      throw new Error(
+        'BaseTableColumn: customKey props is required when toggle props is true'
+      );
+    }
+
+    if (this.customKey) {
+      this.newKey = this.customKey + '';
+    } else {
+      this.newKey = this.nextSequence();
+    }
+    this.addColumn(this);
+  },
+  beforeUnmount() {
+    this.removeColumn(this);
+  },
+  render() {
+    // render-less
+    return h('span', { 'data-id': this.newKey }, this.label);
+  },
+});
+</script>

package/src/components/BaseTabs.stories.js

@@ -1,85 +1,85 @@
-import BaseTabs from './BaseTabs.vue';
-import BaseTabItem from './BaseTabItem.vue';
-import BaseContainer from './BaseContainer.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseCounter from './BaseCounter.vue';
-
-export default {
-  title: 'Layout/BaseTabs',
-  component: BaseTabs,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseTabs,
-    BaseTabItem,
-    BaseContainer,
-    BaseCard,
-    BaseCardRow,
-    BaseCounter,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="bg-slate-100 py-10">
-    <BaseContainer>
-      <BaseTabs v-bind="args">
-        <BaseTabItem to="/" v-slot="{active}">
-          <div class="flex items-center">
-            <span class="mr-1">Home</span>
-            <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
-            </div>
-        </BaseTabItem>
-        <BaseTabItem to="/setup">
-          Setup
-        </BaseTabItem>
-        <BaseTabItem to="/settings">
-          Settings
-        </BaseTabItem>
-        <BaseTabItem to="/articles">
-          Articles
-        </BaseTabItem>
-        <BaseTabItem to="/misc">
-          Miscellaneous
-        </BaseTabItem>
-        <BaseTabItem to="/users">
-          Users
-        </BaseTabItem>
-      </BaseTabs>
-      <div class="mt-10">
-        <BaseCard>
-          <BaseCardRow>
-            {{ $route.path }}
-          </BaseCardRow>
-        </BaseCard>
-      </div>
-    </BaseContainer>
-  </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const SizeXS = Template.bind({});
-SizeXS.args = {
-  size: 'xs',
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  size: 'sm',
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  size: 'md',
-};
-
-export const SizeLG = Template.bind({});
-SizeLG.args = {
-  size: 'lg',
-};
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseCounter from './BaseCounter.vue';
+
+export default {
+  title: 'Layout/BaseTabs',
+  component: BaseTabs,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTabs,
+    BaseTabItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+    BaseCounter,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BaseTabs v-bind="args">
+        <BaseTabItem to="/" v-slot="{active}">
+          <div class="flex items-center">
+            <span class="mr-1">Home</span>
+            <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
+            </div>
+        </BaseTabItem>
+        <BaseTabItem to="/setup">
+          Setup
+        </BaseTabItem>
+        <BaseTabItem to="/settings">
+          Settings
+        </BaseTabItem>
+        <BaseTabItem to="/articles">
+          Articles
+        </BaseTabItem>
+        <BaseTabItem to="/misc">
+          Miscellaneous
+        </BaseTabItem>
+        <BaseTabItem to="/users">
+          Users
+        </BaseTabItem>
+      </BaseTabs>
+      <div class="mt-10">
+        <BaseCard>
+          <BaseCardRow>
+            {{ $route.path }}
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+};
+
+export const SizeLG = Template.bind({});
+SizeLG.args = {
+  size: 'lg',
+};

package/src/components/BaseTabs.vue

@@ -1,73 +1,73 @@
-<template>
-  <div class="relative">
-    <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
-    <div
-      ref="scrollable"
-      class="scrollable relative overflow-x-auto overflow-y-hidden"
-      data-scroll-lock-scrollable
-    >
-      <ul class="flex text-center">
-        <slot />
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    size: 'md',
-  }
-);
-
-const route = useRoute();
-const scrollable = ref<HTMLElement | null>(null);
-
-watch(
-  () => route.fullPath,
-  () => {
-    nextTick(() => {
-      scrollToCenter();
-    });
-  }
-);
-
-provide(
-  'tabs:size',
-  computed(() => props.size)
-);
-
-function scrollToCenter() {
-  if (!scrollable.value) {
-    return;
-  }
-
-  const activeTab = scrollable.value.querySelector(
-    '.active'
-  ) as HTMLElement | null;
-
-  if (!activeTab) {
-    return;
-  }
-
-  const scrollableRect = scrollable.value.getBoundingClientRect();
-  const activeTabRect = activeTab.getBoundingClientRect();
-
-  const scrollLeft =
-    activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
-
-  scrollable.value.scrollTo({
-    left: scrollLeft,
-    behavior: 'smooth',
-  });
-}
-</script>
-
-<style scoped>
-.scrollable::-webkit-scrollbar {
-  display: none;
-}
-</style>
+<template>
+  <div class="relative">
+    <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
+    <div
+      ref="scrollable"
+      class="scrollable relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
+      <ul class="flex text-center">
+        <slot />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+const route = useRoute();
+const scrollable = ref<HTMLElement | null>(null);
+
+watch(
+  () => route.fullPath,
+  () => {
+    nextTick(() => {
+      scrollToCenter();
+    });
+  }
+);
+
+provide(
+  'tabs:size',
+  computed(() => props.size)
+);
+
+function scrollToCenter() {
+  if (!scrollable.value) {
+    return;
+  }
+
+  const activeTab = scrollable.value.querySelector(
+    '.active'
+  ) as HTMLElement | null;
+
+  if (!activeTab) {
+    return;
+  }
+
+  const scrollableRect = scrollable.value.getBoundingClientRect();
+  const activeTabRect = activeTab.getBoundingClientRect();
+
+  const scrollLeft =
+    activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
+
+  scrollable.value.scrollTo({
+    left: scrollLeft,
+    behavior: 'smooth',
+  });
+}
+</script>
+
+<style scoped>
+.scrollable::-webkit-scrollbar {
+  display: none;
+}
+</style>