@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

package/src/components/inputs/select/option/index.vue

@@ -1,156 +1,165 @@
-<template>
-  <OptionContainer
-    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
-    :cursor-type="cursorType"
-    :data-value="value"
-    :disabled-bg-color="disabledBgColor"
-    :disabled-text-color="disabledTextColor"
-    :hovered-bg-color="
-      colorMode == 'dark'
-        ? '#000000'
-        : hoveredBgColor
-        ? hoveredBgColor
-        : 'grey5'
-    "
-    :is-disabled="isDisabled"
-    :min-width="minWidth"
-    :padding="padding"
-    :text-color="textColor"
-    :title="hoverText"
-    @click="clickHandler"
-    @mouseover="hoverHandler"
-  >
-    <slot></slot>
-  </OptionContainer>
-</template>
-
-<script>
-  //   import selectButton from './selectButton'
-  //   import selectDropdown from './selectDropDown'
-  import styled from 'vue3-styled-components'
-  const optionProps = {
-    isDisabled: Boolean,
-    hoveredBgColor: String,
-    cursorType: String,
-    backgroundColor: String,
-    minWidth: String,
-    disabledBgColor: String,
-    disabledTextColor: String,
-    padding: String,
-    textColor: String,
-  }
-  const OptionContainer = styled('div', optionProps)`
-    display: flex;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: ${(props) => props.padding};
-    gap: 14px;
-    width: 100%;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
-    background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors[props.disabledBgColor]
-          ? props.theme.colors[props.disabledBgColor]
-          : props.disabledBgColor
-        : props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor} !important;
-    box-sizing: inherit;
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.disabledTextColor
-          ? props.theme.colors[props.disabledTextColor]
-            ? props.theme.colors[props.disabledTextColor]
-            : props.disabledTextColor
-          : props.theme.colors.grey3
-        : props.theme.colors[props.textColor]
-        ? props.theme.colors[props.textColor]
-        : props.textColor};
-    &:hover {
-      background-color: ${(props) =>
-        !!props.disabledTextColor && props.isDisabled
-          ? props.theme.colors[props.disabledBgColor]
-            ? props.theme.colors[props.disabledBgColor]
-            : props.disabledBgColor
-          : props.theme.colors[props.hoveredBgColor]
-          ? props.theme.colors[props.hoveredBgColor]
-          : props.hoveredBgColor} !important;
-    }
-  `
-
-  export default {
-    name: 'RCoption',
-
-    components: { OptionContainer },
-    props: {
-      value: {
-        required: true,
-      },
-      hoveredBgColor: {
-        required: false,
-      },
-      colorMode: {
-        required: false,
-        default: 'light',
-      },
-      cursorType: {
-        required: false,
-        default: 'pointer',
-      },
-      backgroundColor: {
-        required: false,
-        default: 'white',
-      },
-      hoverText: {
-        required: false,
-      },
-      isDisabled: {
-        required: false,
-        default: false,
-      },
-      minWidth: {
-        required: false,
-      },
-      disabledBgColor: {
-        required: false,
-        default: 'white',
-      },
-      disabledTextColor: {
-        required: false,
-        default: null,
-      },
-      padding: {
-        required: false,
-        default: '12px 10px',
-      },
-      textColor: {
-        type: true,
-        default: 'inherit',
-      },
-    },
-    emits: ['option-hovered', 'option-selected'],
-    data() {
-      return {}
-    },
-    computed: {},
-    methods: {
-      clickHandler(e) {
-        if (this.isDisabled) {
-          // prevent emitter if the option is disabled
-          return
-        } else {
-          this.$parent.$emit('option-selected', this.value, e)
-        }
-      },
-      hoverHandler() {
-        this.$parent.$emit('option-hovered', this.value)
-      },
-    },
-  }
-</script>
+<template>
+  <OptionContainer
+    :background-color="
+      colorMode == 'dark'
+        ? '#000000'
+        : colorMode == 'transparent'
+        ? 'black'
+        : backgroundColor
+    "
+    :cursor-type="cursorType"
+    :data-value="value"
+    :disabled-bg-color="disabledBgColor"
+    :disabled-text-color="disabledTextColor"
+    :hovered-bg-color="
+      colorMode == 'dark'
+        ? '#000000'
+        : colorMode == 'transparent'
+        ? 'grey6'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
+    :is-disabled="isDisabled"
+    :min-width="minWidth"
+    :padding="padding"
+    :text-color="textColor"
+    :title="hoverText"
+    @click="clickHandler"
+    @mouseover="hoverHandler"
+  >
+    <slot></slot>
+  </OptionContainer>
+</template>
+
+<script>
+  //   import selectButton from './selectButton'
+  //   import selectDropdown from './selectDropDown'
+  import styled from 'vue3-styled-components'
+  const optionProps = {
+    isDisabled: Boolean,
+    hoveredBgColor: String,
+    cursorType: String,
+    backgroundColor: String,
+    minWidth: String,
+    disabledBgColor: String,
+    disabledTextColor: String,
+    padding: String,
+    textColor: String,
+  }
+  const OptionContainer = styled('div', optionProps)`
+    display: flex;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: ${(props) => props.padding};
+    gap: 14px;
+    width: 100%;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors[props.disabledBgColor]
+          ? props.theme.colors[props.disabledBgColor]
+          : props.disabledBgColor
+        : props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor} !important;
+    box-sizing: inherit;
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor};
+    color: ${(props) =>
+      props.isDisabled
+        ? props.disabledTextColor
+          ? props.theme.colors[props.disabledTextColor]
+            ? props.theme.colors[props.disabledTextColor]
+            : props.disabledTextColor
+          : props.theme.colors.grey3
+        : props.theme.colors[props.textColor]
+        ? props.theme.colors[props.textColor]
+        : props.textColor};
+    &:hover {
+      background-color: ${(props) =>
+        !!props.disabledTextColor && props.isDisabled
+          ? props.theme.colors[props.disabledBgColor]
+            ? props.theme.colors[props.disabledBgColor]
+            : props.disabledBgColor
+          : props.theme.colors[props.hoveredBgColor]
+          ? props.theme.colors[props.hoveredBgColor]
+          : props.hoveredBgColor} !important;
+    }
+  `
+
+  export default {
+    name: 'RCoption',
+
+    components: { OptionContainer },
+    props: {
+      value: {
+        required: true,
+      },
+      hoveredBgColor: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default: 'light',
+      },
+      cursorType: {
+        required: false,
+        default: 'pointer',
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white',
+      },
+      hoverText: {
+        required: false,
+      },
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      minWidth: {
+        required: false,
+      },
+      disabledBgColor: {
+        required: false,
+        default: 'white',
+      },
+      disabledTextColor: {
+        required: false,
+        default: null,
+      },
+      padding: {
+        required: false,
+        default: '12px 10px',
+      },
+      textColor: {
+        type: String,
+        required: false,
+        default: 'inherit',
+      },
+    },
+    emits: ['option-hovered', 'option-selected'],
+    data() {
+      return {}
+    },
+    computed: {},
+    methods: {
+      clickHandler(e) {
+        if (this.isDisabled) {
+          // prevent emitter if the option is disabled
+          return
+        } else {
+          this.$parent.$emit('option-selected', this.value, e)
+        }
+      },
+      hoverHandler() {
+        this.$parent.$emit('option-hovered', this.value)
+      },
+    },
+  }
+</script>

