@designcrowd/fe-shared-lib 1.5.6-mason-1 → 1.5.7-eng-3522

package/src/atoms/components/Dropdown/Dropdown.stories.js

@@ -1,140 +1,140 @@
-import Dropdown from './Dropdown.vue';
-import DropdownItem from './DropdownItem.vue';
-import Pill from '../Pill/Pill.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      Dropdown,
-      DropdownItem,
-      Pill,
-    },
-    data() {
-      return {
-        show: true,
-      };
-    },
-    template: `
-      <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
-          <DropdownItem @click="() => show = false">
-            <span class="tw-grow">Menu item 1</span>
-            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
-          </DropdownItem>
-          <DropdownItem>
-            <span class="tw-grow">Menu item 2</span>
-            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
-          </DropdownItem>
-        </Dropdown>
-      </div>
-    `,
-  };
-};
-
-export const Disabled = () => {
-  return {
-    components: {
-      Dropdown,
-      DropdownItem,
-    },
-    template: `
-      <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
-          <DropdownItem>
-            <span>Menu item 1</span>
-          </DropdownItem>
-          <DropdownItem>
-            <span>Menu item 2</span>
-          </DropdownItem>
-        </Dropdown>
-      </div>
-    `,
-  };
-};
-
-export const LongListFixedHeight = () => {
-  return {
-    components: {
-      Dropdown,
-      DropdownItem,
-      Pill,
-    },
-    template: `
-      <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
-          <DropdownItem v-for="(item, i) in items" :key="i">
-            <span class="tw-grow">{{ item.display }}</span>
-          </DropdownItem>
-        </Dropdown>
-      </div>
-    `,
-    setup() {
-      return {
-        items: [
-          {
-            display: 'Menu 1',
-          },
-          {
-            display: 'Menu 2',
-          },
-          {
-            display: 'Menu 3',
-          },
-          {
-            display: 'Menu 4',
-          },
-          {
-            display: 'Menu 5',
-          },
-          {
-            display: 'Menu 6',
-          },
-          {
-            display: 'Menu 7',
-          },
-          {
-            display: 'Menu 8',
-          },
-          {
-            display: 'Menu 9',
-          },
-          {
-            display: 'Menu 10',
-          },
-        ],
-      };
-    },
-  };
-};
-
-export const SampleElementClasses = () => {
-  return {
-    components: {
-      Dropdown,
-      DropdownItem,
-      Button,
-      Pill,
-    },
-    template: `
-      <div class="tw-flex tw-gap-2 tw-m-4">
-        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
-          <DropdownItem>
-            <span class="tw-grow">Menu item 1</span>
-            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
-          </DropdownItem>
-          <DropdownItem>
-            <span class="tw-grow">Menu item 2</span>
-            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
-          </DropdownItem>
-        </Dropdown>
-        <Button label="Submit" variant="primary">Button</Button>
-      </div>
-    `,
-  };
-};
+import Dropdown from './Dropdown.vue';
+import DropdownItem from './DropdownItem.vue';
+import Pill from '../Pill/Pill.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill,
+    },
+    data() {
+      return {
+        show: true,
+      };
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
+          <DropdownItem @click="() => show = false">
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+  };
+};
+
+export const LongListFixedHeight = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill,
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+    setup() {
+      return {
+        items: [
+          {
+            display: 'Menu 1',
+          },
+          {
+            display: 'Menu 2',
+          },
+          {
+            display: 'Menu 3',
+          },
+          {
+            display: 'Menu 4',
+          },
+          {
+            display: 'Menu 5',
+          },
+          {
+            display: 'Menu 6',
+          },
+          {
+            display: 'Menu 7',
+          },
+          {
+            display: 'Menu 8',
+          },
+          {
+            display: 'Menu 9',
+          },
+          {
+            display: 'Menu 10',
+          },
+        ],
+      };
+    },
+  };
+};
+
+export const SampleElementClasses = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Button,
+      Pill,
+    },
+    template: `
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    `,
+  };
+};

package/src/atoms/components/Dropdown/Dropdown.vue

