sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseButtonGroup.vue

@@ -1,147 +1,147 @@
-<template>
-  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
-    <div
-      v-for="option in normalizedOptions"
-      :key="option.value ? option.value : 'null'"
-      :style="{ padding: spacing }"
-    >
-      <button
-        :type="buttonType"
-        :disabled="disabled"
-        :class="[
-          buttonClass,
-          isSelected(option) ? buttonSelectedClass : buttonUnselectedClass,
-        ]"
-        @click="onSelect(option)"
-      >
-        <slot
-          name="option"
-          :selected="computed(() => isSelected(option))"
-          :option="option"
-          :disabled="disabled"
-        >
-          {{ option.label }}
-        </slot>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, computed } from 'vue';
-import { NormalizedOption, Option } from '@/types';
-import { cloneDeep, isArray } from 'lodash';
-import { useHasOptions } from '@/composables/hasOptions';
-import { useField } from '@/composables/field';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [Object, Array, null, undefined] as PropType<
-      Option[] | Option | null | undefined
-    >,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  buttonType: {
-    default: 'button',
-    type: String as PropType<'button' | 'submit'>,
-  },
-  buttonClass: {
-    default: 'btn btn-sm',
-    type: String,
-  },
-  buttonSelectedClass: {
-    default: 'btn-primary',
-    type: String,
-  },
-  buttonUnselectedClass: {
-    default: '',
-    type: String,
-  },
-  spacing: {
-    default: '0.15rem',
-    type: String,
-  },
-  options: {
-    required: true,
-    type: Array as PropType<Option[]>,
-  },
-  labelKey: {
-    required: true,
-    type: String,
-  },
-  valueKey: {
-    required: true,
-    type: String,
-  },
-  multiple: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { requiredInternal, emitUpdate } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
-  computed(() => props.modelValue),
-  computed(() => props.options),
-  computed(() => props.labelKey),
-  computed(() => props.valueKey),
-  computed(() => props.multiple)
-);
-
-function onSelect(option: NormalizedOption) {
-  if (props.multiple) {
-    let newModalValue = [] as NormalizedOption[];
-
-    if (isArray(normalizedModelValue.value)) {
-      newModalValue = cloneDeep(normalizedModelValue.value);
-    }
-
-    const exists = newModalValue.find((o) => o.value == option.value);
-
-    if (exists) {
-      newModalValue = newModalValue.filter((o) => o.value != option.value);
-    } else {
-      newModalValue.push(option);
-    }
-
-    emitUpdate(newModalValue.map((o) => o.option));
-  } else {
-    if (!requiredInternal.value) {
-      if (
-        !isArray(normalizedModelValue.value) &&
-        option.value == normalizedModelValue.value?.value
-      ) {
-        emitUpdate(null);
-        return;
-      }
-    }
-
-    const newOption = option.option;
-    emitUpdate(newOption);
-  }
-}
-</script>
+<template>
+  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
+    <div
+      v-for="option in normalizedOptions"
+      :key="option.value ? option.value : 'null'"
+      :style="{ padding: spacing }"
+    >
+      <button
+        :type="buttonType"
+        :disabled="disabled"
+        :class="[
+          buttonClass,
+          isSelected(option) ? buttonSelectedClass : buttonUnselectedClass,
+        ]"
+        @click="onSelect(option)"
+      >
+        <slot
+          name="option"
+          :selected="computed(() => isSelected(option))"
+          :option="option"
+          :disabled="disabled"
+        >
+          {{ option.label }}
+        </slot>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue';
+import { NormalizedOption, Option } from '@/types';
+import { cloneDeep, isArray } from 'lodash';
+import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Object, Array, null, undefined] as PropType<
+      Option[] | Option | null | undefined
+    >,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  buttonType: {
+    default: 'button',
+    type: String as PropType<'button' | 'submit'>,
+  },
+  buttonClass: {
+    default: 'btn btn-sm',
+    type: String,
+  },
+  buttonSelectedClass: {
+    default: 'btn-primary',
+    type: String,
+  },
+  buttonUnselectedClass: {
+    default: '',
+    type: String,
+  },
+  spacing: {
+    default: '0.15rem',
+    type: String,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { requiredInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => props.multiple)
+);
+
+function onSelect(option: NormalizedOption) {
+  if (props.multiple) {
+    let newModalValue = [] as NormalizedOption[];
+
+    if (isArray(normalizedModelValue.value)) {
+      newModalValue = cloneDeep(normalizedModelValue.value);
+    }
+
+    const exists = newModalValue.find((o) => o.value == option.value);
+
+    if (exists) {
+      newModalValue = newModalValue.filter((o) => o.value != option.value);
+    } else {
+      newModalValue.push(option);
+    }
+
+    emitUpdate(newModalValue.map((o) => o.option));
+  } else {
+    if (!requiredInternal.value) {
+      if (
+        !isArray(normalizedModelValue.value) &&
+        option.value == normalizedModelValue.value?.value
+      ) {
+        emitUpdate(null);
+        return;
+      }
+    }
+
+    const newOption = option.option;
+    emitUpdate(newOption);
+  }
+}
+</script>

package/src/components/BaseCard.stories.js

