sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseRadioGroup.stories.js

@@ -1,88 +1,88 @@
-import { options } from '../../.storybook/utils';
-import BaseRadioGroup from './BaseRadioGroup.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseRadioGroup',
-  component: BaseRadioGroup,
-  argTypes: {},
-  args: {
-    labelKey: 'label',
-    valueKey: 'value',
-    options: options,
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseRadioGroup, ShowValue },
-  setup() {
-    const value = ref(options[0].value);
-    function onSubmit() {
-      alert('submit');
-    }
-    return { args, value, onSubmit };
-  },
-  template: `
-  <form @submit.prevent="onSubmit">
-    <BaseRadioGroup v-model="value" v-bind="args"></BaseRadioGroup>
-    <button type="submit" class="btn btn-primary mt-4">Submit</button>
-    <ShowValue :value="value">{{ value }}</ShowValue>
-  </form>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const SlotOption = (args) => ({
-  components: { BaseRadioGroup },
-  setup() {
-    const value = ref(null);
-
-    const options = [
-      { label: 'Red', value: 'red' },
-      { label: 'Blue', value: 'blue' },
-      { label: 'Green', value: 'green' },
-      { label: 'Black', value: 'black' },
-      { label: 'Gray', value: 'gray' },
-    ];
-
-    return { value, options, args };
-  },
-  template: `
-  <BaseRadioGroup
-    v-bind="args"
-    v-model="value"
-    :options="options"
-    label-class="flex space-x-2 items-start"
-  >
-    <template #option="{ option }">
-      <div>
-        <div class="flex items-center space-x-1">
-          <div style="height: 10px; width: 10px; border-radius: 4px;" :style="{ backgroundColor: option.value }"></div>
-          <div class="leading-none font-medium text-sm">{{ option.label }}</div>
-        </div>
-        <p class="text-slate-500 text-xs leading-tight">{{ option.value }}</p>
-      </div>
-    </template>
-  </BaseRadioGroup>
-  `,
-});
-
-export const Field = createFieldStory({
-  component: BaseRadioGroup,
-  componentName: 'BaseRadioGroup',
-  label: 'Choose your character',
-});
+import { options } from '../../.storybook/utils';
+import BaseRadioGroup from './BaseRadioGroup.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseRadioGroup',
+  component: BaseRadioGroup,
+  argTypes: {},
+  args: {
+    labelKey: 'label',
+    valueKey: 'value',
+    options: options,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseRadioGroup, ShowValue },
+  setup() {
+    const value = ref(options[0].value);
+    function onSubmit() {
+      alert('submit');
+    }
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit">
+    <BaseRadioGroup v-model="value" v-bind="args"></BaseRadioGroup>
+    <button type="submit" class="btn btn-primary mt-4">Submit</button>
+    <ShowValue :value="value">{{ value }}</ShowValue>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseRadioGroup },
+  setup() {
+    const value = ref(null);
+
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Green', value: 'green' },
+      { label: 'Black', value: 'black' },
+      { label: 'Gray', value: 'gray' },
+    ];
+
+    return { value, options, args };
+  },
+  template: `
+  <BaseRadioGroup
+    v-bind="args"
+    v-model="value"
+    :options="options"
+    label-class="flex space-x-2 items-start"
+  >
+    <template #option="{ option }">
+      <div>
+        <div class="flex items-center space-x-1">
+          <div style="height: 10px; width: 10px; border-radius: 4px;" :style="{ backgroundColor: option.value }"></div>
+          <div class="leading-none font-medium text-sm">{{ option.label }}</div>
+        </div>
+        <p class="text-slate-500 text-xs leading-tight">{{ option.value }}</p>
+      </div>
+    </template>
+  </BaseRadioGroup>
+  `,
+});
+
+export const Field = createFieldStory({
+  component: BaseRadioGroup,
+  componentName: 'BaseRadioGroup',
+  label: 'Choose your character',
+});

package/src/components/BaseRadioGroup.vue

@@ -1,122 +1,122 @@
-<template>
-  <div>
-    <ul class="space-y-3">
-      <li
-        v-for="option in normalizedOptions"
-        :key="option.value ? option.value : 'null'"
-      >
-        <label
-          :for="name + '-' + option.value"
-          class="cursor-pointer"
-          :class="[labelClass, disabled ? 'cursor-not-allowed opacity-50' : '']"
-        >
-          <input
-            :id="name + '-' + option.value"
-            type="radio"
-            :name="nameInternal"
-            :checked="isChecked(option)"
-            :required="requiredInternal"
-            :disabled="disabled"
-            :value="option.value"
-            :class="inputClass"
-            @input="emitUpdate(option.value)"
-          />
-
-          <slot name="option" :option="option">
-            <span class="text-sm">{{ option.label }}</span>
-          </slot>
-        </label>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { NormalizedOption, Option, OptionValue } from '@/types';
-import { useField } from '@/composables/field';
-import { uniqueId } from 'lodash';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, Number, null, undefined] as PropType<
-      OptionValue | undefined
-    >,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  options: {
-    required: true,
-    type: Array as PropType<Option[]>,
-  },
-  labelKey: {
-    required: true,
-    type: String,
-  },
-  valueKey: {
-    required: true,
-    type: String,
-  },
-  labelClass: {
-    default: 'flex space-x-2',
-    type: String,
-  },
-  inputClass: {
-    default: 'mt-0.5 border-slate-300',
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const dummyName = uniqueId('base-radio-');
-
-const normalizedName = computed<string>(() => {
-  if (props.name) {
-    return props.name;
-  }
-
-  return dummyName;
-});
-
-const { nameInternal, requiredInternal, emitUpdate } = useField({
-  name: normalizedName,
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-  errorType: 'alert',
-  labelClass: 'mb-3 font-medium',
-});
-
-function isChecked(option: NormalizedOption): boolean {
-  if (props.modelValue) {
-    return props.modelValue == option.value;
-  }
-  return false;
-}
-
-const normalizedOptions = computed((): NormalizedOption[] => {
-  return props.options.map((option) => {
-    return {
-      label: option[props.labelKey] as string,
-      value: option[props.valueKey] as string | number,
-      option: option,
-    } as NormalizedOption;
-  });
-});
-</script>
+<template>
+  <div>
+    <ul class="space-y-3">
+      <li
+        v-for="option in normalizedOptions"
+        :key="option.value ? option.value : 'null'"
+      >
+        <label
+          :for="name + '-' + option.value"
+          class="cursor-pointer"
+          :class="[labelClass, disabled ? 'cursor-not-allowed opacity-50' : '']"
+        >
+          <input
+            :id="name + '-' + option.value"
+            type="radio"
+            :name="nameInternal"
+            :checked="isChecked(option)"
+            :required="requiredInternal"
+            :disabled="disabled"
+            :value="option.value"
+            :class="inputClass"
+            @input="emitUpdate(option.value)"
+          />
+
+          <slot name="option" :option="option">
+            <span class="text-sm">{{ option.label }}</span>
+          </slot>
+        </label>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { NormalizedOption, Option, OptionValue } from '@/types';
+import { useField } from '@/composables/field';
+import { uniqueId } from 'lodash';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Number, null, undefined] as PropType<
+      OptionValue | undefined
+    >,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  labelClass: {
+    default: 'flex space-x-2',
+    type: String,
+  },
+  inputClass: {
+    default: 'mt-0.5 border-slate-300',
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dummyName = uniqueId('base-radio-');
+
+const normalizedName = computed<string>(() => {
+  if (props.name) {
+    return props.name;
+  }
+
+  return dummyName;
+});
+
+const { nameInternal, requiredInternal, emitUpdate } = useField({
+  name: normalizedName,
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+  errorType: 'alert',
+  labelClass: 'mb-3 font-medium',
+});
+
+function isChecked(option: NormalizedOption): boolean {
+  if (props.modelValue) {
+    return props.modelValue == option.value;
+  }
+  return false;
+}
+
+const normalizedOptions = computed((): NormalizedOption[] => {
+  return props.options.map((option) => {
+    return {
+      label: option[props.labelKey] as string,
+      value: option[props.valueKey] as string | number,
+      option: option,
+    } as NormalizedOption;
+  });
+});
+</script>

package/src/components/BaseReadMore.stories.js

@@ -1,30 +1,30 @@
-import BaseReadMore from './BaseReadMore.vue';
-import BaseContainer from './BaseContainer.vue';
-
-export default {
-  title: 'Components/BaseReadMore',
-  component: BaseReadMore,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseReadMore,
-    BaseContainer,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseContainer size="3xl">
-    <BaseReadMore v-bind="args">
-      <p class="text-slate-600">
-        Aute incididunt laborum in sint commodo reprehenderit et aliquip aliqua proident exercitation nostrud sunt. Consectetur laborum elit do non ullamco anim fugiat laboris non aliqua consequat culpa. Veniam aliquip irure et qui dolore eiusmod exercitation elit exercitation ad excepteur reprehenderit enim. Id laboris do eu amet qui Lorem excepteur. Eiusmod eiusmod est qui minim consectetur aliqua occaecat sit tempor nulla. Velit et eiusmod id ut adipisicing occaecat deserunt.Excepteur occaecat nulla deserunt Lorem eu mollit non esse. Velit do proident adipisicing labore ipsum nostrud ipsum pariatur magna. Consequat do reprehenderit eiusmod cupidatat cupidatat cupidatat reprehenderit. Aute fugiat ex fugiat in ut enim dolore est qui. Lorem irure eiusmod eiusmod cillum aute nostrud sint aute enim aute. Aliquip aliqua quis deserunt commodo fugiat incididunt sint qui proident.
-      </p>
-    </BaseReadMore>
-  </BaseContainer>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseReadMore from './BaseReadMore.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseReadMore',
+  component: BaseReadMore,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseReadMore,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="3xl">
+    <BaseReadMore v-bind="args">
+      <p class="text-slate-600">
+        Aute incididunt laborum in sint commodo reprehenderit et aliquip aliqua proident exercitation nostrud sunt. Consectetur laborum elit do non ullamco anim fugiat laboris non aliqua consequat culpa. Veniam aliquip irure et qui dolore eiusmod exercitation elit exercitation ad excepteur reprehenderit enim. Id laboris do eu amet qui Lorem excepteur. Eiusmod eiusmod est qui minim consectetur aliqua occaecat sit tempor nulla. Velit et eiusmod id ut adipisicing occaecat deserunt.Excepteur occaecat nulla deserunt Lorem eu mollit non esse. Velit do proident adipisicing labore ipsum nostrud ipsum pariatur magna. Consequat do reprehenderit eiusmod cupidatat cupidatat cupidatat reprehenderit. Aute fugiat ex fugiat in ut enim dolore est qui. Lorem irure eiusmod eiusmod cillum aute nostrud sint aute enim aute. Aliquip aliqua quis deserunt commodo fugiat incididunt sint qui proident.
+      </p>
+    </BaseReadMore>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseReadMore.vue

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <p
-      ref="content"
-      class="overflow-hidden whitespace-pre-line"
-      :style="showMore ? undefined : lineClampStyle"
-    >
-      <slot />
-    </p>
-    <button
-      v-if="!showMore && isClamped"
-      type="button"
-      class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
-      @click="showMore = true"
-    >
-      <span class="text-base font-medium">{{ t('sui.read_more') }}</span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useMutationObserver } from '@vueuse/core';
-import { StyleValue } from 'vue';
-import { t } from '@/i18n';
-
-const content = ref<null | HTMLParagraphElement>(null);
-
-const props = defineProps({
-  maxLines: {
-    default: 3,
-    type: Number,
-  },
-});
-
-const showMore = ref(false);
-const isClamped = ref(false);
-
-const lineClampStyle = computed((): StyleValue | undefined => {
-  return {
-    display: '-webkit-box',
-    '-webkit-line-clamp': props.maxLines,
-    '-webkit-box-orient': 'vertical',
-  };
-});
-
-onMounted(() => {
-  init();
-
-  useMutationObserver(
-    content.value,
-    () => {
-      showMore.value = false;
-      nextTick(() => {
-        init();
-      });
-    },
-    {
-      childList: true,
-      subtree: true,
-    }
-  );
-});
-
-function init() {
-  const el = content.value;
-
-  if (!el) {
-    return;
-  }
-
-  isClamped.value = el.scrollHeight > el.clientHeight;
-}
-</script>
+<template>
+  <div>
+    <p
+      ref="content"
+      class="overflow-hidden whitespace-pre-line"
+      :style="showMore ? undefined : lineClampStyle"
+    >
+      <slot />
+    </p>
+    <button
+      v-if="!showMore && isClamped"
+      type="button"
+      class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
+      @click="showMore = true"
+    >
+      <span class="text-base font-medium">{{ t('sui.read_more') }}</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMutationObserver } from '@vueuse/core';
+import { StyleValue } from 'vue';
+import { t } from '@/i18n';
+
+const content = ref<null | HTMLParagraphElement>(null);
+
+const props = defineProps({
+  maxLines: {
+    default: 3,
+    type: Number,
+  },
+});
+
+const showMore = ref(false);
+const isClamped = ref(false);
+
+const lineClampStyle = computed((): StyleValue | undefined => {
+  return {
+    display: '-webkit-box',
+    '-webkit-line-clamp': props.maxLines,
+    '-webkit-box-orient': 'vertical',
+  };
+});
+
+onMounted(() => {
+  init();
+
+  useMutationObserver(
+    content.value,
+    () => {
+      showMore.value = false;
+      nextTick(() => {
+        init();
+      });
+    },
+    {
+      childList: true,
+      subtree: true,
+    }
+  );
+});
+
+function init() {
+  const el = content.value;
+
+  if (!el) {
+    return;
+  }
+
+  isClamped.value = el.scrollHeight > el.clientHeight;
+}
+</script>