sprintify-ui 0.4.5 → 0.4.6

package/src/components/BaseNavbarSideItem.vue

@@ -1,114 +1,114 @@
-<template>
-  <div>
-    <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
-      class="flex w-full"
-      @click="onClick"
-    >
-      <template #default="{ active }">
-        <BaseNavbarSideItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :active="active"
-          :count="item.count"
-          :dark="dark"
-          :size="size"
-        />
-      </template>
-    </BaseActionItem>
-
-    <div
-      v-if="showSubActions && item.actions && item.actions.length"
-      class="mt-2 mb-3"
-    >
-      <div
-        v-for="subItem in item.actions"
-        :key="subItem.label"
-      >
-        <BaseActionItem
-          :to="subItem.to"
-          :href="subItem.href"
-          :action="subItem.action"
-          :class="subItemClasses"
-        >
-          {{ subItem.label }}
-        </BaseActionItem>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue';
-import { ActionItem } from '@/types';
-import BaseActionItem from './BaseActionItem.vue';
-import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<ActionItem>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  actionsVisible: {
-    default: 'toggle',
-    type: String as PropType<'toggle' | 'always'>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const emit = defineEmits(['click']);
-
-async function onClick() {
-  emit('click');
-}
-
-const routeActive = computed((): boolean => {
-  if (!props.item.to) {
-    return false;
-  }
-
-  const link = useLink({ to: props.item.to });
-
-  return link.isActive.value;
-});
-
-const showSubActions = computed((): boolean => {
-  if (props.actionsVisible == 'always') {
-    return true;
-  }
-  if (!props.item.to) {
-    return true;
-  }
-  return routeActive.value;
-});
-
-const subItemClasses = computed((): string[] => {
-  const classList = ['flex w-full font-light'];
-
-  if (props.dark) {
-    classList.push('text-slate-300 hover:text-white');
-  } else {
-    classList.push('text-slate-900 hover:text-slate-600');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1');
-  } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5');
-  } else {
-    classList.push('pl-[40px] text-base mb-1');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div>
+    <BaseActionItem
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
+      :dark="dark"
+      class="flex w-full"
+      @click="onClick"
+    >
+      <template #default="{ active }">
+        <BaseNavbarSideItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :active="active"
+          :count="item.count"
+          :dark="dark"
+          :size="size"
+        />
+      </template>
+    </BaseActionItem>
+
+    <div
+      v-if="showSubActions && item.actions && item.actions.length"
+      class="mt-2 mb-3"
+    >
+      <div
+        v-for="subItem in item.actions"
+        :key="subItem.label"
+      >
+        <BaseActionItem
+          :to="subItem.to"
+          :href="subItem.href"
+          :action="subItem.action"
+          :class="subItemClasses"
+        >
+          {{ subItem.label }}
+        </BaseActionItem>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  actionsVisible: {
+    default: 'toggle',
+    type: String as PropType<'toggle' | 'always'>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+}
+
+const routeActive = computed((): boolean => {
+  if (!props.item.to) {
+    return false;
+  }
+
+  const link = useLink({ to: props.item.to });
+
+  return link.isActive.value;
+});
+
+const showSubActions = computed((): boolean => {
+  if (props.actionsVisible == 'always') {
+    return true;
+  }
+  if (!props.item.to) {
+    return true;
+  }
+  return routeActive.value;
+});
+
+const subItemClasses = computed((): string[] => {
+  const classList = ['flex w-full font-light'];
+
+  if (props.dark) {
+    classList.push('text-slate-300 hover:text-white');
+  } else {
+    classList.push('text-slate-900 hover:text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('pl-[33.5px] text-[13px] mb-1');
+  } else if (props.size == 'sm') {
+    classList.push('pl-[36px] text-sm mb-1.5');
+  } else {
+    classList.push('pl-[40px] text-base mb-1');
+  }
+
+  return classList;
+});
+</script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,111 +1,111 @@
-<template>
-  <div :class="classes">
-    <div class="group flex grow items-center">
-      <BaseIcon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClasses"
-      />
-      <span>{{ label }}</span>
-    </div>
-    <div
-      v-if="count"
-      class="relative -top-px ml-[5px]"
-    >
-      <BaseCounter
-        :size="size"
-        :count="count"
-        :max-digit="2"
-        :color="'primary'"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Icon as BaseIcon } from '@iconify/vue';
-import { PropType } from 'vue';
-import BaseCounter from './BaseCounter.vue';
-
-const props = defineProps({
-  label: {
-    default: undefined,
-    type: String,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  count: {
-    default: undefined,
-    type: Number,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const classes = computed(() => {
-  const classList = ['text-left rounded-md flex w-full'];
-
-  if (props.active) {
-    if (props.dark) {
-      classList.push('bg-slate-700 text-white');
-    } else {
-      classList.push('bg-slate-100 text-primary-700');
-    }
-  } else {
-    if (props.dark) {
-      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
-    } else {
-      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
-    }
-  }
-
-  if (props.size == 'xs') {
-    classList.push('text-[13px] px-2.5 py-1 font-medium');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('text-sm px-3 py-1.5 font-medium');
-  }
-
-  if (props.size == 'md') {
-    classList.push('text-base px-3 py-2 font-medium');
-  }
-
-  return classList;
-});
-
-const iconClasses = computed((): string[] => {
-  const classList = ['shrink-0 leading-none inline-block'];
-  if (props.active) {
-    classList.push('opacity-100');
-  } else {
-    classList.push('opacity-70 group-hover:opacity-100');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('w-3.5 h-3.5 mr-2');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('w-4 h-4 mr-2');
-  }
-
-  if (props.size == 'md') {
-    classList.push('w-5 h-5 mr-2');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div :class="classes">
+    <div class="group flex grow items-center">
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
+      <span>{{ label }}</span>
+    </div>
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :size="size"
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const classes = computed(() => {
+  const classList = ['text-left rounded-md flex w-full'];
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('bg-slate-700 text-white');
+    } else {
+      classList.push('bg-slate-100 text-primary-700');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
+    } else {
+      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
+    }
+  }
+
+  if (props.size == 'xs') {
+    classList.push('text-[13px] px-2.5 py-1 font-medium');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('text-sm px-3 py-1.5 font-medium');
+  }
+
+  if (props.size == 'md') {
+    classList.push('text-base px-3 py-2 font-medium');
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['shrink-0 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('w-3.5 h-3.5 mr-2');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('w-4 h-4 mr-2');
+  }
+
+  if (props.size == 'md') {
+    classList.push('w-5 h-5 mr-2');
+  }
+
+  return classList;
+});
+</script>

package/src/components/BasePagination.stories.js

@@ -1,35 +1,35 @@
-import BasePagination from './BasePagination.vue';
-
-export default {
-  title: 'Components/BasePagination',
-  component: BasePagination,
-  args: {
-    totalVisible: 12,
-    lastPage: 20,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BasePagination,
-  },
-  setup() {
-    const modelValue = ref(10);
-
-    return { args, modelValue };
-  },
-  template: `
-  <div>
-    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
-  </div>
-  <div style="max-width: 500px;">
-    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
-  </div>
-  <div style="max-width: 250px;">
-    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
-  </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BasePagination from './BasePagination.vue';
+
+export default {
+  title: 'Components/BasePagination',
+  component: BasePagination,
+  args: {
+    totalVisible: 12,
+    lastPage: 20,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePagination,
+  },
+  setup() {
+    const modelValue = ref(10);
+
+    return { args, modelValue };
+  },
+  template: `
+  <div>
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  <div style="max-width: 500px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  <div style="max-width: 250px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};