sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseColor.vue

@@ -1,155 +1,155 @@
-<template>
-  <BaseButtonGroup
-    :model-value="normalizeModelValue"
-    :disabled="disabled"
-    value-key="value"
-    label-key="label"
-    :size="size"
-    :required="required"
-    :options="colorOptions"
-    :multiple="multiple"
-    :button-type="buttonType"
-    :button-color="buttonColor"
-    tw-button="p-0 aspect-1 justify-center items-center"
-    @update:model-value="(value) => transformModelValue(value)"
-  >
-    <template #option="option">
-      <div
-        v-if="option.selected.value"
-        class="overflow-hidden flex h-full"
-      >
-        <BaseIcon
-          icon="heroicons-solid:check-circle"
-          class="block leading-none"
-          width="18"
-          height="18"
-        />
-      </div>
-      <div v-else />
-    </template>
-  </BaseButtonGroup>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { BaseButtonGroup } from '.';
-import { isArray } from 'lodash';
-import { useField } from '@/composables/field';
-import { RawOption } from '@/types';
-import { palette } from '@/utils/colors';
-import { getContrast } from 'color2k';
-import { Size } from '@/utils/sizes';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, Array, null, undefined] as PropType<
-      string | string[] | null | undefined
-    >,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  buttonType: {
-    default: 'button',
-    type: String as PropType<'button' | 'submit'>,
-  },
-  colors: {
-    type: [Array] as PropType<string[]>,
-    default() {
-      return Object.values(palette).map((p) => p.high.backgroundColor);
-    },
-  },
-  buttonColor: {
-    default(option: RawOption, selected: boolean) {
-      return option.value;
-    },
-    type: Function as PropType<(option: RawOption, selected: boolean) => string>,
-  },
-  multiple: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const colorOptions = computed(() => {
-  return props.colors.map((c) => {
-    return {
-      label: c,
-      value: c,
-      hasLowContrast: hasLowContrast(c),
-    };
-  });
-});
-
-function hasLowContrast(color: string): boolean {
-  return getContrast(color, '#fff') < 1.38;
-}
-
-const normalizeModelValue = computed(() => {
-  return isArray(props.modelValue)
-    ? props.modelValue?.map((m) => {
-      return {
-        label: m,
-        value: m,
-      };
-    })
-    : {
-      label: props.modelValue,
-      value: props.modelValue,
-    };
-});
-
-const { emitUpdate } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-function transformModelValue(payload: RawOption | RawOption[] | null) {
-  if (props.multiple) {
-    let newModalValue = [] as string[];
-
-    if (isArray(payload)) {
-      newModalValue = payload.map((option) => {
-        return option.value;
-      });
-    }
-
-    emitUpdate(newModalValue);
-  } else {
-    if (payload == null) {
-      emitUpdate(null);
-      return;
-    }
-
-    if (isArray(payload)) {
-      emitUpdate(null);
-      return;
-    }
-
-    const newOption = payload.value;
-    emitUpdate(newOption);
-  }
-}
-</script>
+<template>
+  <BaseButtonGroup
+    :model-value="normalizeModelValue"
+    :disabled="disabled"
+    value-key="value"
+    label-key="label"
+    :size="size"
+    :required="required"
+    :options="colorOptions"
+    :multiple="multiple"
+    :button-type="buttonType"
+    :button-color="buttonColor"
+    tw-button="p-0 aspect-1 justify-center items-center"
+    @update:model-value="(value) => transformModelValue(value)"
+  >
+    <template #option="option">
+      <div
+        v-if="option.selected.value"
+        class="overflow-hidden flex h-full"
+      >
+        <BaseIcon
+          icon="heroicons-solid:check-circle"
+          class="block leading-none"
+          width="18"
+          height="18"
+        />
+      </div>
+      <div v-else />
+    </template>
+  </BaseButtonGroup>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseButtonGroup } from '.';
+import { isArray } from 'lodash';
+import { useField } from '@/composables/field';
+import { RawOption } from '@/types';
+import { palette } from '@/utils/colors';
+import { getContrast } from 'color2k';
+import { Size } from '@/utils/sizes';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Array, null, undefined] as PropType<
+      string | string[] | null | undefined
+    >,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  buttonType: {
+    default: 'button',
+    type: String as PropType<'button' | 'submit'>,
+  },
+  colors: {
+    type: [Array] as PropType<string[]>,
+    default() {
+      return Object.values(palette).map((p) => p.high.backgroundColor);
+    },
+  },
+  buttonColor: {
+    default(option: RawOption, selected: boolean) {
+      return option.value;
+    },
+    type: Function as PropType<(option: RawOption, selected: boolean) => string>,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const colorOptions = computed(() => {
+  return props.colors.map((c) => {
+    return {
+      label: c,
+      value: c,
+      hasLowContrast: hasLowContrast(c),
+    };
+  });
+});
+
+function hasLowContrast(color: string): boolean {
+  return getContrast(color, '#fff') < 1.38;
+}
+
+const normalizeModelValue = computed(() => {
+  return isArray(props.modelValue)
+    ? props.modelValue?.map((m) => {
+      return {
+        label: m,
+        value: m,
+      };
+    })
+    : {
+      label: props.modelValue,
+      value: props.modelValue,
+    };
+});
+
+const { emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+function transformModelValue(payload: RawOption | RawOption[] | null) {
+  if (props.multiple) {
+    let newModalValue = [] as string[];
+
+    if (isArray(payload)) {
+      newModalValue = payload.map((option) => {
+        return option.value;
+      });
+    }
+
+    emitUpdate(newModalValue);
+  } else {
+    if (payload == null) {
+      emitUpdate(null);
+      return;
+    }
+
+    if (isArray(payload)) {
+      emitUpdate(null);
+      return;
+    }
+
+    const newOption = payload.value;
+    emitUpdate(newOption);
+  }
+}
+</script>

package/src/components/BaseContainer.stories.js

@@ -1,34 +1,34 @@
-import BaseContainer from "./BaseContainer.vue";
-
-export default {
-  title: "Layout/BaseContainer",
-  description: "Lorem",
-  component: BaseContainer,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "full"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseContainer },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="bg-slate-100 py-16">
-    <BaseContainer v-bind="args">
-      <div class="bg-white py-5 border-2 border-dashed border-slate-400 rounded">
-        <p class="text-center">Default slot</p>
-      </div>
-    </BaseContainer>
-  </div>`,
-});
-
-export const Demo = Template.bind({});
-
-Demo.args = {
-  size: "7xl",
-};
+import BaseContainer from "./BaseContainer.vue";
+
+export default {
+  title: "Layout/BaseContainer",
+  description: "Lorem",
+  component: BaseContainer,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "full"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseContainer },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-16">
+    <BaseContainer v-bind="args">
+      <div class="bg-white py-5 border-2 border-dashed border-slate-400 rounded">
+        <p class="text-center">Default slot</p>
+      </div>
+    </BaseContainer>
+  </div>`,
+});
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  size: "7xl",
+};

