documentation release #1

packages/example/source/Button.vue

@@ -1,5 +1,8 @@
 <template>
-  <button class="bg-blue-500 py-2 px-4 text-white rounded"><slot /></button>
+  <button class="bg-blue-500 py-2 px-4 text-white rounded">
+    <!-- @slot content of the button -->
+    <slot />
+  </button>
 </template>
 
 <preview name="Primary Button">

packages/example/source/Input.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <input
+      ref="input"
+      v-model="val"
+      @input="updateValue($event.target.value)"
+      @change="emitChange"
+    />
+    <button @click="fireEvent()">Fire example event!</button>
+  </div>
+</template>
+
+<script>
+/**
+ * An input field with a button
+ */
+export default {
+  name: 'Input',
+  model: {
+    prop: 'value',
+  },
+  props: {
+    value: {
+      default: null,
+      type: [Number, String],
+    },
+    /**
+     * Using for: String.prototype.replace(regexp, replacement)
+     */
+    regExp: {
+      type: RegExp,
+      default: null,
+    },
+    /**
+     * Using for: String.prototype.replace(regexp, replacement)
+     */
+    replacement: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      val: '',
+    };
+  },
+  watch: {
+    // watch value prop
+    value(val) {
+      this.updateValue(val);
+    },
+  },
+  mounted() {
+    this.updateValue(this.value);
+  },
+  methods: {
+    // format the value of input
+    formatValue(val) {
+      const formattedValue = !val ? '' : val.toString().replace(this.regExp, this.replacement);
+
+      return formattedValue;
+    },
+
+    updateValue(val) {
+      const formattedValue = this.formatValue(val);
+
+      this.val = formattedValue;
+      this.emitInput(formattedValue);
+    },
+
+    emitInput(val) {
+      /**
+       * Input event
+       * @event input
+       * @type {number|string}
+       * @property {number} called - test called
+       * @property {boolean} isPacked - Indicates whether the snowball is tightly packed.
+       */
+      this.$emit('input', val, 1, false);
+    },
+
+    // emit change event
+    emitChange() {
+      /**
+       * Change event
+       * @event change
+       */
+      this.$emit('change', this.val);
+    },
+    fireEvent() {
+      /**
+       * Fire event
+       * @event fire
+       * @type {string}
+       */
+      this.$emit('fire', 'hello fire!!');
+    },
+  },
+};
+</script>

packages/preview/browser/app.css

@@ -12,3 +12,48 @@ html {
 .dark {
   color: #efefef;
 }
+
+/* Documentation Panel */
+.docs {
+  width: 400px;
+  margin: 5px 10px;
+}
+
+.docs h2 {
+  margin-bottom: 10px;
+  padding: 5px;
+  border-bottom: 1px solid #ccc;
+}
+
+.docs h3 {
+  margin-top: 20px;
+  padding: 0 5px;
+}
+.docs table {
+  margin: 10px 5px;
+  color: #333;
+  font-size: small;
+}
+
+.docs table td,
+.docs table th {
+  border-bottom: 1px solid #cccccc;
+  padding: 5px 8px;
+}
+
+.docs table th {
+  background-color: #f2f2f2;
+  color: #000;
+}
+
+.docs table li {
+  padding: 0;
+  margin: 5px 0;
+  list-style-type: none;
+}
+
+.docs table li strong {
+  display: inline-block;
+  font-weight: bold;
+  width: 70px;
+}

packages/preview/browser/components/Dashboard.vue

@@ -19,7 +19,7 @@ export default defineComponent({
     const zoom = ref(50);
     const theme = ref<string>('light');
     const asideOpen = ref(true);
-    const docsAsideOpen = ref(true);
+    const docsAsideOpen = ref(false);
 
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       theme.value = 'dark';

packages/preview/browser/components/Documentation.vue

@@ -1,18 +1,10 @@
 <template>
   <div class="docs">
     <h2>{{ docValue.displayName }}</h2>
-    <template v-if="docValue.props">
-      <h3>Slots</h3>
-      <Props :props="docValue.props" />
-    </template>
-    <template v-if="docValue.events">
-      <h3>Events</h3>
-      <Events :events="docValue.events" />
-    </template>
-    <template v-if="docValue.slots">
-      <h3>Slots</h3>
-      <Slots :slots="docValue.slots" />
-    </template>
+    <p>{{ docValue.description }}</p>
+    <Props v-if="docValue.props" :props="docValue.props" />
+    <Events v-if="docValue.events" :events="docValue.events" />
+    <Slots v-if="docValue.slots" :slots="docValue.slots" />
   </div>
 </template>
 
@@ -36,20 +28,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.docs {
-  width: 200px;
-  margin: 5px 10px;
-}
-
-.docs h2 {
-  margin-bottom: 10px;
-  padding: 5px;
-  border-bottom: 1px solid #ccc;
-}
-
-.docs h3 {
-  padding: 0 5px;
-}
-</style>

packages/preview/browser/components/docsParts/Events.vue

@@ -1,11 +1,33 @@
 <template>
+  <h3>Events</h3>
   <table>
-    <tr>
-      <td>Events</td>
-    </tr>
+    <thead>
+      <th>Name</th>
+      <th>Description</th>
+      <th>Properties</th>
+    </thead>
+    <tbody>
+      <tr v-for="event in events" :key="event.name">
+        <td>{{ event.name }}</td>
+        <td>{{ event.description }}</td>
+        <td>
+          <li v-for="property in event.properties">
+            <strong>{{ property.name }}</strong> {{ property.type.names.join('|') }} -
+            {{ property.description }}
+          </li>
+        </td>
+      </tr>
+    </tbody>
   </table>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    events: {
+      type: Array,
+      required: true,
+    },
+  },
+};
 </script>

packages/preview/browser/components/docsParts/Props.vue

@@ -1,11 +1,28 @@
 <template>
+  <h3>Props</h3>
   <table>
-    <tr>
-      <td>Props</td>
-    </tr>
+    <thead>
+      <th>Name</th>
+      <th>Description</th>
+      <th>Type</th>
+    </thead>
+    <tbody>
+      <tr v-for="prop in props" :key="prop.name">
+        <td>{{ prop.name }}</td>
+        <td>{{ prop.description }}</td>
+        <td>{{ prop.type.name }}</td>
+      </tr>
+    </tbody>
   </table>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    props: {
+      type: Array,
+      required: true,
+    },
+  },
+};
 </script>

packages/preview/browser/components/docsParts/Slots.vue

@@ -1,11 +1,26 @@
 <template>
+  <h3>Slots</h3>
   <table>
-    <tr>
-      <td>Slots</td>
-    </tr>
+    <thead>
+      <th>Name</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr v-for="slot in slots" :key="slot.name">
+        <td>{{ slot.name }}</td>
+        <td>{{ slot.description }}</td>
+      </tr>
+    </tbody>
   </table>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    slots: {
+      type: Array,
+      required: true,
+    },
+  },
+};
 </script>