package/src/components/inputs/select/select.stories.js

@@ -1,58 +1,58 @@
-import Select from './index.vue'
-import Option from './option/index.vue'
-
-export default {
-  title: 'select',
-  component: Select,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Select, Option },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Select v-bind="$props">
-                <template #selector="{selectedValue}">
-                    value selected: {{selectedValue}}
-                </template>
-                <template #dropdown>
-                    <Option value="1">value one</Option>
-                    <Option value="2">value two</Option>
-                    <Option value="3">value three</Option>
-                    <Option value="4">value four</Option>
-                </template>
-            </Select>`,
-
-  // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
-  // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
-  // To use:
-  // How to use it
-  // <Select
-  //     hoverDropdown="true"
-  //     selectWidth="100%"
-  //     optionWidth="50%"
-  //     label="that is a label"
-  //     alignItems="vertical"
-  //     >
-  //     <template #selector="{selectedValue}">
-  //     value selected: {{selectedValue}}
-  //     </template>
-  //     <template #dropdown>
-  //     <Option value="1">value one</Option>
-  //     <Option value="2">value two</Option>
-  //     <Option value="3">value three</Option>
-  //     <Option value="4">value four</Option>
-  //     </template>
-  // </Select>
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  hoverDropdown: 'true',
-  selectWidth: '100%',
-  optionWidth: '50%',
-  label: 'that is a label',
-  alignItems: 'vertical',
-  value: '2',
-}
+import Select from './index.vue'
+import Option from './option/index.vue'
+
+export default {
+  title: 'select',
+  component: Select,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Select, Option },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Select v-bind="$props">
+                <template #selector="{selectedValue}">
+                    value selected: {{selectedValue}}
+                </template>
+                <template #dropdown>
+                    <Option value="1">value one</Option>
+                    <Option value="2">value two</Option>
+                    <Option value="3">value three</Option>
+                    <Option value="4">value four</Option>
+                </template>
+            </Select>`,
+
+  // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
+  // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
+  // To use:
+  // How to use it
+  // <Select
+  //     hoverDropdown="true"
+  //     selectWidth="100%"
+  //     optionWidth="50%"
+  //     label="that is a label"
+  //     alignItems="vertical"
+  //     >
+  //     <template #selector="{selectedValue}">
+  //     value selected: {{selectedValue}}
+  //     </template>
+  //     <template #dropdown>
+  //     <Option value="1">value one</Option>
+  //     <Option value="2">value two</Option>
+  //     <Option value="3">value three</Option>
+  //     <Option value="4">value four</Option>
+  //     </template>
+  // </Select>
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  hoverDropdown: 'true',
+  selectWidth: '100%',
+  optionWidth: '50%',
+  label: 'that is a label',
+  alignItems: 'vertical',
+  value: '2',
+}