sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseMenuItem.vue

@@ -1,177 +1,177 @@
-<template>
-  <div
-    :style="buttonStyles"
-    class="rounded text-left"
-    :class="[
-      !disabled ? 'hover:bg-slate-100' : '',
-      active && !disabled ? 'bg-slate-100' : 'bg-white',
-      disabled ? 'opacity-50 cursor-not-allowed' : ''
-    ]"
-  >
-    <div
-      class="flex"
-      :class="[description ? 'items-start' : 'items-center']"
-    >
-      <BaseIcon
-        v-if="icon"
-        :icon="icon"
-        :class="[iconClasses]"
-      />
-      <div class="grow">
-        <p :class="['font-medium leading-tight', textClasses, textColor]">
-          {{ label }}
-        </p>
-        <p
-          v-if="description"
-          class="text-xs text-slate-500"
-          :class="[size == 'xs' ? 'mt-px' : 'mt-0.5']"
-        >
-          {{ description }}
-        </p>
-      </div>
-      <div
-        v-if="count"
-        class="relative -top-px ml-3"
-      >
-        <BaseCounter
-          :count="count"
-          :max-digit="2"
-          :color="color"
-          :size="size"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, StyleValue } from 'vue';
-import BaseCounter from './BaseCounter.vue';
-import { ActionColors } from '@/types';
-
-const props = defineProps({
-  label: {
-    default: undefined,
-    type: String,
-  },
-  description: {
-    default: undefined,
-    type: String,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  count: {
-    default: undefined,
-    type: Number,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  color: {
-    default: 'dark',
-    type: String as PropType<ActionColors>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const textColor = computed((): string => {
-  if (props.color == 'dark') {
-    return 'text-slate-700';
-  } else if (props.color == 'light') {
-    return 'text-slate-600';
-  } else if (props.color == 'danger') {
-    return 'text-red-600';
-  } else if (props.color == 'success') {
-    return 'text-green-600';
-  } else if (props.color == 'warning') {
-    return 'text-yellow-600';
-  } else if (props.color == 'primary') {
-    return 'text-primary-600';
-  } else if (props.color == 'secondary') {
-    return 'text-slate-600';
-  }
-
-  return '';
-});
-
-const textClasses = computed((): string => {
-  if (props.size == 'xs') {
-    return 'text-xs';
-  } else if (props.size == 'sm') {
-    return 'text-sm';
-  } else if (props.size == 'md') {
-    return 'text-base';
-  }
-
-  return '';
-});
-
-const buttonStyles = computed((): StyleValue => {
-
-  let paddingY = 0.5;
-  let paddingLeft = 1;
-  let paddingRight = 1;
-
-  const baseStyles = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    lineHeight: '1.25rem',
-    text: 'left',
-    paddingTop: '',
-    paddingBottom: '',
-    paddingLeft: '',
-    paddingRight: '',
-  }
-
-  if (props.icon) {
-    paddingLeft = 0.5;
-    paddingRight = 1;
-  }
-
-  if (props.size == 'xs') {
-    paddingY = 0.3;
-    if (props.icon) {
-      paddingRight = 0.75;
-    }
-  } else if (props.size == 'sm') {
-    paddingY = 0.5;
-  } else if (props.size == 'md') {
-    paddingY = 0.5;
-  }
-
-  baseStyles.paddingLeft = paddingLeft + 'rem';
-  baseStyles.paddingRight = paddingRight + 'rem';
-  baseStyles.paddingTop = paddingY + 'rem';
-  baseStyles.paddingBottom = paddingY + 'rem';
-
-  return baseStyles;
-});
-
-const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 ';
-
-  if (props.size == 'xs') {
-    baseClasses += ' mr-2 ';
-  } else {
-    baseClasses += ' mr-3 ';
-  }
-
-  if (!props.active) {
-    baseClasses += ' opacity-70 ' + textColor.value;
-  }
-
-  return baseClasses;
-});
-</script>
+<template>
+  <div
+    :style="buttonStyles"
+    class="rounded text-left"
+    :class="[
+      !disabled ? 'hover:bg-slate-100' : '',
+      active && !disabled ? 'bg-slate-100' : 'bg-white',
+      disabled ? 'opacity-50 cursor-not-allowed' : ''
+    ]"
+  >
+    <div
+      class="flex"
+      :class="[description ? 'items-start' : 'items-center']"
+    >
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="[iconClasses]"
+      />
+      <div class="grow">
+        <p :class="['font-medium leading-tight', textClasses, textColor]">
+          {{ label }}
+        </p>
+        <p
+          v-if="description"
+          class="text-xs text-slate-500"
+          :class="[size == 'xs' ? 'mt-px' : 'mt-0.5']"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="count"
+        class="relative -top-px ml-3"
+      >
+        <BaseCounter
+          :count="count"
+          :max-digit="2"
+          :color="color"
+          :size="size"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, StyleValue } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+import { ActionColors } from '@/types';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  description: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  color: {
+    default: 'dark',
+    type: String as PropType<ActionColors>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const textColor = computed((): string => {
+  if (props.color == 'dark') {
+    return 'text-slate-700';
+  } else if (props.color == 'light') {
+    return 'text-slate-600';
+  } else if (props.color == 'danger') {
+    return 'text-red-600';
+  } else if (props.color == 'success') {
+    return 'text-green-600';
+  } else if (props.color == 'warning') {
+    return 'text-yellow-600';
+  } else if (props.color == 'primary') {
+    return 'text-primary-600';
+  } else if (props.color == 'secondary') {
+    return 'text-slate-600';
+  }
+
+  return '';
+});
+
+const textClasses = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  } else if (props.size == 'sm') {
+    return 'text-sm';
+  } else if (props.size == 'md') {
+    return 'text-base';
+  }
+
+  return '';
+});
+
+const buttonStyles = computed((): StyleValue => {
+
+  let paddingY = 0.5;
+  let paddingLeft = 1;
+  let paddingRight = 1;
+
+  const baseStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    lineHeight: '1.25rem',
+    text: 'left',
+    paddingTop: '',
+    paddingBottom: '',
+    paddingLeft: '',
+    paddingRight: '',
+  }
+
+  if (props.icon) {
+    paddingLeft = 0.5;
+    paddingRight = 1;
+  }
+
+  if (props.size == 'xs') {
+    paddingY = 0.3;
+    if (props.icon) {
+      paddingRight = 0.75;
+    }
+  } else if (props.size == 'sm') {
+    paddingY = 0.5;
+  } else if (props.size == 'md') {
+    paddingY = 0.5;
+  }
+
+  baseStyles.paddingLeft = paddingLeft + 'rem';
+  baseStyles.paddingRight = paddingRight + 'rem';
+  baseStyles.paddingTop = paddingY + 'rem';
+  baseStyles.paddingBottom = paddingY + 'rem';
+
+  return baseStyles;
+});
+
+const iconClasses = computed((): string => {
+  let baseClasses = ' w-5 h-5 shrink-0 ';
+
+  if (props.size == 'xs') {
+    baseClasses += ' mr-2 ';
+  } else {
+    baseClasses += ' mr-3 ';
+  }
+
+  if (!props.active) {
+    baseClasses += ' opacity-70 ' + textColor.value;
+  }
+
+  return baseClasses;
+});
+</script>

