sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseBadge.stories.js

@@ -1,124 +1,124 @@
-import BaseBadge from './BaseBadge.vue';
-
-import { palette } from '@/utils/colors';
-
-const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
-
-const sizes = ['sm', 'base', 'lg'];
-
-export default {
-  title: 'Components/BaseBadge',
-  component: BaseBadge,
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: colors,
-    },
-    size: {
-      control: { type: 'select' },
-      options: sizes,
-    },
-    contrast: {
-      control: { type: 'select' },
-      options: ['low', 'high'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseBadge v-bind="args">
-      Urgent
-    </BaseBadge>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  color: 'red',
-  icon: 'heroicons:exclamation-triangle-20-solid',
-  contrast: 'high',
-};
-
-export const Colors = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-Colors.args = {
-  contrast: 'high',
-};
-
-export const Contrast = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-Contrast.args = {
-  contrast: 'low',
-};
-
-export const Sizes = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="size in sizes" :key="size">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseBadge v-bind="args" :size="size" icon="heroicons:beaker-20-solid">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-export const Wrap = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div style="width: 200px; background-color: #eee; padding: 10px;">
-
-    <p class="text-xs text-slate-600 leading-tight mb-1">No Wrap</p>
-    
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
-      Administrator And More And More And More
-    </BaseBadge>
-
-    <br />
-    <br />
-
-    <p class="text-xs text-slate-600 leading-tight mb-1">Wrap</p>
-
-    <BaseBadge v-bind="args" :color="color" wrap icon="heroicons:beaker-20-solid">
-      Administrator And More And More And More
-    </BaseBadge>
-  </div>
-  `,
-});
+import BaseBadge from './BaseBadge.vue';
+
+import { palette } from '@/utils/colors';
+
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+
+const sizes = ['sm', 'base', 'lg'];
+
+export default {
+  title: 'Components/BaseBadge',
+  component: BaseBadge,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+    contrast: {
+      control: { type: 'select' },
+      options: ['low', 'high'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBadge v-bind="args">
+      Urgent
+    </BaseBadge>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  color: 'red',
+  icon: 'heroicons:exclamation-triangle-20-solid',
+  contrast: 'high',
+};
+
+export const Colors = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: 'high',
+};
+
+export const Contrast = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: 'low',
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseBadge v-bind="args" :size="size" icon="heroicons:beaker-20-solid">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+export const Wrap = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div style="width: 200px; background-color: #eee; padding: 10px;">
+
+    <p class="text-xs text-slate-600 leading-tight mb-1">No Wrap</p>
+    
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator And More And More And More
+    </BaseBadge>
+
+    <br />
+    <br />
+
+    <p class="text-xs text-slate-600 leading-tight mb-1">Wrap</p>
+
+    <BaseBadge v-bind="args" :color="color" wrap icon="heroicons:beaker-20-solid">
+      Administrator And More And More And More
+    </BaseBadge>
+  </div>
+  `,
+});

package/src/components/BaseBadge.vue

@@ -1,79 +1,79 @@
-<template>
-  <span
-    class="inline-flex items-center rounded-full font-medium leading-tight"
-    :class="[sizeClasses, wrapClasses]"
-    :style="colorStyle"
-  >
-    <BaseIcon
-      v-if="icon"
-      :icon="icon"
-      class="shrink-0"
-      :class="iconSizeClasses"
-    >
-    </BaseIcon>
-    <slot />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { getColorConfig } from '@/utils/colors';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-const props = withDefaults(
-  defineProps<{
-    contrast?: 'low' | 'high';
-    color?: string;
-    size?: 'sm' | 'base' | 'lg';
-    icon?: string;
-    wrap?: boolean;
-  }>(),
-  {
-    contrast: 'high',
-    color: 'gray',
-    size: 'base',
-    icon: undefined,
-  }
-);
-
-const colorStyle = computed((): Record<string, string> => {
-  const config = getColorConfig(props.color, props.contrast == 'high');
-
-  return {
-    backgroundColor: config.backgroundColor,
-    color: config.textColor,
-  };
-});
-
-const wrapClasses = computed(() => {
-  if (!props.wrap) {
-    return 'whitespace-nowrap';
-  }
-  return '';
-});
-
-const sizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'px-2 py-px text-[11px]';
-  }
-  if (props.size == 'base') {
-    return 'px-2.5 py-0.5 text-xs';
-  }
-  if (props.size == 'lg') {
-    return 'px-3 py-0.5 text-sm';
-  }
-  return 'px-2.5 py-0.5 text-xs';
-});
-
-const iconSizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'h-2.5 w-2.5 mr-1 -ml-px';
-  }
-  if (props.size == 'base') {
-    return 'h-3 w-3 mr-1 -ml-0.5';
-  }
-  if (props.size == 'lg') {
-    return 'h-4 w-4 mr-1 -ml-0.5';
-  }
-  return 'h-3 w-3 mr-1 -ml-0.5';
-});
-</script>
+<template>
+  <span
+    class="inline-flex items-center rounded-full font-medium leading-tight"
+    :class="[sizeClasses, wrapClasses]"
+    :style="colorStyle"
+  >
+    <BaseIcon
+      v-if="icon"
+      :icon="icon"
+      class="shrink-0"
+      :class="iconSizeClasses"
+    >
+    </BaseIcon>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { getColorConfig } from '@/utils/colors';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+const props = withDefaults(
+  defineProps<{
+    contrast?: 'low' | 'high';
+    color?: string;
+    size?: 'sm' | 'base' | 'lg';
+    icon?: string;
+    wrap?: boolean;
+  }>(),
+  {
+    contrast: 'high',
+    color: 'gray',
+    size: 'base',
+    icon: undefined,
+  }
+);
+
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  return {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
+});
+
+const wrapClasses = computed(() => {
+  if (!props.wrap) {
+    return 'whitespace-nowrap';
+  }
+  return '';
+});
+
+const sizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'px-2 py-px text-[11px]';
+  }
+  if (props.size == 'base') {
+    return 'px-2.5 py-0.5 text-xs';
+  }
+  if (props.size == 'lg') {
+    return 'px-3 py-0.5 text-sm';
+  }
+  return 'px-2.5 py-0.5 text-xs';
+});
+
+const iconSizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'h-2.5 w-2.5 mr-1 -ml-px';
+  }
+  if (props.size == 'base') {
+    return 'h-3 w-3 mr-1 -ml-0.5';
+  }
+  if (props.size == 'lg') {
+    return 'h-4 w-4 mr-1 -ml-0.5';
+  }
+  return 'h-3 w-3 mr-1 -ml-0.5';
+});
+</script>