vueless 0.0.4 → 0.0.6

package/src/ui.form-select/index.stories.js

@@ -0,0 +1,339 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import USelect from "../ui.form-select";
+import URow from "../ui.container-row";
+import UBadge from "../ui.text-badge";
+
+export default {
+  id: "3080",
+  title: "Form Inputs & Controls / Select",
+  component: USelect,
+  args: {
+    label: "Label",
+    modelValue: "",
+    options: [
+      { id: 1, label: "value 1", badge: "10%" },
+      { id: 2, label: "value 2", badge: "20%" },
+      { id: 3, label: "value 3", badge: "30%" },
+      { id: 4, label: "value 4", badge: "40%" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(USelect.name),
+    modelValue: { control: { type: "text" } },
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "280px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { USelect },
+  setup() {
+    const slots = getSlotNames(USelect.name);
+
+    return { args, slots };
+  },
+  template: `
+    <USelect v-bind="args" v-model="args.modelValue">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </USelect>
+  `,
+});
+
+const multipleTemplate = (args) => ({
+  components: { USelect },
+  setup() {
+    const slots = getSlotNames(USelect.name);
+
+    return { args, slots };
+  },
+  template: `
+    <USelect v-bind="args" multiple v-model="args.modelValue">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </USelect>
+  `,
+});
+
+const OpenDirectionsTemplate = (args, { argTypes } = {}) => ({
+  components: { USelect, URow },
+  setup() {
+    return {
+      args,
+      openDirections: argTypes.openDirection.options,
+    };
+  },
+  template: `
+    <div class="flex flex-col gap-6">
+      <URow>
+        <USelect
+          v-for="(openDirection, index) in openDirections"
+          :key="index"
+          v-bind="args"
+          :open-direction="openDirection"
+          :label="openDirection"
+          v-model="args.modelValue"
+        />
+      </URow>
+      <URow>
+        <USelect
+          v-for="(openDirection, index) in openDirections"
+          :key="index"
+          v-bind="args"
+          :open-direction="openDirection"
+          v-model="args.modelValue"
+          label=""
+        />
+      </URow>
+    </div>
+  `,
+});
+
+const GroupValuesTemplate = (args) => ({
+  components: { USelect },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <USelect
+      v-bind="args"
+      label="Single"
+      v-model="args.modelValue"
+    />
+    <USelect
+      class="mt-5"
+      v-bind="args"
+      v-model="args.modelValueMultiple"
+      label="Multiple"
+      multiple
+    />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { USelect, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <div class="flex flex-col gap-6">
+      <URow>
+        <USelect
+          v-for="(size, index) in sizes"
+          v-bind="args"
+          :key="index"
+          :size="size"
+          :label="size"
+          v-model="args.modelValue"
+        />
+        </URow>
+      <URow>
+        <USelect
+          v-for="(size, index) in sizes"
+          v-bind="args"
+          :key="index"
+          :size="size"
+          :label="size"
+          label-outside
+          v-model="args.modelValue"
+        />
+      </URow>
+      <URow>
+        <USelect
+          v-for="(size, index) in sizes"
+          v-bind="args"
+          :key="index"
+          :label="size"
+          :size="size"
+          multiple
+          v-model="args.multipleModelValue"
+        />
+      </URow>
+    </div>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { USelect },
+  setup() {
+    return { args };
+  },
+  template: `
+    <USelect
+      v-bind="args"
+      v-model="args.modelValue"
+    >
+      ${args.slotTemplate}
+    </USelect>
+  `,
+});
+
+const BadgeTemplate = (args) => ({
+  components: { USelect, UBadge },
+  setup() {
+    return { args };
+  },
+  methods: {
+    getSelectedBadge(options, currentValue) {
+      return options?.find((option) => option.id === currentValue);
+    },
+  },
+  template: `
+    <USelect
+      v-bind="args"
+      v-model="args.modelValue"
+    >
+      <template #after-caret="{ scopeProps }">
+        <UBadge
+          v-show="scopeProps?.modelValue"
+          :label="getSelectedBadge(scopeProps?.options, scopeProps?.modelValue)?.badge"
+        />
+      </template>
+      <template #option="{ option }">
+        {{ option.label }}
+        <UBadge :label="option.badge" />
+      </template>
+    </USelect>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Multiple = multipleTemplate.bind({});
+Multiple.args = { modelValue: [] };
+
+export const openDirection = OpenDirectionsTemplate.bind({});
+openDirection.args = {};
+
+export const groupValues = GroupValuesTemplate.bind({});
+groupValues.args = {
+  modelValue: "",
+  modelValueMultiple: [],
+  groupValues: "libs",
+  groupLabel: "language",
+  labelKey: "name",
+  valueKey: "name",
+  options: [
+    {
+      language: "Javascript",
+      libs: [{ name: "Vue.js" }, { name: "Adonis" }],
+    },
+    {
+      language: "Ruby",
+      libs: [
+        { name: "Frameworks", isSubGroup: true, level: 2 },
+        { name: "Rails", level: 3 },
+        { name: "Sinatra", level: 3 },
+      ],
+    },
+    {
+      language: "Other",
+      libs: [{ name: "Laravel" }, { name: "Phoenix" }],
+    },
+  ],
+};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error text" };
+
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "some placeholder text" };
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "some description text" };
+
+export const optionsLimit2 = DefaultTemplate.bind({});
+optionsLimit2.args = { optionsLimit: 2 };
+
+export const noClear = DefaultTemplate.bind({});
+noClear.args = { noClear: true };
+
+export const addOption = DefaultTemplate.bind({});
+addOption.args = { addOption: true };
+
+export const optionIsHidden = DefaultTemplate.bind({});
+optionIsHidden.args = {
+  options: [
+    { id: 1, label: "value 1", isHidden: true },
+    { id: 2, label: "value 2" },
+    { id: 3, label: "value 3" },
+    { id: 4, label: "value 4" },
+  ],
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = { multipleModelValue: [] };
+
+export const slotSelectedValueLabel = SlotTemplate.bind({});
+slotSelectedValueLabel.args = {
+  slotTemplate: `
+    <template #selected-label>
+       🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotSelectedValueLabelAfter = SlotTemplate.bind({});
+slotSelectedValueLabelAfter.args = {
+  slotTemplate: `
+    <template #selected-label-after>
+       🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotOption = SlotTemplate.bind({});
+slotOption.args = {
+  slotTemplate: `
+    <template #option>
+       🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotAfterCaret = BadgeTemplate.bind({});
+slotAfterCaret.args = {};
+
+export const slotBeforeCaret = SlotTemplate.bind({});
+slotBeforeCaret.args = {
+  slotTemplate: `
+    <template #before-caret>
+       🤘
+    </template>
+  `,
+};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+       🤘
+    </template>
+  `,
+};
+
+export const slotBeforeOption = SlotTemplate.bind({});
+slotBeforeOption.args = {
+  slotTemplate: `
+    <template #before-option>
+       🤘
+    </template>
+  `,
+};