package/src/components/BaseModalCenter.stories.js

@@ -1,68 +1,68 @@
-import BaseModalCenter from "./BaseModalCenter.vue";
-import { Icon as BaseIcon } from "@iconify/vue";
-import BaseAvatar from "./BaseAvatar.vue";
-
-export default {
-  title: "Components/BaseModalCenter",
-  component: BaseModalCenter,
-  args: {
-    position: "bottom-right",
-  },
-  argTypes: {
-    verticalAlign: {
-      control: { type: "select" },
-      options: ["center", "top"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseModalCenter,
-    BaseIcon,
-    BaseAvatar,
-  },
-  setup() {
-    const show = ref(false);
-    return { args, show };
-  },
-  template: `
-    <div class="">
-      <button @click="show = true" class="btn">Show modal</button>
-      <BaseModalCenter v-model="show" v-bind="args">
-        <template #default="{close}">
-          <div class="p-8">
-            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
-
-            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
-
-            <button @click="close" class="btn mt-4">Close</button>
-          </div>
-        </template>
-      </BaseModalCenter>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const VerticalAlignTop = Template.bind({});
-VerticalAlignTop.args = {
-  verticalAlign: "top",
-};
-
-export const NoCloseButton = Template.bind({});
-NoCloseButton.args = {
-  showCloseButton: false,
-};
-
-export const CustomBackdropClass = Template.bind({});
-CustomBackdropClass.args = {
-  backdropClass: "bg-red-500 bg-opacity-70",
-};
-
-export const PreventLeave = Template.bind({});
-PreventLeave.args = {
-  closeOnOutsideClick: false,
-};
+import BaseModalCenter from "./BaseModalCenter.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+import BaseAvatar from "./BaseAvatar.vue";
+
+export default {
+  title: "Components/BaseModalCenter",
+  component: BaseModalCenter,
+  args: {
+    position: "bottom-right",
+  },
+  argTypes: {
+    verticalAlign: {
+      control: { type: "select" },
+      options: ["center", "top"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalCenter,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalCenter v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
+
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
+          </div>
+        </template>
+      </BaseModalCenter>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const VerticalAlignTop = Template.bind({});
+VerticalAlignTop.args = {
+  verticalAlign: "top",
+};
+
+export const NoCloseButton = Template.bind({});
+NoCloseButton.args = {
+  showCloseButton: false,
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: "bg-red-500 bg-opacity-70",
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};