text: import { storiesOf } from "@storybook/vue";
  import { withKnobs, text, number, boolean } from "@storybook/addon-knobs";
  
  import "./details.stories.css";
  
  storiesOf("Components/Organisms/Details", module)
      .addDecorator(withKnobs)
      .add("Details", () => ({
          props: {
              title: {
                  type: String,
                  default: text("Title", "Details")
              },
              itemName: {
                  type: String,
                  default: text("Item Name", "Order")
              },
              columns: {
                  type: Number,
                  default: number("Columns", 4)
              },
              imageUrl: {
                  type: String,
                  default: text("Image URL", "https://cdn.platforme.com/images/platforme.square.png")
              },
              loaded: {
                  type: Boolean,
                  default: boolean("Item Loaded", true)
              },
              item: {
                  type: Object,
                  default: () => ({
                      id: 1,
                      name: "Theodore",
                      age: 14,
                      car: "Toyota Prius",
                      city: "Matosinhos",
                      shoes: "Vyner",
                      trousers: "Levi's",
                      shirt: "Antonio Morato"
                  })
              },
              values: {
                  type: Array,
                  default: () => [
                      { value: "name", label: "Person", note: "age" },
                      { value: "car" },
                      { value: "city" },
                      { value: "shoes" },
                      { value: "trousers" },
                      { value: "shirt" }
                  ]
              },
              optionsItems: {
                  type: Array,
                  default: () => [
                      { label: "Item 1", value: "item_1", event: "item_1" },
                      { label: "Item 2", value: "item_2", event: "item_2" },
                      { label: "Item 3", value: "item_3", separator: true, event: "item_3" },
                      { label: "Item 4", value: "item_4", event: "item_4" }
                  ]
              },
              headerButtons: {
                  type: Boolean,
                  default: boolean("Header Buttons", true)
              }
          },
          template: `
              <details-ripe
                  v-bind:values="values"
                  v-bind:columns="columns"
                  v-bind:title="title"
                  v-bind:image-url="imageUrl"
                  v-bind:options-items="optionsItems"
                  v-bind:item="item"
                  v-bind:name="itemName"
                  v-bind:loaded="loaded"
                  v-bind:context="{}"
                  v-bind:index="0"
                  v-bind:get-items="() => values"
                  v-bind:header-buttons="headerButtons"
              >
                  <template v-slot:shirt>
                      <p>Custom entry</p>
                  </template>
                  <template v-slot:label-city>
                      <p>Custom label</p>
                  </template>
                  <template v-slot:options-item_4>
                      <div>Custom item</div>
                  </template>
              </details-ripe>
          `
      }));
  