package/src/components/BaseContainer.vue

@@ -1,64 +1,64 @@
-<template>
-  <div
-    :class="classInternal"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { twMerge } from 'tailwind-merge';
-
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const sizes = {
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  '2xl': 'max-w-2xl',
-  '3xl': 'max-w-3xl',
-  '4xl': 'max-w-4xl',
-  '5xl': 'max-w-5xl',
-  '6xl': 'max-w-6xl',
-  '7xl': 'max-w-7xl',
-  full: 'max-w-full',
-} as { [key: string]: string };
-
-type Size = keyof typeof sizes;
-
-const props = withDefaults(defineProps<{
-  class?: string | string[];
-  size?: Size,
-  paddinglessMobile?: boolean;
-  fluid?: boolean;
-}>(), {
-  class: '',
-  size: '7xl',
-  paddinglessMobile: false,
-  fluid: false,
-});
-
-const widthClass = computed(() => {
-  if (props.fluid) {
-    return 'max-w-full';
-  }
-
-  return sizes[props.size] || 'max-w-5xl';
-});
-
-const classInternal = computed(() => {
-
-  const baseClass = 'mx-auto w-full';
-  const paddingClass = props.paddinglessMobile ? 'px-0 md:px-8' : 'px-4 md:px-8';
-
-  return twMerge(
-    baseClass,
-    paddingClass,
-    widthClass.value,
-    props.class,
-  );
-});
-
-</script>
+<template>
+  <div
+    :class="classInternal"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge';
+
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const sizes = {
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  full: 'max-w-full',
+} as { [key: string]: string };
+
+type Size = keyof typeof sizes;
+
+const props = withDefaults(defineProps<{
+  class?: string | string[];
+  size?: Size,
+  paddinglessMobile?: boolean;
+  fluid?: boolean;
+}>(), {
+  class: '',
+  size: '7xl',
+  paddinglessMobile: false,
+  fluid: false,
+});
+
+const widthClass = computed(() => {
+  if (props.fluid) {
+    return 'max-w-full';
+  }
+
+  return sizes[props.size] || 'max-w-5xl';
+});
+
+const classInternal = computed(() => {
+
+  const baseClass = 'mx-auto w-full';
+  const paddingClass = props.paddinglessMobile ? 'px-0 md:px-8' : 'px-4 md:px-8';
+
+  return twMerge(
+    baseClass,
+    paddingClass,
+    widthClass.value,
+    props.class,
+  );
+});
+
+</script>

package/src/components/BaseCounter.stories.js

@@ -1,47 +1,47 @@
-import BaseCounter from "./BaseCounter.vue";
-
-export default {
-  title: "Data/BaseCounter",
-  component: BaseCounter,
-  argTypes: {
-    color: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "danger", "dark", "light", "white"],
-    },
-    size: {
-      control: { type: "select" },
-      options: ["xs", "sm", "base"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseCounter },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseCounter v-bind="args"></BaseCounter>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  count: 0.01,
-  maxDigit: 2,
-};
-
-export const SizeXS = Template.bind({});
-SizeXS.args = {
-  size: "xs",
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  size: "sm",
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  size: "md",
-};
+import BaseCounter from "./BaseCounter.vue";
+
+export default {
+  title: "Data/BaseCounter",
+  component: BaseCounter,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "danger", "dark", "light", "white"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "base"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseCounter },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCounter v-bind="args"></BaseCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  count: 0.01,
+  maxDigit: 2,
+};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: "xs",
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: "sm",
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: "md",
+};