sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseBadge.vue

@@ -1,97 +1,118 @@
-<template>
-  <span
-    :class="classes"
-    :style="colorStyle"
-  >
-    <BaseIcon
-      v-if="icon"
-      :icon="icon"
-      class="shrink-0"
-      :class="iconSizeClasses"
-    />
-    <slot />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { getColorConfig } from '@/utils/colors';
-import { Size, sizes } from '@/utils/sizes';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { twMerge } from 'tailwind-merge';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(
-  defineProps<{
-    class?: string | string[];
-    contrast?: 'low' | 'high';
-    color?: string;
-    size?: Size;
-    icon?: string;
-    wrap?: boolean;
-    bordered?: boolean;
-  }>(),
-  {
-    class: undefined,
-    contrast: 'low',
-    color: 'gray',
-    size: 'md',
-    icon: undefined,
-  }
-);
-
-const colorStyle = computed((): Record<string, string> => {
-  const config = getColorConfig(props.color, props.contrast == 'high');
-
-  const styles: Record<string, string> = {
-    backgroundColor: config.backgroundColor,
-    color: config.textColor,
-  };
-
-  if (props.bordered) {
-    styles.borderColor = config.borderColor;
-    styles.borderWidth = '1px';
-    styles.borderStyle = 'solid';
-  }
-
-  return styles;
-});
-
-const sizeInternal = computed(() => {
-  if (!Object.keys(sizes).includes(props.size)) {
-    return 'md';
-  }
-
-  return props.size;
-});
-
-const classes = computed(() => {
-  const base = 'inline-flex items-center rounded leading-tight';
-  const size = {
-    xs: 'px-1 py-px text-[9px]',
-    sm: 'px-1.5 py-px text-[10px]',
-    md: 'px-1.5 py-0.5 text-xs',
-    lg: 'px-1.5 py-0.5 text-sm',
-    xl: 'px-2.5 py-1.5 text-sm',
-  }[sizeInternal.value];
-
-  const wrap = props.wrap ? '' : 'whitespace-nowrap';
-
-  return twMerge(base, wrap, size, props.class);
-})
-
-const iconSizeClasses = computed(() => {
-
-  const size = {
-    xs: 'h-2 w-2 mr-1',
-    sm: 'h-2.5 w-2.5 mr-1',
-    md: 'h-3 w-3 mr-1',
-    lg: 'h-4 w-4 mr-1',
-    xl: 'h-5 w-5 mr-1.5',
-  }[sizeInternal.value];
-
-  return size;
-});
-</script>
+<template>
+  <span
+    :class="classes"
+    :style="colorStyle"
+  >
+    <BaseIcon
+      v-if="icon"
+      :icon="icon"
+      class="shrink-0"
+      :class="iconSizeClasses"
+    />
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { getColorConfig } from '@/utils/colors';
+import { Size, sizes } from '@/utils/sizes';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[];
+    contrast?: 'low' | 'high';
+    color?: string;
+    size?: Size;
+    icon?: string;
+    wrap?: boolean;
+    bordered?: boolean;
+  }>(),
+  {
+    class: undefined,
+    contrast: 'low',
+    color: 'gray',
+    size: 'md',
+    icon: undefined,
+  }
+);
+
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
+
+  if (props.bordered) {
+    styles.borderColor = config.borderColor;
+    styles.borderWidth = '1px';
+    styles.borderStyle = 'solid';
+  }
+
+  return styles;
+});
+
+const sizeInternal = computed(() => {
+  if (!Object.keys(sizes).includes(props.size)) {
+    return 'md';
+  }
+
+  return props.size;
+});
+
+const slots = useSlots();
+
+const hasDefaultSlot = computed(() => !!(slots.default));
+
+const classes = computed(() => {
+  const base = 'inline-flex items-center rounded leading-tight';
+
+  const fontSize = {
+    xs: 'text-[9px]',
+    sm: 'text-[10px]',
+    md: 'text-xs',
+    lg: 'text-sm',
+    xl: 'text-sm',
+  }[sizeInternal.value];
+
+  const padding = {
+    xs: hasDefaultSlot.value ? 'px-1 py-px' : 'p-[3.7px]',
+    sm: hasDefaultSlot.value ? 'px-1.5 py-px' : 'p-[3.7px]',
+    md: hasDefaultSlot.value ? 'px-1.5 py-0.5' : 'p-1',
+    lg: hasDefaultSlot.value ? 'px-1.5 py-0.5' : 'p-1',
+    xl: hasDefaultSlot.value ? 'px-2.5 py-1.5' : 'p-1.5',
+  }[sizeInternal.value];
+
+  const wrap = props.wrap ? '' : 'whitespace-nowrap';
+
+  return twMerge(base, wrap, fontSize, padding, props.class);
+})
+
+const iconSizeClasses = computed(() => {
+
+  const size = {
+    xs: 'h-2 w-2',
+    sm: 'h-2.5 w-2.5',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+    xl: 'h-5 w-5',
+  }[sizeInternal.value];
+
+  const margin = {
+    xs: hasDefaultSlot.value ? 'mr-1' : '',
+    sm: hasDefaultSlot.value ? 'mr-1' : '',
+    md: hasDefaultSlot.value ? 'mr-1' : '',
+    lg: hasDefaultSlot.value ? 'mr-1' : '',
+    xl: hasDefaultSlot.value ? 'mr-1.5' : '',
+  }[sizeInternal.value];
+
+  return twMerge(size, margin);
+});
+</script>

