feat: updated inline documentation attributes for buttons

dev/views/ContentLoaders.vue

@@ -263,11 +263,11 @@
 import Vue from 'vue'
 
 import { 
-
  FishTankLoaderContent as LoaderContent,
- FishTankPropsDoc,
 } from '@/index'
 
+import FishTankPropsDoc from '@/components/FishTankPropsDoc.vue'
+
 import VueMarkdown from 'vue-markdown'
 
 export default Vue.extend({

dev/views/Loaders.vue

@@ -92,7 +92,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { FishTankSpinner as Spinner, FishTankButtonPrimary as ftbutton, FishTankPropsDoc } from '@/index'
+import { FishTankSpinner as Spinner, FishTankButtonPrimary as ftbutton } from '@/index'
+import FishTankPropsDoc from '@/components/FishTankPropsDoc.vue'
 import VueMarkdown from 'vue-markdown'
 
 export default Vue.extend({

dev/views/Tags.vue

@@ -75,7 +75,8 @@
 
 <script lang="ts">
 import Vue from "vue"
-import { FishTankTag , FishTankPropsDoc} from "@/index"
+import { FishTankTag } from "@/index"
+import FishTankPropsDoc from '@/components/FishTankPropsDoc.vue'
 import { Flag24 } from '@fishtank/icons-vue' 
 import VueMarkdown from 'vue-markdown'
 

src/components/FishTankBaseButton.vue

@@ -27,13 +27,13 @@ export default Vue.extend({
  block: {
  type: Boolean,
  default: false,
- decription: "Changes Button to full width block element"
+ description: "Changes Button to full width block element"
  },
  name:{
  type: String,
  default:"",
  required:false,
- decription: "Optional name of the button, which can be used with the form data."
+ description: "Optional name of the button, which can be used with the form data."
  }
  },
  computed: {

src/components/FishTankButtonDestructive.vue

@@ -17,7 +17,7 @@ export default Vue.extend({
  introduction: "Destructive Button",
  description: "Destructive Button",
  token:[`
- <FishTankButtonDestructive>Primary Button</FishTankButtonDestructive>
+ <FishTankButtonDestructive>Destructive Button</FishTankButtonDestructive>
  `],
  components: {
  FishTankBaseButton

src/components/FishTankButtonFeatureIcon.vue

@@ -16,11 +16,11 @@ import Vue from "vue"
 import FishTankBaseButton from "./FishTankBaseButton.vue"
 
 export default Vue.extend({
- name: "ButtonFeatureIcon",
+ name: "FishTankButtonFeatureIcon",
  introduction: "Feature Icon Button",
  description: "Feature Icon Button",
  token:[`
- <ButtonFeatureIcon> <Alert24/> </ButtonFeatureIcon>
+ <FishTankButtonFeatureIcon> <Alert24/> </FishTankButtonFeatureIcon>
  `],
  components: {
  FishTankBaseButton,

src/components/FishTankButtonFeatureLabel.vue

@@ -20,14 +20,14 @@ import FishTankBaseButton from "./FishTankBaseButton.vue"
 import FishTankButtonFeatureIcon from "./FishTankButtonFeatureIcon.vue"
 
 export default Vue.extend({
- name: "ButtonFeatureLabel",
+ name: "FishTankButtonFeatureLabel",
  introduction: "Feature Label Button",
  description: "Feature Label Button",
  token:[`
- <ButtonFeatureLabel> 
+ <FishTankButtonFeatureLabel> 
  <template slot="icon"> <Alert24/> </template>
  <template slot="label"> Button Feature Label</template>
- </ButtonFeatureLabel>
+ </FishTankButtonFeatureLabel>
  `],
  components: {
  FishTankBaseButton,

src/components/FishTankButtonGradient.vue

@@ -23,32 +23,33 @@ export default Vue.extend({
  introduction: "Gradient Button",
  description: "Gradient Button",
  token:[`
- <ButtonGradient
+ <FishTankButtonGradient
  :gradientStart="startingHexColorVariable"
  :gradientEnd="endingHexColorVariable"
- :colorDirection="to-right"
- >Button Gradient</ButtonGradient>
+ :colorDirection="to right"
+ >Button Gradient</FishTankButtonGradient>
  `],
  components: {
  FishTankBaseButton
  },
  props:{
  gradientStart :{
- type:String, required:true, default:"#000000",
- description:"Start Color of Gradient",
- type_description:"String(Hex color, or valid CSS color)"
+ type:String, 
+ required:true, 
+ default:"#000000",
+ description:"Start Color of Gradient; String(Hex color, or valid CSS color)",
  },
  gradientEnd :{
- type:String, required:true, default:"#000000",
- description:"End Color of Gradient",
- type_description:"String(Hex color, or valid CSS color)"
+ type:String,
+ required:true, 
+ default:"#000000",
+ description:"End Color of Gradient; String(Hex color, or valid CSS color)",
  },
  colorDirection :{
  type:String, 
  required:false,
  default:"to right",
- description:"Horizontal Direction of Gradient",
- type_description:"String(\"to right\" or \"to left\") "
+ description:"Horizontal Direction of Gradient; String(\"to right\" or \"to left\")",
  },
  block: {
  type: Boolean,

src/components/FishTankButtonOutlineSmall.vue

@@ -14,10 +14,10 @@ import FishTankBaseButton from "./FishTankBaseButton.vue"
 
 export default Vue.extend({
  name: "FishTankButtonOutlineSmall",
- introduction: "Primary Button",
- description: "Primary Button",
+ introduction: "Small Outline Button",
+ description: "Small Outline Button",
  token:[`
- <FishTankButtonOutlineSmall>Primary Button</FishTankButtonOutlineSmall>
+ <FishTankButtonOutlineSmall>Small Outline Button</FishTankButtonOutlineSmall>
  `],
  components: {
  FishTankBaseButton

src/components/FishTankButtonPrimary.vue

@@ -22,13 +22,13 @@ export default Vue.extend({
  <FishTankButtonPrimary 
  :block="true">Button Primary</FishTankButtonPrimary>
  `,
- `<ButtonPrimary 
+ `<FishTankButtonPrimary 
  @click="handleClick"
- >Button Primary</ButtonPrimary>`,
- `<ButtonPrimary
+ >Button Primary</FishTankButtonPrimary>`,
+ `<FishTankButtonPrimary
  :disabled="falsyVariable"
  :block="truthyVariable"
- >Button Primary</ButtonPrimary>`
+ >Button Primary</FishTankButtonPrimary>`
  ],
  components: {
  FishTankBaseButton

src/components/FishTankButtonWhite.vue

@@ -17,7 +17,7 @@ export default Vue.extend({
  introduction: "White Button",
  description: "White Button",
  token:[`
- <FishTankButtonWhite>Primary Button</FishTankButtonWhite>
+ <FishTankButtonWhite>White Button</FishTankButtonWhite>
  `],
  components: {
  FishTankBaseButton

src/components/FishTankPropsDoc.vue

@@ -1,32 +1,66 @@
 <template>
  <div>
- <template v-for="(propObj, key, index) in properties">
- <div 
- v-if="propObj.description !== undefined" 
- :key="`p+${index}`"> 
- <h1>{{ key }}</h1>
- <template v-for="(prop, key, index) in propObj"> 
- <template v-if="key === 'type'">
- <div :key="`q+${index}`">{{ key }}: {{ prop.name }}</div>
- </template>
- <template v-else> 
- <div :key="`q+${index}`">{{ key }}: {{ prop }}</div>
+ <table 
+ v-if="layout === 'table'" 
+ class="table-card">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Type</th>
+ <th>Default</th>
+ <th>Description</th>
+ <th>Required</th>
+ </tr>
+ </thead>
+ <tbody>
+ <template v-for="(propObj, namekey, indexA) in properties">
+ <template v-if="(propObj.description !== undefined)" >
+ <tr :key="`p+${indexA}`">
+ <td>{{ namekey }}</td>
+ <td>{{ propObj['type'].name }}</td>
+ <td>{{ propObj['default'] }}</td>
+ <td>{{ propObj['description'] }}</td>
+ <td>
+ <template v-if="propObj.hasOwnProperty('required') === true">
+ {{ propObj['required'] }}
+ </template>
+ <template v-if="propObj.hasOwnProperty('required') === false">
+ false
+ </template>
+ </td>
+ </tr>
  </template>
  </template>
- </div>
+ </tbody>
+ </table>
+ <template v-if="layout === 'list'">
+ <h4>{{ namekey }}</h4>
+ <template v-for="(prop, key, index) in propObj"> 
+ <template v-if="key === 'type'">
+ <div :key="`q+${index}`">{{ key }}: {{ prop.name }}</div>
+ </template>
+ <template v-else> 
+ <div :key="`q+${index}`">{{ key }}: {{ prop }}</div>
+ </template>
+ </template>
  </template>
  </div> 
 </template>
 
-<script lang="ts">
+<script>
 import Vue from 'vue'
-import a11y from '@/util/a11y'
 export default Vue.extend({
+ name:"FishTankPropsDocs",
  props:{
  properties:{
  type: Object,
- reqwuired:true,
+ required:true,
  default: ()=>{}
+ },
+ layout:{
+ type: String,
+ required:true,
+ default: "list"
  }
  }
 })

src/components/FishTankTag.vue

@@ -150,7 +150,10 @@ export default Vue.extend({
  } else {
  return false
  }
- }
+ },
+ // returnStyle(){
+ // return JSON.stringify(this.$style)
+ // }
  },
  methods:{
  updateInput(event:any) {

src/index.ts

@@ -57,6 +57,5 @@ export { default as FishTankLoaderSpinner } from "./components/FishTankLoaderSpi
 export { default as FishTankButtonGroup } from "./components/FishTankButtonGroup.vue"
 export { default as FishTankButtonGroupButton } from "./components/FishTankButtonGroupButton.vue"
 export { default as FishTankLoaderContent } from "./components/FishTankLoaderContent.vue"
-export { default as FishTankPropsDoc } from "./components/FishTankPropsDoc.vue"
 
 import './styles.scss'