vueless 0.0.2 → 0.0.3

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

@@ -2,18 +2,20 @@ import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 import USelect from "vueless/ui.form-select";
 import URow from "vueless/ui.container-row";
+import UBadge from "vueless/ui.text-badge";
 
 export default {
+  id: "3080",
   title: "Form Inputs & Controls / Select",
   component: USelect,
   args: {
     label: "Label",
     modelValue: "",
     options: [
-      { id: 1, label: "value 1" },
-      { id: 2, label: "value 2" },
-      { id: 3, label: "value 3" },
-      { id: 4, label: "value 4" },
+      { 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: {
@@ -45,7 +47,23 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const OpenDirectionsTemplate = (args, { argTypes }) => ({
+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 {
@@ -54,20 +72,55 @@ const OpenDirectionsTemplate = (args, { argTypes }) => ({
     };
   },
   template: `
-    <URow>
-      <USelect
-        v-for="(openDirection, index) in openDirections"
-        :key="index"
-        v-bind="args"
-        :openDirection="openDirection"
-        :label="openDirection"
-        v-model="args.modelValue"
-      />
-    </URow>
+    <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 }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { USelect, URow },
   setup() {
     return {
@@ -76,15 +129,40 @@ const SizesTemplate = (args, { argTypes }) => ({
     };
   },
   template: `
-    <URow>
-      <USelect
-        v-for="(size, index) in sizes"
-        :key="index"
-        :size="size"
-        :label="size"
-        v-model="args.modelValue"
-      />
-    </URow>
+    <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>
   `,
 });
 
@@ -103,12 +181,72 @@ const SlotTemplate = (args) => ({
   `,
 });
 
+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 };
 
@@ -118,17 +256,14 @@ error.args = { error: "some error text" };
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder text" };
 
-export const withoutInternalSearch = DefaultTemplate.bind({});
-withoutInternalSearch.args = { withInternalSearch: false };
-
 export const description = DefaultTemplate.bind({});
 description.args = { description: "some description text" };
 
 export const optionsLimit2 = DefaultTemplate.bind({});
 optionsLimit2.args = { optionsLimit: 2 };
 
-export const allowEmpty = DefaultTemplate.bind({});
-allowEmpty.args = { allowEmpty: true };
+export const noClear = DefaultTemplate.bind({});
+noClear.args = { noClear: true };
 
 export const addOption = DefaultTemplate.bind({});
 addOption.args = { addOption: true };
@@ -144,12 +279,21 @@ optionIsHidden.args = {
 };
 
 export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+sizes.args = { multipleModelValue: [] };
+
+export const slotSelectedValueLabel = SlotTemplate.bind({});
+slotSelectedValueLabel.args = {
+  slotTemplate: `
+    <template #selected-label>
+       🤘🤘🤘
+    </template>
+  `,
+};
 
-export const slotSingleLabel = SlotTemplate.bind({});
-slotSingleLabel.args = {
+export const slotSelectedValueLabelAfter = SlotTemplate.bind({});
+slotSelectedValueLabelAfter.args = {
   slotTemplate: `
-    <template #singleLabel>
+    <template #selected-label-after>
        🤘🤘🤘
     </template>
   `,
@@ -164,10 +308,22 @@ slotOption.args = {
   `,
 };
 
-export const slotAfterCaret = SlotTemplate.bind({});
-slotAfterCaret.args = {
+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 #after-caret>
+    <template #left>
        🤘
     </template>
   `,
@@ -176,7 +332,7 @@ slotAfterCaret.args = {
 export const slotBeforeOption = SlotTemplate.bind({});
 slotBeforeOption.args = {
   slotTemplate: `
-    <template #beforeOption>
+    <template #before-option>
        🤘
     </template>
   `,