@@ -1,61 +1,61 @@
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-
-export default {
-  title: 'Layout/BaseCard',
-  component: BaseCard,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseCard, BaseCardRow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseCard class="mb-3">
-      Content (no padding)
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow>
-        Content (with padding)
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow>
-        Row 1
-      </BaseCardRow>
-      <BaseCardRow>
-        Row 2
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow size="xs">
-        Row (xs)
-      </BaseCardRow>
-      <BaseCardRow size="sm">
-        Row (sm)
-      </BaseCardRow>
-      <BaseCardRow size="base">
-        Row (base)
-      </BaseCardRow>
-      <BaseCardRow size="lg">
-        Row (lg)
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard :clipped="false" class="mb-3">
-      <div class="p-5 bg-slate-300">Not clipped</div>
-    </BaseCard>
-
-    <BaseCard clipped class="mb-3">
-      <div class="p-5 bg-slate-300">Clipped</div>
-    </BaseCard>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+  title: 'Layout/BaseCard',
+  component: BaseCard,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseCard, BaseCardRow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCard class="mb-3">
+      Content (no padding)
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Content (with padding)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Row 1
+      </BaseCardRow>
+      <BaseCardRow>
+        Row 2
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow size="xs">
+        Row (xs)
+      </BaseCardRow>
+      <BaseCardRow size="sm">
+        Row (sm)
+      </BaseCardRow>
+      <BaseCardRow size="base">
+        Row (base)
+      </BaseCardRow>
+      <BaseCardRow size="lg">
+        Row (lg)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard :clipped="false" class="mb-3">
+      <div class="p-5 bg-slate-300">Not clipped</div>
+    </BaseCard>
+
+    <BaseCard clipped class="mb-3">
+      <div class="p-5 bg-slate-300">Clipped</div>
+    </BaseCard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCard.vue

@@ -1,49 +1,49 @@
-<template>
-  <div
-    ref="card"
-    class="border-t border-b border-slate-300 bg-white"
-    :class="{
-      'rounded-lg border-r border-l shadow-sm': width != windowWidth,
-      'relative isolate overflow-hidden': clipped,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { debounce } from 'lodash';
-
-defineProps({
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-// windowWidth should not be equal to width when the card is mounted
-const windowWidth = ref(1);
-const width = ref(0);
-const card = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-  window.addEventListener('resize', onResizeDebounced);
-  onResize();
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', onResizeDebounced);
-});
-
-const onResizeDebounced = debounce(() => {
-  onResize();
-}, 200);
-
-function onResize() {
-  windowWidth.value = document.body.clientWidth;
-  if (!card.value) {
-    return;
-  }
-  width.value = (card.value as HTMLElement).offsetWidth;
-}
-</script>
+<template>
+  <div
+    ref="card"
+    class="border-t border-b border-slate-300 bg-white"
+    :class="{
+      'rounded-lg border-r border-l shadow-sm': width != windowWidth,
+      'relative isolate overflow-hidden': clipped,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from 'lodash';
+
+defineProps({
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+// windowWidth should not be equal to width when the card is mounted
+const windowWidth = ref(1);
+const width = ref(0);
+const card = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  window.addEventListener('resize', onResizeDebounced);
+  onResize();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResizeDebounced);
+});
+
+const onResizeDebounced = debounce(() => {
+  onResize();
+}, 200);
+
+function onResize() {
+  windowWidth.value = document.body.clientWidth;
+  if (!card.value) {
+    return;
+  }
+  width.value = (card.value as HTMLElement).offsetWidth;
+}
+</script>

package/src/components/BaseCardRow.vue

@@ -1,34 +1,34 @@
-<template>
-  <div class="border-t border-slate-300 first:border-t-0">
-    <div :class="paddingClass">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      default: 'base',
-      type: String,
-    },
-  },
-  computed: {
-    paddingClass(): string {
-      if (this.size == 'xs') {
-        return 'md:p-3 p-2';
-      }
-      if (this.size == 'sm') {
-        return 'md:p-4 p-3';
-      }
-      if (this.size == 'lg') {
-        return 'md:p-8 p-6';
-      }
-      return 'md:p-6 px-4 py-5';
-    },
-  },
-});
-</script>
+<template>
+  <div class="border-t border-slate-300 first:border-t-0">
+    <div :class="paddingClass">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    size: {
+      default: 'base',
+      type: String,
+    },
+  },
+  computed: {
+    paddingClass(): string {
+      if (this.size == 'xs') {
+        return 'md:p-3 p-2';
+      }
+      if (this.size == 'sm') {
+        return 'md:p-4 p-3';
+      }
+      if (this.size == 'lg') {
+        return 'md:p-8 p-6';
+      }
+      return 'md:p-6 px-4 py-5';
+    },
+  },
+});
+</script>

package/src/components/BaseCharacterCounter.stories.js

@@ -1,30 +1,30 @@
-import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseInput from '@/components/BaseInput.vue';
-
-export default {
-  title: 'Components/BaseCharacterCounter',
-  component: BaseCharacterCounter,
-  args: {
-    text: 'Test',
-    max: 100,
-    min: 10,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCharacterCounter,
-    BaseInput,
-  },
-  setup() {
-    const text = ref('bla bla');
-    return { args, text };
-  },
-  template: `
-    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
-    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInput from '@/components/BaseInput.vue';
+
+export default {
+  title: 'Components/BaseCharacterCounter',
+  component: BaseCharacterCounter,
+  args: {
+    text: 'Test',
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref('bla bla');
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};