package/src/components/BaseBelongsTo.stories.js

@@ -1,220 +1,220 @@
-import BaseBelongsTo from "./BaseBelongsTo.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { options } from "@/../.storybook/utils";
-import { createFieldStory, sizes } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseBelongsTo",
-  component: BaseBelongsTo,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-  args: {
-    options: options,
-    field: "label",
-    primaryKey: "value",
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseBelongsTo, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-      <BaseBelongsTo v-model="value" v-bind="args"></BaseBelongsTo>
-      <ShowValue :value="value" />
-    `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const LabelFunction = Template.bind({});
-LabelFunction.args = {
-  labelKey: (option) => {
-    return option.label + " (" + option.size + ")";
-  },
-};
-
-export const AlwaysShowDropdown = Template.bind({});
-AlwaysShowDropdown.args = {
-  inline: true,
-  dropdownShow: "always",
-};
-
-export const NoFocus = Template.bind({});
-NoFocus.args = {
-  visibleFocus: false,
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  inline: true,
-};
-
-export const ShowEmptyOption = Template.bind({});
-ShowEmptyOption.args = {
-  showEmptyOption: true,
-  emptyOptionLabel: "No Jedi",
-};
-
-export const Sizes = (args) => ({
-  components: { BaseBelongsTo },
-  setup() {
-    const value = ref(null);
-    return { args, sizes, value };
-  },
-  template: `
-  <div v-for="size in sizes" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
-    <BaseBelongsTo v-model="value" v-bind="args" :size="size"></BaseBelongsTo>
-  </div>
-  `,
-});
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  currentModel: options[0],
-  primaryKey: "value",
-  field: "label",
-  disabled: true,
-};
-
-export const SlotOption = (args) => {
-  return {
-    components: { BaseBelongsTo },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <BaseBelongsTo
-        v-model="value"
-        v-bind="args"
-      >
-        <template #option="{ option, active, selected }">
-          <div
-            class="rounded px-2 py-1"
-            :class="{
-              'hover:bg-slate-100': !active && !selected,
-              'bg-slate-200 hover:bg-slate-300': active && !selected,
-              'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-              'bg-blue-600 text-white hover:bg-blue-700': active && selected,
-            }"
-          >
-            <p class="text-sm font-medium">{{ option.label }}</p>
-            <p class="opacity-60 text-xs">{{ option.type }}</p>
-          </div>
-        </template>
-      </BaseBelongsTo>
-    `,
-  };
-};
-
-export const SlotFooter = (args) => {
-  return {
-    components: { BaseBelongsTo },
-    setup() {
-      const value = ref(null);
-      function onClick() {
-        setTimeout(() => {
-          alert(1);
-        }, 150);
-      }
-      return { args, value, onClick };
-    },
-    template: `
-      <BaseBelongsTo
-        v-model="value"
-        v-bind="args"
-      >
-        <template #footer>
-          <div class="text-center p-2 border-t">
-            <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
-          </div>
-        </template>
-      </BaseBelongsTo>
-    `,
-  };
-};
-
-export const SlotEmpty = (args) => {
-  return {
-    components: { BaseBelongsTo },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <BaseBelongsTo
-        v-model="value"
-        v-bind="args"
-      >
-        <template #empty="props">
-          <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
-        </template>
-      </BaseBelongsTo>
-    `,
-  };
-};
-
-export const WithSelect = (args) => {
-  return {
-    components: { BaseBelongsTo, ShowValue },
-    setup() {
-      const value = ref(options[0]);
-      const selected = ref(null);
-
-      const select = {
-        options: [
-          { label: "All", value: "all" },
-          { label: "Sith", value: "sith" },
-          { label: "Jedi", value: "jedi" },
-        ],
-        labelKey: "label",
-        valueKey: "value",
-        onChange: (option) => {
-          selected.value = option.value;
-        },
-      };
-
-      const options2 = computed(() => {
-        if (selected.value == "all" || !selected.value) {
-          return options;
-        }
-        return options.filter((option) => option.type === selected.value);
-      });
-
-      return { args, value, options2, selected, select };
-    },
-    template: `
-  <BaseBelongsTo
-    v-model="value"
-    v-bind="args"
-    :options="options2"
-    :select="select"
-  >
-  </BaseBelongsTo>
-
-  <div class="mb-2"></div>
-
-  <p class="text-xs mb-0">Selection</p>
-  <ShowValue class="mt-0 mb-2" :value="selected" />
-  
-  <p class="text-xs mb-0">Model Value</p>
-  <ShowValue class="mt-0" :value="value" />
-`,
-  };
-};
-
-export const Field = createFieldStory({
-  component: BaseBelongsTo,
-  componentName: "BaseBelongsTo",
-  label: "Article",
-});
+import BaseBelongsTo from "./BaseBelongsTo.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { options } from "@/../.storybook/utils";
+import { createFieldStory, sizes } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseBelongsTo",
+  component: BaseBelongsTo,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+  args: {
+    options: options,
+    field: "label",
+    primaryKey: "value",
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseBelongsTo, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+      <BaseBelongsTo v-model="value" v-bind="args"></BaseBelongsTo>
+      <ShowValue :value="value" />
+    `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.label + " (" + option.size + ")";
+  },
+};
+
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: "always",
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const ShowEmptyOption = Template.bind({});
+ShowEmptyOption.args = {
+  showEmptyOption: true,
+  emptyOptionLabel: "No Jedi",
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBelongsTo },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBelongsTo v-model="value" v-bind="args" :size="size"></BaseBelongsTo>
+  </div>
+  `,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  currentModel: options[0],
+  primaryKey: "value",
+  field: "label",
+  disabled: true,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="args"
+      >
+        <template #option="{ option, active, selected }">
+          <div
+            class="rounded px-2 py-1"
+            :class="{
+              'hover:bg-slate-100': !active && !selected,
+              'bg-slate-200 hover:bg-slate-300': active && !selected,
+              'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+              'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+            }"
+          >
+            <p class="text-sm font-medium">{{ option.label }}</p>
+            <p class="opacity-60 text-xs">{{ option.type }}</p>
+          </div>
+        </template>
+      </BaseBelongsTo>
+    `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      function onClick() {
+        setTimeout(() => {
+          alert(1);
+        }, 150);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="args"
+      >
+        <template #footer>
+          <div class="text-center p-2 border-t">
+            <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+          </div>
+        </template>
+      </BaseBelongsTo>
+    `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="args"
+      >
+        <template #empty="props">
+          <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
+        </template>
+      </BaseBelongsTo>
+    `,
+  };
+};
+
+export const WithSelect = (args) => {
+  return {
+    components: { BaseBelongsTo, ShowValue },
+    setup() {
+      const value = ref(options[0]);
+      const selected = ref(null);
+
+      const select = {
+        options: [
+          { label: "All", value: "all" },
+          { label: "Sith", value: "sith" },
+          { label: "Jedi", value: "jedi" },
+        ],
+        labelKey: "label",
+        valueKey: "value",
+        onChange: (option) => {
+          selected.value = option.value;
+        },
+      };
+
+      const options2 = computed(() => {
+        if (selected.value == "all" || !selected.value) {
+          return options;
+        }
+        return options.filter((option) => option.type === selected.value);
+      });
+
+      return { args, value, options2, selected, select };
+    },
+    template: `
+  <BaseBelongsTo
+    v-model="value"
+    v-bind="args"
+    :options="options2"
+    :select="select"
+  >
+  </BaseBelongsTo>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
+export const Field = createFieldStory({
+  component: BaseBelongsTo,
+  componentName: "BaseBelongsTo",
+  label: "Article",
+});