@@ -1,118 +1,118 @@
-<template>
-  <div class="tw-relative tw-inline-block tw-w-full">
-    <div
-      class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-h-10 tw-flex tw-items-center tw-rounded tw-text-md tw-w-full"
-      :class="[elementClasses, disabled && 'tw-opacity-40 tw-cursor-not-allowed']"
-      @click="() => !disabled && onToggleMenu()"
-      :title="tooltip"
-    >
-      <div class="tw-text-left tw-flex-auto tw-pl-3 tw-truncate">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <Icon
-        :name="isMenuVisible ? 'chevron-up' : 'chevron-down'"
-        class="tw-pt-1 tw-pr-2 tw-flex-none"
-        color="secondary-500"
-        :size="iconSize"
-      />
-    </div>
-
-    <div
-      v-show="isMenuVisible"
-      class="tw-origin-top-right tw-absolute tw-mt-2 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20"
-      :class="[
-        menuElementClasses,
-        {
-          'tw-right-0': menuAlign === 'right',
-          'tw-left-0': menuAlign !== 'right',
-        },
-      ]"
-    >
-      <div class="tw-py-1">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { watch } from 'vue';
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    menuAlign: {
-      type: String,
-      default: 'right',
-    },
-    title: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    elementClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    menuElementClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    show: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    iconSize: {
-      type: String,
-      required: false,
-      default: 'sm',
-    },
-    tooltip: {
-      type: String,
-      required: false,
-    },
-  },
-  data: () => ({
-    isMenuVisible: false,
-  }),
-  computed: {
-    menuItems() {
-      return (this.$slots.default || []).filter((s) => s.tag);
-    },
-  },
-  watch: {
-    show() {
-      this.isMenuVisible = this.show;
-    },
-  },
-  mounted() {
-    this.isMenuVisible = this.show;
-  },
-  methods: {
-    onToggleMenu() {
-      this.isMenuVisible = !this.isMenuVisible;
-      this.$emit('update:show', this.isMenuVisible);
-    },
-    hideMenu() {
-      this.isMenuVisible = false;
-      this.$emit('update:show', false);
-    },
-    showMenu() {
-      this.isMenuVisible = true;
-      this.$emit('update:show', true);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-relative tw-inline-block tw-w-full">
+    <div
+      class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-h-10 tw-flex tw-items-center tw-rounded tw-text-md tw-w-full"
+      :class="[elementClasses, disabled && 'tw-opacity-40 tw-cursor-not-allowed']"
+      @click="() => !disabled && onToggleMenu()"
+      :title="tooltip"
+    >
+      <div class="tw-text-left tw-flex-auto tw-pl-3 tw-truncate">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <Icon
+        :name="isMenuVisible ? 'chevron-up' : 'chevron-down'"
+        class="tw-pt-1 tw-pr-2 tw-flex-none"
+        color="secondary-500"
+        :size="iconSize"
+      />
+    </div>
+
+    <div
+      v-show="isMenuVisible"
+      class="tw-origin-top-right tw-absolute tw-mt-2 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20"
+      :class="[
+        menuElementClasses,
+        {
+          'tw-right-0': menuAlign === 'right',
+          'tw-left-0': menuAlign !== 'right',
+        },
+      ]"
+    >
+      <div class="tw-py-1">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { watch } from 'vue';
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    menuAlign: {
+      type: String,
+      default: 'right',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    elementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    menuElementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    show: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    iconSize: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    tooltip: {
+      type: String,
+      required: false,
+    },
+  },
+  data: () => ({
+    isMenuVisible: false,
+  }),
+  computed: {
+    menuItems() {
+      return (this.$slots.default || []).filter((s) => s.tag);
+    },
+  },
+  watch: {
+    show() {
+      this.isMenuVisible = this.show;
+    },
+  },
+  mounted() {
+    this.isMenuVisible = this.show;
+  },
+  methods: {
+    onToggleMenu() {
+      this.isMenuVisible = !this.isMenuVisible;
+      this.$emit('update:show', this.isMenuVisible);
+    },
+    hideMenu() {
+      this.isMenuVisible = false;
+      this.$emit('update:show', false);
+    },
+    showMenu() {
+      this.isMenuVisible = true;
+      this.$emit('update:show', true);
+    },
+  },
+};
+</script>

package/src/atoms/components/Dropdown/DropdownItem.vue

@@ -1,33 +1,33 @@
-<template>
-  <div>
-    <div
-      class="tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
-      @click.stop="onClick"
-      :class="{
-        'dropdown-item-hover': backgroundHover,
-      }"
-    >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    backgroundHover: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
-<style scoped>
-.dropdown-item-hover:hover {
-  background-color: #eee;
-}
-</style>
+<template>
+  <div>
+    <div
+      class="tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
+      @click.stop="onClick"
+      :class="{
+        'dropdown-item-hover': backgroundHover,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    backgroundHover: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+<style scoped>
+.dropdown-item-hover:hover {
+  background-color: #eee;
+}
+</style>