@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/select/stories/constants.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaSelectOption, MaSelect } from '@/index';
+import { ref } from 'vue';
+import { SelectSizes, SelectModes } from '../types';
+
+export const baseConfig: Meta<typeof MaSelect> = {
+    component: MaSelect,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p><b>MaSelect</b> component to select value from options. <a href="https://antdv.com/components/select" target="_blank">more details</a></p><p>
+                    Figma Designs <a href="https://www.figma.com/file/DsHcDI5STs38ITpqhr63Rp/Foundation-%26-Onboarding-Flow_DEV?node-id=20%3A45323&t=W51ONO9kLsAUsfEl-1" target="_blank">here!</a>
+                </p><p>
+                    In addition, you can use <b>a-select-option</b> and <b>a-select-opt-group</b> components from <b>ant-design-vue</b>
+                </p>
+                `,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: SelectSizes,
+        },
+        mode: {
+            control: { type: 'select' },
+            options: SelectModes,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaSelect },
+    setup() {
+
+        const value = ref(args?.mode ? [] : null);
+
+        return { args, value };
+    },
+    template: `
+      <div class="w-[300px]">
+        <ma-select v-model:value="value" v-bind="args" />
+      </div>
+    `,
+});
+
+export const TemplateOption: StoryFn = (args: any) => ({
+    components: { MaSelect, MaSelectOption },
+    setup() {
+
+        const value = ref(args?.mode ? [] : null);
+
+        return { args, value };
+    },
+    template: `
+      <div class="w-[300px]">
+        <ma-select v-model:value="value" v-bind="args">
+          <template #option="{label, value}">
+            <span>{{ label }}</span>
+          </template>
+        </ma-select>
+      </div>
+    `,
+});
+
+export const TemplateRender: StoryFn = (args: any) => ({
+    components: { MaSelect },
+    setup() {
+        const value = ref(args?.mode ? [
+            'db455550-179d-45a9-af3a-078156c57b59',
+            '15791c6f-20fc-4b48-96dc-799b3cdfd439',
+        ] : null);
+
+        return { args, value };
+    },
+    template: `
+      <div class="w-[300px]">
+        <ma-select v-model:value="value" v-bind="args">
+          <template #maxTagPlaceholder="list">
+            {{ list?.length + (list?.length > 1 ? ' items' : ' item') +' selected' }}
+          </template>
+        </ma-select>
+      </div>
+    `,
+});

package/src/components/select/stories/countries.json

@@ -0,0 +1,342 @@
+[
+  {
+    "label": "United States",
+    "value": "US"
+  },
+  {
+    "label": "United Kingdom",
+    "value": "GB"
+  },
+  {
+    "label": "Australia",
+    "value": "AU"
+  },
+  {
+    "label": "Belgium",
+    "value": "BE"
+  },
+  {
+    "label": "Brazil",
+    "value": "BR"
+  },
+  {
+    "label": "Canada",
+    "value": "CA"
+  },
+  {
+    "label": "China",
+    "value": "CN"
+  },
+  {
+    "label": "Denmark",
+    "value": "DK"
+  },
+  {
+    "label": "France",
+    "value": "FR"
+  },
+  {
+    "label": "Germany",
+    "value": "DE"
+  },
+  {
+    "label": "Greece",
+    "value": "GR"
+  },
+  {
+    "label": "Hong Kong",
+    "value": "HK"
+  },
+  {
+    "label": "India",
+    "value": "IN"
+  },
+  {
+    "label": "Indonesia",
+    "value": "ID"
+  },
+  {
+    "label": "Italy",
+    "value": "IT"
+  },
+  {
+    "label": "Jordan",
+    "value": "JO"
+  },
+  {
+    "label": "Japan",
+    "value": "JP"
+  },
+  {
+    "label": "Korea, Republic Of",
+    "value": "KR"
+  },
+  {
+    "label": "Mexico",
+    "value": "MX"
+  },
+  {
+    "label": "Netherlands",
+    "value": "NL"
+  },
+  {
+    "label": "Portugal",
+    "value": "PT"
+  },
+  {
+    "label": "Russian Federation",
+    "value": "RU"
+  },
+  {
+    "label": "Singapore",
+    "value": "SG"
+  },
+  {
+    "label": "Spain",
+    "value": "ES"
+  },
+  {
+    "label": "Sweden",
+    "value": "SE"
+  },
+  {
+    "label": "Switzerland",
+    "value": "CH"
+  },
+  {
+    "label": "Turkey",
+    "value": "TR"
+  },
+  {
+    "label": "Taiwan",
+    "value": "TW"
+  },
+  {
+    "label": "Albania",
+    "value": "AL"
+  },
+  {
+    "label": "Argentina",
+    "value": "AR"
+  },
+  {
+    "label": "Austria",
+    "value": "AT"
+  },
+  {
+    "label": "Azerbaijan",
+    "value": "AZ"
+  },
+  {
+    "label": "Bahrain",
+    "value": "BH"
+  },
+  {
+    "label": "Bulgaria",
+    "value": "BG"
+  },
+  {
+    "label": "Cambodia",
+    "value": "KH"
+  },
+  {
+    "label": "Chile",
+    "value": "CL"
+  },
+  {
+    "label": "Colombia",
+    "value": "CO"
+  },
+  {
+    "label": "Croatia",
+    "value": "HR"
+  },
+  {
+    "label": "Czech Republic",
+    "value": "CZ"
+  },
+  {
+    "label": "Dominican Republic",
+    "value": "DO"
+  },
+  {
+    "label": "Ecuador",
+    "value": "EC"
+  },
+  {
+    "label": "Egypt",
+    "value": "EG"
+  },
+  {
+    "label": "El Salvador",
+    "value": "SV"
+  },
+  {
+    "label": "Estonia",
+    "value": "EE"
+  },
+  {
+    "label": "Finland",
+    "value": "FI"
+  },
+  {
+    "label": "Hungary",
+    "value": "HU"
+  },
+  {
+    "label": "Iceland",
+    "value": "IS"
+  },
+  {
+    "label": "Ireland",
+    "value": "IE"
+  },
+  {
+    "label": "Israel",
+    "value": "IL"
+  },
+  {
+    "label": "Kazakhstan",
+    "value": "KZ"
+  },
+  {
+    "label": "Kuwait",
+    "value": "KW"
+  },
+  {
+    "label": "Latvia",
+    "value": "LV"
+  },
+  {
+    "label": "Lebanon",
+    "value": "LB"
+  },
+  {
+    "label": "Liechtenstein",
+    "value": "LI"
+  },
+  {
+    "label": "Lithuania",
+    "value": "LT"
+  },
+  {
+    "label": "Luxembourg",
+    "value": "LU"
+  },
+  {
+    "label": "Macao",
+    "value": "MO"
+  },
+  {
+    "label": "Malaysia",
+    "value": "MY"
+  },
+  {
+    "label": "Malta",
+    "value": "MT"
+  },
+  {
+    "label": "New Zealand",
+    "value": "NZ"
+  },
+  {
+    "label": "Nigeria",
+    "value": "NG"
+  },
+  {
+    "label": "Norway",
+    "value": "NO"
+  },
+  {
+    "label": "Oman",
+    "value": "OM"
+  },
+  {
+    "label": "Pakistan",
+    "value": "PK"
+  },
+  {
+    "label": "Peru",
+    "value": "PE"
+  },
+  {
+    "label": "Philippines",
+    "value": "PH"
+  },
+  {
+    "label": "Poland",
+    "value": "PL"
+  },
+  {
+    "label": "Qatar",
+    "value": "QA"
+  },
+  {
+    "label": "Romania",
+    "value": "RO"
+  },
+  {
+    "label": "Saudi Arabia",
+    "value": "SA"
+  },
+  {
+    "label": "Slovakia",
+    "value": "SK"
+  },
+  {
+    "label": "Slovenia",
+    "value": "SI"
+  },
+  {
+    "label": "South Africa",
+    "value": "ZA"
+  },
+  {
+    "label": "Sri Lanka",
+    "value": "LK"
+  },
+  {
+    "label": "Thailand",
+    "value": "TH"
+  },
+  {
+    "label": "Ukraine",
+    "value": "UA"
+  },
+  {
+    "label": "Uruguay",
+    "value": "UY"
+  },
+  {
+    "label": "United Arab Emirates",
+    "value": "AE"
+  },
+  {
+    "label": "Venezuela, Bolivarian Republic Of",
+    "value": "VE"
+  },
+  {
+    "label": "Vietnam",
+    "value": "VN"
+  },
+  {
+    "label": "Bangladesh",
+    "value": "BD"
+  },
+  {
+    "label": "Panama",
+    "value": "PA"
+  },
+  {
+    "label": "Tunisia",
+    "value": "TN"
+  },
+  {
+    "label": "Kenya",
+    "value": "KE"
+  },
+  {
+    "label": "Iraq",
+    "value": "IQ"
+  }
+]

package/src/components/select/stories/countriesWithDescription.json

@@ -0,0 +1,57 @@
+[
+  {
+    "label": "Turkey",
+    "value": "TR",
+    "description": "cCc"
+  },
+  {
+    "label": "United States",
+    "value": "US",
+    "description": "Home of the Statue of Liberty."
+  },
+  {
+    "label": "United Kingdom",
+    "value": "GB",
+    "description": "Land of the Big Ben."
+  },
+  {
+    "label": "Australia",
+    "value": "AU",
+    "description": "Known for kangaroos."
+  },
+  {
+    "label": "Belgium",
+    "value": "BE",
+    "description": "Famous for chocolates."
+  },
+  {
+    "label": "Brazil",
+    "value": "BR",
+    "description": "Country of the Amazon."
+  },
+  {
+    "label": "Canada",
+    "value": "CA",
+    "description": "Land of the Maple Leaf."
+  },
+  {
+    "label": "China",
+    "value": "CN",
+    "description": "Great Wall's country."
+  },
+  {
+    "label": "Denmark",
+    "value": "DK",
+    "description": "Home of Vikings."
+  },
+  {
+    "label": "France",
+    "value": "FR",
+    "description": "Eiffel Tower's home."
+  },
+  {
+    "label": "Germany",
+    "value": "DE",
+    "description": "Land of Oktoberfest."
+  }
+]

package/src/components/select/stories/countryGroups.json

@@ -0,0 +1,47 @@
+[
+    {
+        "label": "North America",
+        "options": [
+            {
+                "value": "us",
+                "label": "United States",
+                "icon": "flag-us"
+            },
+            {
+                "value": "ca",
+                "label": "Canada",
+                "icon": "flag-ca"
+            }
+        ]
+    },
+    {
+        "label": "Europe",
+        "options": [
+            {
+                "value": "gb",
+                "label": "United Kingdom",
+                "icon": "flag-gb"
+            },
+            {
+                "value": "de",
+                "label": "Germany",
+                "icon": "flag-de"
+            }
+        ]
+    },
+    {
+        "label": "Asia",
+        "options": [
+            {
+                "value": "jp",
+                "label": "Japan",
+                "icon": "flag-jp"
+            },
+            {
+                "value": "cn",
+                "label": "China",
+                "icon": "flag-cn"
+            }
+        ]
+    }
+]

package/src/components/select/stories/default.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
+import { baseConfig, Template } from './constants';
+import DumyOptions from './options.json';
+
+import { MaSelect } from '@/index';
+import Countries from '@/components/select/stories/countries.json';
+import CountriesWithDescription from '@/components/select/stories/countriesWithDescription.json';
+const meta: Meta<typeof MaSelect> = {
+  title: 'Core/MaSelect/Default',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaSelect>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions,
+  size: 'small',
+  allowClear: true,
+  showSearch: true,
+  optionFilterProp: 'label',
+  prefixIcon: 'search-normal',
+};
+
+export const WithImage: StoryFn = (args: any) => ({
+  components: { MaSelect },
+  setup() {
+    const value = ref('7f5a4ba9-1f62-435b-93e3-ff2e1bb35f79');
+
+    return { value, args };
+  },
+  template: `
+      <ma-select class="w-[300px]" v-model:value="value" v-bind="args">
+        <template #prefixIcon>
+            <img src="https://i.pravatar.cc/100">
+        </template>
+      </ma-select>
+  `,
+});
+WithImage.args = {
+  options: DumyOptions,
+  size: 'small',
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions,
+  size: 'small',
+  disabled: true,
+  prefixIcon: 'user-square',
+};
+
+export const WithHintText: Story = Template.bind({});
+WithHintText.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions,
+  size: 'small',
+  prefixIcon: 'user-square',
+  hintText: 'This is a hint text',
+};
+
+export const WithItemIcon: Story = Template.bind({});
+WithItemIcon.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions.map((opt) => ({ ...opt, icon: 'ranking' })),
+  size: 'small',
+  allowClear: true,
+  optionFilterProp: 'label',
+  prefixIcon: 'search-normal',
+};
+export const WithItemImage: Story = Template.bind({});
+WithItemImage.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions.map((opt) => ({
+    ...opt,
+    imageSrc:
+      'https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/21/0e/6b/210e6b38-02b5-26e1-eaee-6cba50ab7e34/AppIcon-1x_U007emarketing-0-7-0-85-220-0.png/60x60.png',
+  })),
+  size: 'small',
+  allowClear: true,
+  optionFilterProp: 'label',
+  prefixIcon: 'search-normal',
+};
+
+export const Borderless: Story = Template.bind({});
+Borderless.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions,
+  size: 'small',
+  borderless: true,
+  prefixIcon: 'user-square',
+};
+
+export const WithError: Story = Template.bind({});
+WithError.args = {
+  placeholder: 'Select option...',
+  error: true,
+  hintText: 'This is a hint text',
+  options: DumyOptions,
+  size: 'small',
+  borderless: false,
+  prefixIcon: 'user-square',
+};
+
+export const ErrorBorderless: Story = Template.bind({});
+ErrorBorderless.args = {
+  placeholder: 'Select option...',
+  error: true,
+  hintText: 'This is a hint text',
+  options: DumyOptions,
+  size: 'small',
+  borderless: true,
+  prefixIcon: 'user-square',
+};
+export const Loading: Story = Template.bind({});
+Loading.args = {
+  placeholder: 'Select option...',
+  options: DumyOptions,
+  size: 'small',
+  loading: true,
+  prefixIcon: 'user-square',
+};
+
+export const CountryFlags: Story = Template.bind({});
+CountryFlags.args = {
+  placeholder: 'Select option...',
+  options: Countries.map((opt) => ({
+    ...opt,
+    icon: `flag-${opt.value.toLowerCase()}`,
+  })),
+  size: 'small',
+  allowClear: true,
+  optionFilterProp: 'label',
+  prefixIcon: 'search-normal',
+  optionItemRounded: true,
+};
+export const WithDescription: Story = Template.bind({});
+WithDescription.args = {
+  placeholder: 'Select option...',
+  options: CountriesWithDescription.map((opt) => ({
+    ...opt,
+    icon: `flag-${opt.value.toLowerCase()}`,
+  })),
+  size: 'small',
+  allowClear: true,
+  optionFilterProp: 'label',
+  prefixIcon: 'search-normal',
+  optionItemRounded: true,
+};
+export const SmallWidth: StoryFn = () => ({
+  components: { MaSelect },
+  setup() {
+    const value = ref('Competitor');
+    const opts = [
+      {
+        value: 'All',
+        label: 'All',
+      },
+      {
+        value: 'My App',
+        label: 'My App',
+      },
+      {
+        value: 'Competitor',
+        label: 'Competitor',
+      },
+    ];
+
+    return {
+      value,
+      opts,
+    };
+  },
+  template: `
+    <ma-select
+        size="small"
+        class="w-16"
+        placeholder=""
+        :dropdownMatchSelectWidth="false"
+        :options="opts"
+        v-model:value="value"
+    >
+    </ma-select>
+`,
+});