sprintify-ui 0.1.14 → 0.1.15

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

@@ -1,3 +1,4 @@
+import { ActionColors } from '@/types';
 import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     count: {
@@ -14,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary" | "white">;
+        type: PropType<ActionColors>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     count: {
@@ -31,10 +32,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary" | "white">;
+        type: PropType<ActionColors>;
     };
 }>>, {
-    color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "white";
+    color: ActionColors;
     size: "xs" | "sm" | "md";
     maxDigit: number;
 }>;

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

@@ -14,6 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     } | undefined;
     layout?: "default" | "compact" | undefined;
     breadcrumbs?: Breadcrumb[] | undefined;
+    maxActions?: number | undefined;
 }>, {
     subtitle: undefined;
     attributes: undefined;
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     badge: undefined;
     layout: string;
     breadcrumbs: undefined;
+    maxActions: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
     subtitle?: string | undefined;
@@ -36,6 +38,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     } | undefined;
     layout?: "default" | "compact" | undefined;
     breadcrumbs?: Breadcrumb[] | undefined;
+    maxActions?: number | undefined;
 }>, {
     subtitle: undefined;
     attributes: undefined;
@@ -43,6 +46,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     badge: undefined;
     layout: string;
     breadcrumbs: undefined;
+    maxActions: number;
 }>>>, {
     attributes: {
         icon: string;
@@ -57,6 +61,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         label: string;
         color: string;
     };
+    maxActions: number;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { ActionColors } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     label: {
         default: undefined;
@@ -18,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary">;
+        type: PropType<ActionColors>;
     };
     size: {
         default: string;
@@ -43,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"dark" | "light" | "danger" | "success" | "warning" | "primary">;
+        type: PropType<ActionColors>;
     };
     size: {
         default: string;
@@ -52,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     active: boolean;
-    color: "dark" | "light" | "danger" | "success" | "warning" | "primary";
+    color: ActionColors;
     icon: string;
     count: number;
     size: "xs" | "sm" | "md";

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

@@ -24,10 +24,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    hasIcon: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -36,14 +32,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
-    checkedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
-    unCheckedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: boolean;
@@ -69,10 +57,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    hasIcon: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -81,14 +65,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
-    checkedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
-    unCheckedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -98,11 +74,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";
-    hasIcon: boolean;
     checkedIcon: string;
     unCheckedIcon: string;
-    checkedIconColor: string;
-    unCheckedIconColor: string;
 }>, {
     default: (_: {}) => any;
 }>;

package/dist/types/src/types/index.d.ts

@@ -50,6 +50,7 @@ export interface ResourceCollection {
 export interface PaginatedCollection extends PaginationMetadata {
     data: Collection;
 }
+export type ActionColors = 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary' | 'secondary';
 export interface MenuItemInterface {
     label?: string;
     href?: string;
@@ -57,7 +58,7 @@ export interface MenuItemInterface {
     action?: () => Promise<void> | void;
     icon?: string;
     count?: number;
-    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+    color?: ActionColors;
     line?: boolean;
 }
 export interface ActionItem {
@@ -67,7 +68,7 @@ export interface ActionItem {
     action?: () => Promise<void> | void;
     icon?: string;
     count?: number;
-    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+    color?: ActionColors;
     disabled?: boolean;
     meta?: Record<string, any>;
     actions?: ActionItem[];

package/package.json

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

package/src/components/BaseActionItemButton.vue

@@ -36,6 +36,8 @@ const classes = computed(() => {
 
   if (props.action.color == 'primary') {
     classList.push('btn-primary');
+  } else if (props.action.color == 'secondary') {
+    classList.push('btn-secondary-outline');
   } else if (props.action.color == 'danger') {
     classList.push('btn-danger');
   } else if (props.action.color == 'warning') {

package/src/components/BaseCounter.stories.js

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     color: {
       control: { type: 'select' },
-      options: ['primary', 'danger', 'dark', 'light', 'white'],
+      options: ['primary', 'secondary', 'danger', 'dark', 'light', 'white'],
     },
     size: {
       control: { type: 'select' },

package/src/components/BaseCounter.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ActionColors } from '@/types';
 import { padStart } from 'lodash';
 import { PropType } from 'vue';
 
@@ -26,9 +27,7 @@ const props = defineProps({
   },
   color: {
     default: 'danger',
-    type: String as PropType<
-      'danger' | 'primary' | 'success' | 'warning' | 'dark' | 'light' | 'white'
-    >,
+    type: String as PropType<ActionColors>,
   },
 });
 
@@ -69,6 +68,9 @@ const colorClass = computed((): string => {
   if (props.color == 'primary') {
     return 'bg-primary-500 text-white';
   }
+  if (props.color == 'secondary') {
+    return 'bg-primary-200 text-primary-800';
+  }
   if (props.color == 'dark') {
     return 'bg-slate-900 text-white';
   }

package/src/components/BaseHeader.stories.js

@@ -35,11 +35,6 @@ const attributes = [
 ];
 
 const actions = [
-  {
-    label: 'Edit',
-    to: '/articles',
-    icon: 'heroicons:pencil-solid',
-  },
   {
     label: 'View',
     icon: 'heroicons:link-solid',
@@ -47,6 +42,18 @@ const actions = [
       alert('View');
     },
   },
+  {
+    label: 'Edit',
+    to: '/articles',
+    icon: 'heroicons:pencil-solid',
+  },
+  {
+    label: 'Publish 2',
+    to: '/articles',
+    color: 'secondary',
+    icon: 'heroicons:check-solid',
+  },
+
   {
     label: 'Publish',
     to: '/articles',

package/src/components/BaseHeader.vue

@@ -61,46 +61,38 @@
         </div>
       </div>
 
-      <div v-if="compactLayout" class="mt-5 flex gap-2">
-        <BaseActionItemButton
-          v-if="primaryAction"
-          :action="primaryAction"
-          size="sm"
-        />
-
-        <BaseMenu
-          v-if="secondaryActions.length > 1"
-          :items="secondaryActions"
-          size="sm"
-          position="bottom-right"
+      <div class="mt-5">
+        <div
+          class="flex gap-2"
+          :class="{
+            'lg:mt-0 lg:ml-4': !compactLayout,
+          }"
         >
-          <template #button="{ open }">
-            <div
-              class="btn btn-sm flex items-center gap-1 hover:border-slate-400"
-              :class="[open ? 'bg-slate-100' : '']"
-            >
-              <span>{{ $t('sui.more') }}</span>
-              <BaseIcon
-                icon="heroicons:chevron-down-solid"
-                class="h-5 w-5 text-slate-500"
-              />
-            </div>
-          </template>
-        </BaseMenu>
-        <BaseActionItemButton
-          v-else-if="secondaryActions.length === 1"
-          :action="secondaryActions[0]"
-          size="sm"
-        />
-      </div>
-
-      <div v-else class="mt-5 flex gap-2 lg:mt-0 lg:ml-4">
-        <BaseActionItemButton
-          v-for="action in actions"
-          :key="action.label"
-          :action="action"
-          size="sm"
-        />
+          <BaseActionItemButton
+            v-for="(primaryAction, i) in primaryActions"
+            :key="i"
+            :action="primaryAction"
+            size="sm"
+          />
+          <BaseMenu
+            v-if="secondaryActions.length"
+            :items="secondaryActions"
+            size="sm"
+            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
+          >
+            <template #button="{ open }">
+              <div
+                class="btn btn-sm flex items-center rounded-full p-2 hover:border-slate-400"
+                :class="[open ? 'bg-slate-100' : '']"
+              >
+                <BaseIcon
+                  icon="heroicons-outline:dots-horizontal"
+                  class="h-4 w-4 text-slate-500"
+                />
+              </div>
+            </template>
+          </BaseMenu>
+        </div>
       </div>
     </div>
   </div>
@@ -113,6 +105,7 @@ import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseActionItemButton from './BaseActionItemButton.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseMenu from './BaseMenu.vue';
+import { cloneDeep } from 'lodash';
 
 const props = withDefaults(
   defineProps<{
@@ -123,6 +116,7 @@ const props = withDefaults(
     badge?: { icon: string; label: string; color: string };
     layout?: 'default' | 'compact';
     breadcrumbs?: Breadcrumb[];
+    maxActions?: number;
   }>(),
   {
     subtitle: undefined,
@@ -131,59 +125,64 @@ const props = withDefaults(
     badge: undefined,
     layout: 'default',
     breadcrumbs: undefined,
+    maxActions: 3,
   }
 );
 
-const primaryActionIndex = computed(() => {
-  if (!props.actions || props.actions.length === 0) {
-    return undefined;
-  }
-
-  if (props.actions?.length === 1) {
-    return 0;
-  }
+const baseHeaderRef = ref<HTMLElement | null>(null);
 
-  const primaryIndex = props.actions?.findIndex((a) => a.color == 'primary');
+const width = ref(800);
+useResizeObserver(baseHeaderRef, () => {
+  width.value = baseHeaderRef.value?.clientWidth ?? 800;
+});
 
-  if (primaryIndex !== -1) {
-    return primaryIndex;
+const compactLayout = computed(() => {
+  if (props.layout === 'compact') {
+    return true;
   }
-
-  return 0;
+  return width.value < 500;
 });
 
-const primaryAction = computed(() => {
-  if (!props.actions) {
-    return undefined;
+const maxActionsInternal = computed(() => {
+  if (compactLayout.value) {
+    return 1;
   }
+  return Math.max(1, props.maxActions);
+});
 
-  const index = primaryActionIndex.value;
-
-  if (index !== undefined) {
-    return props.actions[index];
+const primaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
   }
 
-  return null;
+  return cloneDeep(props.actions)
+    .sort(sortByColor(false))
+    .slice(0, maxActionsInternal.value)
+    .sort(sortByColor(true));
 });
 
+function sortByColor(reverse = false) {
+  const sortingArr = ['secondary', 'primary'];
+
+  return (a: ActionItem, b: ActionItem) => {
+    if (!reverse) {
+      return (
+        sortingArr.indexOf(b.color ?? '') - sortingArr.indexOf(a.color ?? '')
+      );
+    }
+    return (
+      sortingArr.indexOf(a.color ?? '') - sortingArr.indexOf(b.color ?? '')
+    );
+  };
+}
+
 const secondaryActions = computed(() => {
   if (!props.actions) {
     return [];
   }
-  return props.actions?.filter((a, i) => i !== primaryActionIndex.value);
-});
 
-const baseHeaderRef = ref<HTMLElement | null>(null);
-
-const width = ref(800);
-useResizeObserver(baseHeaderRef, () => {
-  width.value = baseHeaderRef.value?.clientWidth ?? 800;
-});
-
-const compactLayout = computed(() => {
-  if (props.layout === 'compact') {
-    return true;
-  }
-  return width.value < 500;
+  return props.actions.filter(
+    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
+  );
 });
 </script>

package/src/components/BaseMenuItem.vue

@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
+import { ActionColors } from '@/types';
 
 const props = defineProps({
   label: {
@@ -33,9 +34,7 @@ const props = defineProps({
   },
   color: {
     default: 'dark',
-    type: String as PropType<
-      'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary'
-    >,
+    type: String as PropType<ActionColors>,
   },
   size: {
     default: 'md',
@@ -56,6 +55,8 @@ const textColor = computed((): string => {
     return 'text-yellow-600';
   } else if (props.color == 'primary') {
     return 'text-primary-600';
+  } else if (props.color == 'secondary') {
+    return 'text-slate-600';
   }
 
   return '';

package/src/components/BaseSwitch.stories.js

@@ -118,11 +118,14 @@ const Icons = (args) => ({
     return { args, value };
   },
   template: `
-    <BaseSwitch v-model="value" :hasIcon="true" v-bind="args">
+    <BaseSwitch v-model="value" v-bind="args">
       <span class="text-slate-600">Label</span>
     </BaseSwitch>
   `,
 });
 
 export const WithIcons = Icons.bind({});
-WithIcons.args = {};
+WithIcons.args = {
+  checkedIcon: 'heroicons-solid:check',
+  unCheckedIcon: 'heroicons-solid:x',
+};

package/src/components/BaseSwitch.vue

@@ -20,12 +20,11 @@
             height: sizePx + 'px',
             width: sizePx + 'px',
             transform: `translateX(${translateX}px)`,
-            color: iconColor,
             fontSize: sizePx - 7 + 'px',
           }"
-          class="flex items-center justify-center inline-block transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none ring-0"
+          class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
         >
-          <BaseIcon v-if="hasIcon" :icon="icon" />
+          <BaseIcon v-if="icon" :icon="icon" />
         </span>
       </Switch>
       <SwitchLabel v-if="$slots.default" class="cursor-pointer">
@@ -70,24 +69,12 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  hasIcon: {
-    default: false,
-    type: Boolean,
-  },
   checkedIcon: {
-    default: 'heroicons-solid:check',
+    default: '',
     type: String,
   },
   unCheckedIcon: {
-    default: 'heroicons-solid:x',
-    type: String,
-  },
-  checkedIconColor: {
-    default: '#9ca3af',
-    type: String,
-  },
-  unCheckedIconColor: {
-    default: '#9ca3af',
+    default: '',
     type: String,
   },
 });
@@ -206,26 +193,12 @@ const translateX = computed(() => {
   return padding.value;
 });
 
-const iconColor = computed(() => {
-  if (props.hasIcon) {
-    if (props.modelValue) {
-      return props.checkedIconColor;
-    }
-    if (!props.modelValue) {
-      return props.unCheckedIconColor;
-    }
-  }
-  return '';
-});
-
 const icon = computed(() => {
-  if (props.hasIcon) {
-    if (props.modelValue) {
-      return props.checkedIcon;
-    }
-    if (!props.modelValue) {
-      return props.unCheckedIcon;
-    }
+  if (props.modelValue && props.checkedIcon) {
+    return props.checkedIcon;
+  }
+  if (!props.modelValue && props.unCheckedIcon) {
+    return props.unCheckedIcon;
   }
   return null;
 });

package/src/types/index.ts

@@ -65,6 +65,15 @@ export interface PaginatedCollection extends PaginationMetadata {
   data: Collection;
 }
 
+export type ActionColors =
+  | 'dark'
+  | 'light'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'primary'
+  | 'secondary';
+
 export interface MenuItemInterface {
   label?: string;
   href?: string;
@@ -72,7 +81,7 @@ export interface MenuItemInterface {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
-  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+  color?: ActionColors;
   line?: boolean;
 }
 
@@ -83,7 +92,7 @@ export interface ActionItem {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
-  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+  color?: ActionColors;
   disabled?: boolean;
   meta?: Record<string, any>;
   actions?: ActionItem[];