@bildvitta/quasar-ui-asteroid 3.13.1 → 3.14.0-beta.1

package/src/components/checkbox-group/QasCheckboxGroup.vue

@@ -1,118 +1,107 @@
 <template>
   <div :class="classes">
-    <div v-for="(option, index) in options" :key="index">
+    <div v-for="(option, index) in props.options" :key="index">
       <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
-      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="inline" :model-value="modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-      <q-option-group v-else v-model="model" v-bind="$attrs" :options="[option]" type="checkbox" />
+      <q-option-group v-else v-model="model" v-bind="attrs" :options="[option]" type="checkbox" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasCheckboxGroup',
+<script setup>
+import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
-  props: {
-    options: {
-      default: () => [],
-      type: Array
-    },
+defineOptions({ name: 'QasCheckboxGroup' })
 
-    modelValue: {
-      default: () => [],
-      type: Array
-    },
+const props = defineProps({
+  options: {
+    default: () => [],
+    type: Array
+  },
 
-    inline: {
-      default: true,
-      type: Boolean
-    }
+  modelValue: {
+    default: () => [],
+    type: Array
   },
 
-  emits: ['update:modelValue'],
+  inline: {
+    default: true,
+    type: Boolean
+  }
+})
 
-  data () {
-    return {
-      group: {}
-    }
-  },
+const emit = defineEmits(['update:modelValue'])
 
-  computed: {
-    model: {
-      get () {
-        return this.modelValue
-      },
+const attrs = useAttrs()
 
-      set (value) {
-        this.$emit('update:modelValue', value)
-      }
-    },
+onMounted(handleParent)
 
-    classes () {
-      return this.inline && 'flex q-gutter-x-sm'
-    }
-  },
+const group = ref({})
 
-  watch: {
-    options () {
-      this.handleParent()
-    }
-  },
+const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
-  created () {
-    this.handleParent()
+const model = computed({
+  get () {
+    return props.modelValue
   },
 
-  methods: {
-    handleParent () {
-      for (const index in this.options) {
-        const option = this.options[index]
-        if (this.hasChildren(option)) {
-          this.setGroupIntersection(this.modelValue, option, index)
-        }
-      }
-    },
-
-    hasChildren (option) {
-      return Object.prototype.hasOwnProperty.call(option, 'children')
-    },
-
-    setGroupIntersection (value, option, index) {
-      const options = option.children.map(item => item.value)
-      const intersection = options.filter(item => value.includes(item))
-
-      this.group[index] = intersection.length && (intersection.length === options.length ? true : null)
-    },
-
-    updateCheckbox (value, option, index) {
-      this.group[index] = value
-      const groupValues = option.children.map(item => item.value)
-
-      const updatedValue = value
-        ? [...new Set([...this.modelValue, ...groupValues])]
-        : this.modelValue.filter(item => !groupValues.includes(item))
-
-      this.updateModelValue(updatedValue)
-    },
-
-    updateChildren (value, option, index) {
-      this.setGroupIntersection(value, option, index)
-      this.updateModelValue(value)
-    },
-
-    getCheckboxClass (option) {
-      return this.hasChildren(option) && 'text-weight-bold'
-    },
-
-    getModelValue (index) {
-      return this.group[index]
-    },
-
-    updateModelValue (value) {
-      this.$emit('update:modelValue', value)
+  set (value) {
+    updateModelValue(value)
+  }
+})
+
+watch(() => props.options, handleParent)
+
+// functions
+function handleParent () {
+  for (const index in props.options) {
+    const option = props.options[index]
+    if (hasChildren(option)) {
+      setGroupIntersection(props.modelValue, option, index)
     }
   }
 }
+
+function hasChildren (option) {
+  return Object.prototype.hasOwnProperty.call(option, 'children')
+}
+
+function setGroupIntersection (value, option, index) {
+  const options = option.children.map(item => item.value)
+  const intersection = options.filter(item => value.includes(item))
+
+  group.value[index] = intersection.length && (intersection.length === options.length ? true : null)
+}
+
+function updateCheckbox (value, option, index) {
+  group.value[index] = value
+
+  const groupValues = option.children.map(item => item.value)
+
+  const updatedValue = value
+    ? [...new Set([...props.modelValue, ...groupValues])]
+    : props.modelValue.filter(item => !groupValues.includes(item))
+
+  updateModelValue(updatedValue)
+}
+
+function updateChildren (value, option, index) {
+  setGroupIntersection(value, option, index)
+  updateModelValue(value)
+}
+
+function updateModelValue (value) {
+  emit('update:modelValue', value)
+}
+
+function getCheckboxClass (option) {
+  return hasChildren(option) && 'text-weight-bold'
+}
+
+function getModelValue (index) {
+  return group.value[index]
+}
+
 </script>

package/src/components/copy/QasCopy.vue

@@ -1,43 +1,36 @@
 <template>
   <span>
-    <slot>{{ text }}</slot>
+    <slot>{{ props.text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
+    <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>
 </template>
 
-<script>
+<script setup>
 import { copyToClipboard } from '../../helpers'
+import { ref } from 'vue'
 
-export default {
-  name: 'QasCopy',
+defineOptions({ name: 'QasCopy' })
 
-  props: {
-    icon: {
-      default: 'sym_r_file_copy',
-      type: String
-    },
-
-    text: {
-      required: true,
-      type: String
-    }
-  },
-
-  data () {
-    return {
-      isLoading: false
-    }
+const props = defineProps({
+  icon: {
+    default: 'sym_r_file_copy',
+    type: String
   },
 
-  methods: {
-    copy () {
-      copyToClipboard(this.text, isLoading => {
-        this.isLoading = isLoading
-      })
-    }
+  text: {
+    required: true,
+    type: String
   }
+})
+
+const isLoading = ref(false)
+
+function copy () {
+  copyToClipboard(props.text, value => {
+    isLoading.value = value
+  })
 }
 </script>