sprintify-ui 0.4.3 → 0.4.5

package/src/components/BaseColor.vue

@@ -1,154 +1,154 @@
-<template>
-  <div>
-    <BaseButtonGroup
-      :model-value="normalizeModelValue"
-      :disabled="disabled"
-      value-key="value"
-      label-key="label"
-      :required="required"
-      :options="colorOptions"
-      :multiple="multiple"
-      :button-type="buttonType"
-      tw-button=""
-      tw-button-selected=""
-      tw-button-unselected=""
-      @update:model-value="(value) => transformModelValue(value)"
-    >
-      <template #option="option">
-        <div
-          :style="{ backgroundColor: option.option.value + '' }"
-          class="box-border rounded-md border p-3"
-          :class="[
-            option.selected.value
-              ? option.option.option.hasLowContrast
-                ? 'text-slate-700'
-                : 'text-white'
-              : 'text-transparent',
-            disabled ? ' cursor-not-allowed opacity-50' : '',
-            option.option.option.hasLowContrast
-              ? 'border-slate-400'
-              : 'border-transparent',
-          ]"
-        >
-          <BaseIcon
-            icon="heroicons-solid:check-circle"
-            class="h-5 w-5"
-          />
-        </div>
-      </template>
-    </BaseButtonGroup>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { BaseButtonGroup } from '.';
-import { isArray } from 'lodash';
-import { useField } from '@/composables/field';
-import { Option } from '@/types';
-import { palette } from '@/utils/colors';
-import { getContrast } from 'color2k';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, Array, null, undefined] as PropType<
-      string | string[] | null | undefined
-    >,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  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);
-    },
-  },
-  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: Option | Option[] | 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>
+  <div>
+    <BaseButtonGroup
+      :model-value="normalizeModelValue"
+      :disabled="disabled"
+      value-key="value"
+      label-key="label"
+      :required="required"
+      :options="colorOptions"
+      :multiple="multiple"
+      :button-type="buttonType"
+      tw-button=""
+      tw-button-selected=""
+      tw-button-unselected=""
+      @update:model-value="(value) => transformModelValue(value)"
+    >
+      <template #option="option">
+        <div
+          :style="{ backgroundColor: option.option.value + '' }"
+          class="box-border rounded-md border p-3"
+          :class="[
+            option.selected.value
+              ? option.option.option.hasLowContrast
+                ? 'text-slate-700'
+                : 'text-white'
+              : 'text-transparent',
+            disabled ? ' cursor-not-allowed opacity-50' : '',
+            option.option.option.hasLowContrast
+              ? 'border-slate-400'
+              : 'border-transparent',
+          ]"
+        >
+          <BaseIcon
+            icon="heroicons-solid:check-circle"
+            class="h-5 w-5"
+          />
+        </div>
+      </template>
+    </BaseButtonGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseButtonGroup } from '.';
+import { isArray } from 'lodash';
+import { useField } from '@/composables/field';
+import { Option } from '@/types';
+import { palette } from '@/utils/colors';
+import { getContrast } from 'color2k';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Array, null, undefined] as PropType<
+      string | string[] | null | undefined
+    >,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  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);
+    },
+  },
+  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: Option | Option[] | 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,50 +1,50 @@
-<template>
-  <div
-    class="mx-auto w-full md:px-8"
-    :class="[width, { 'px-4': !paddinglessMobile }]"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      default: '7xl',
-      type: String,
-    },
-    paddinglessMobile: {
-      default: false,
-      type: Boolean,
-    },
-    fluid: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  computed: {
-    width() {
-      if (this.fluid) {
-        return 'max-w-full';
-      }
-
-      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 };
-
-      return sizes[this.size] || 'max-w-5xl';
-    },
-  },
-});
-</script>
+<template>
+  <div
+    class="mx-auto w-full md:px-8"
+    :class="[width, { 'px-4': !paddinglessMobile }]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    size: {
+      default: '7xl',
+      type: String,
+    },
+    paddinglessMobile: {
+      default: false,
+      type: Boolean,
+    },
+    fluid: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    width() {
+      if (this.fluid) {
+        return 'max-w-full';
+      }
+
+      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 };
+
+      return sizes[this.size] || 'max-w-5xl';
+    },
+  },
+});
+</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: 355,
-  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: 355,
+  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',
+};