renusify 2.5.1 → 3.0.0

package/components/calendar/month.vue

@@ -2,66 +2,75 @@
   <div class="d-flex flex-wrap h-space-around">
     <r-btn v-for="i in ls"
            :key="i"
-           outlined
-           class="w-25 ma-1"
+           class="btn-month ma-1"
            :class="{'color-one':i===modelValue}"
-           @click.prevent="emit(i)">
+           @click.prevent="emitValue(i)">
       {{
-      $d(new Date(year, i, 1, 0, timezoneOffset), 'month', locale)
+        $d(new Date(year, i, 1, 0, timezoneOffset), 'month', locale)
       }}
     </r-btn>
   </div>
 </template>
-<script>
-export default {
-  name: 'month-tab',
-  props: {
-    modelValue: Number,
-    timezoneOffset: Number,
-    locale: String,
-    month: Number,
-    year: Number
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      ls: []
-    }
-  },
-  beforeMount() {
-    const year = this.$d(new Date(this.year, this.month, 5, 0, this.timezoneOffset), 'ye', this.locale)
-    let ls = []
-    let first = 0
-    let n = 0
-    while (true) {
-      n++
-      if (n > 100) {
-        break
-      }
-      const y = this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'ye', this.locale)
-      const m = parseInt(this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'me', this.locale))
-      if (y === year && m === 1) {
-        break
-      }
-      if (y > year) {
-        first--
-      } else if (y < year) {
-        first++
-      } else if (m > 1) {
-        first--
-      } else {
-        first++
-      }
-    }
-    for (let i = 0; i < 12; i++) {
-      ls.push(first + i)
-    }
-    this.ls = ls
-  },
-  methods: {
-    emit(n) {
-      this.$emit('update:modelValue', n)
-    }
+<script setup>
+import {ref, inject, onBeforeMount} from 'vue'
+
+const props = defineProps({
+  modelValue: Number,
+  timezoneOffset: Number,
+  locale: String,
+  month: Number,
+  year: Number
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const $d = inject('renusify').$d
+
+const ls = ref([])
+
+const emitValue = (n) => {
+  emit('update:modelValue', n)
+}
+
+const yearValue = $d(new Date(props.year, props.month, 5, 0, props.timezoneOffset), 'ye', props.locale)
+let list = []
+let first = 0
+let n = 0
+
+while (true) {
+  n++
+  if (n > 100) {
+    break
+  }
+
+  const y = $d(new Date(props.year, first, 5, 0, props.timezoneOffset), 'ye', props.locale)
+  const m = parseInt($d(new Date(props.year, first, 5, 0, props.timezoneOffset), 'me', props.locale))
+
+  if (y === yearValue && m === 1) {
+    break
+  }
+
+  if (y > yearValue) {
+    first--
+  } else if (y < yearValue) {
+    first++
+  } else if (m > 1) {
+    first--
+  } else {
+    first++
   }
 }
-</script>
+
+for (let i = 0; i < 12; i++) {
+  list.push(first + i)
+}
+
+ls.value = list
+</script>
+<style lang="scss">
+.btn-month {
+  width: 25%;
+  background-color: var(--color-sheet-container);
+  border: 1px solid var(--color-border-low);
+}
+</style>

package/components/calendar/year.vue

@@ -2,41 +2,46 @@
   <div class="calendar-year-tab d-flex flex-wrap h-space-around">
     <r-btn v-for="i in 200"
            :key="i"
-           class="w-25 ma-1"
+           class="btn-year ma-1"
            :class="{'color-one year-select':modelValue+i-100===modelValue}"
-           outlined
-           @click.prevent="emit(modelValue+i-100)">
+           @click.prevent="emitValue(modelValue+i-100)">
       {{
       $d(new Date(modelValue + i - 100, month, 5, 0, timezoneOffset), 'year', locale)
       }}
     </r-btn>
   </div>
 </template>
-<script>
-export default {
-  name: 'year-tab',
-  props: {
-    modelValue: Number,
-    timezoneOffset: Number,
-    locale: String,
-    month: Number
-  },
-  emits: ['update:modelValue'],
-  mounted() {
-    let el = document.querySelector('.year-select')
-    if (el) {
-      el.scrollIntoView(true)
-    }
-  },
-  methods: {
-    emit(n) {
-      this.$emit('update:modelValue', n - this.modelValue)
-    }
-  }
+<script setup>
+import {onMounted} from 'vue'
+
+const props = defineProps({
+  modelValue: Number,
+  timezoneOffset: Number,
+  locale: String,
+  month: Number
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const emitValue = (n) => {
+  emit('update:modelValue', n - props.modelValue)
 }
+
+onMounted(() => {
+  let el = document.querySelector('.year-select')
+  if (el) {
+    el.scrollIntoView(true)
+  }
+})
 </script>
-<style>
+<style lang="scss">
 .calendar-year-tab {
   max-height: 300px;
 }
+
+.btn-year {
+  width: 25%;
+  background-color: var(--color-sheet-container);
+  border: 1px solid var(--color-border-low);
+}
 </style>

package/components/card/index.vue

@@ -2,69 +2,149 @@
   <component v-bind="att"
              :is="isClickable?route.tag:'div'"
              v-ripple="isClickable&&isRipple">
+    <!-- Default slot for card content
+    @example
+    <div class=pa-5>
+      <div class="title-1 color-one">title</div>
+      <div class="mt-5">body description</div>
+    </div>
+    -->
     <slot></slot>
   </component>
 </template>
 
-<script>
-import {roots} from '../../tools/rootable.js';
-import './style.scss';
-
-export default {
-  name: 'r-card',
-  mixins: [roots],
-  props: {
-    flat: Boolean,
-    hover: Boolean,
-    tile: Boolean,
-    outlined: Boolean,
-    isRipple: {
-      type: Boolean,
-      default: true
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    att() {
-      let res = {'class': this.genClass}
-      if (this.href) {
-        res['href'] = this.route.data.attrs.href
-      }
-
-      if (this.target) {
-        res['rel'] = 'noreferrer'
-        res['target'] = this.route.data.attrs.target
-      }
-      if (this.to) {
-        res['to'] = this.route.data.props.to
-      }
-      return res
-    },
-    genClass() {
-      let c = this.$r.prefix + 'card';
-      if (this.flat) {
-        c += ' card-flat';
-      } else {
-        c += ' card-sheet';
-      }
-      if (this.hover) {
-        c += ' card-hover';
-      }
-      if (this.outlined) {
-        c += ' card-outlined';
-      }
-      if (this.tile) {
-        c += ' card-tile';
-      }
-      if (this.isClickable) {
-        c += ' card-link';
-      }
-      return c;
-    },
+<script setup>
+import {computed, inject, useAttrs} from 'vue'
+import {useRootable} from '../../tools/root.js'
+
+const $r = inject('renusify').$r;
+
+const props = defineProps({
+  /**
+   * Removes elevation and background color
+   * @type {Boolean}
+   */
+  flat: Boolean,
+
+  /**
+   * Applies outlined border style
+   * @type {Boolean}
+   */
+  outlined: Boolean,
+
+  /**
+   * Enables ripple effect on click
+   * @type {Boolean}
+   * @default true
+   */
+  isRipple: {
+    type: Boolean,
+    default: true
   },
 
-};
+  /**
+   * Custom class for active state
+   * @type {String}
+   */
+  activeClass: String,
+
+  /**
+   * Disables the card
+   * @type {Boolean}
+   */
+  disabled: Boolean,
+
+  /**
+   * Custom class for exact active state
+   * @type {String}
+   */
+  exactActiveClass: String,
+
+  /**
+   * Applies link styling
+   * @type {Boolean}
+   */
+  link: Boolean,
+
+  /**
+   * URL for link card
+   * @type {String|Object}
+   */
+  href: [String, Object],
+
+  /**
+   * Route location for vue-router
+   * @type {String|Object}
+   */
+  to: [String, Object],
+
+  /**
+   * HTML tag to use for card element
+   * @type {String}
+   */
+  tag: String,
+
+  /**
+   * Target attribute for links
+   * @type {String}
+   */
+  target: String
+})
+
+const {route, isClickable} = useRootable(props, useAttrs())
+
+const att = computed(() => {
+  let res = {
+    'class': [$r.prefix + 'card', {
+      'card-sheet': !props.flat && !props.outlined,
+      'card-outlined': props.outlined
+    }]
+  }
+
+  if (props.href) {
+    res['href'] = route.value.data.attrs.href
+  }
+
+  if (props.target) {
+    res['rel'] = 'noreferrer'
+    res['target'] = route.value.data.attrs.target
+  }
+
+  if (props.to) {
+    res['to'] = route.value.data.props.to
+  }
+
+  return res
+})
 </script>
+<style lang="scss">
+@use "sass:map";
+@use "../../style" as *;
+
+
+.#{$prefix}card {
+  display: block;
+  position: relative;
+  max-width: 100%;
+  outline: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  transition: $primary-transition;
+  transition-property: box-shadow, opacity;
+  border-radius: map.get($borders, 'sm');
+
+  &.card-sheet {
+    background-color: var(--color-sheet-container);
+    border: 1px solid var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
+  }
+
+  &.card-outlined {
+    border: 1px solid var(--color-border-low);
+  }
+
+  @include states();
+}
+</style>

package/components/codeEditor/highlightCss.vue

@@ -12,44 +12,43 @@
   </div>
 </template>
 
-<script>
-import mixin from './mixin.js'
-import mixin_h from '../highlight/mixin.js'
-
-export default {
-  name: "highlight-css",
-  props: {
-    modelValue: String,
-  },
-  mixins: [mixin, mixin_h],
-  data() {
-    return {
-      d: this.modelValue,
-      code: "",
-    };
-  },
-  async created() {
-    if (this.modelValue) {
-      await this.build_code()
-    }
-  },
-  watch: {
-    modelValue: function () {
-      this.d = this.modelValue;
-    },
-    d: async function () {
-      await this.build_code()
-      this.$emit("update:modelValue", this.d);
-    },
-  },
-  methods: {
-    async build_code() {
-      this.code = await this.highlight(this.d, "css", true)
-    }
-  },
-};
-</script>
+<script setup>
+import {ref, watch, onMounted} from 'vue'
+import {useHighlight} from '../highlight/useHighlight.js'
+import {useCodeFormatter} from './useCodeFormatter.js'
+
+const props = defineProps({
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {highlight} = useHighlight()
+const {setTab} = useCodeFormatter()
 
-<style lang="scss">
+const d = ref(props.modelValue || '')
+const code = ref('')
 
-</style>
+const build_code = async () => {
+  if (d.value) {
+    code.value = await highlight(d.value, "css", true)
+  } else {
+    code.value = ''
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  d.value = newValue
+})
+
+watch(d, async (newValue) => {
+  await build_code()
+  emit('update:modelValue', newValue)
+}, {immediate: true})
+
+onMounted(async () => {
+  if (props.modelValue) {
+    await build_code()
+  }
+})
+</script>

package/components/codeEditor/highlightHtml.vue

@@ -12,70 +12,70 @@
   </div>
 </template>
 
-<script>
-import mixin from './mixin.js'
-import mixin_h from '../highlight/mixin.js'
+<script setup>
+import {ref, watch, onMounted} from 'vue'
+import {useHighlight} from '../highlight/useHighlight.js'
+import {useCodeFormatter} from './useCodeFormatter.js'
 
-export default {
-  name: "highlight-html",
-  props: {
-    modelValue: String,
-  },
-  mixins: [mixin, mixin_h],
-  data() {
-    return {
-      d: this.modelValue,
-      code: ""
-    };
-  },
-  async created() {
-    if (this.modelValue) {
-      await this.build_code()
-    }
-  },
-  watch: {
-    modelValue: function () {
-      this.d = this.modelValue;
-    },
-    d: async function () {
-      await this.build_code()
-      this.$emit("update:modelValue", this.d);
-    },
-  },
-  methods: {
-    async build_code() {
-      this.code = await this.highlight(this.d, "html", true)
-    },
-    setKey(event) {
-      if (event.key === "<") {
-        this.openTag = event.target.selectionEnd
-        return false
-      } else if (event.key === "/" && this.openTag !== null && this.openTag + 1 === event.target.selectionEnd) {
-        this.openTag = null
-        return false
-      } else if (event.key === ">" && this.openTag !== null) {
-        const end = event.target.selectionEnd;
-        const sel = event.target.value.substring(this.openTag + 1, end).trim().split(' ')[0];
-        const t = `></${sel}>`
-        event.preventDefault()
-        document.execCommand('insertText', false, t);
-        event.target.selectionEnd = end + 1;
-        this.openTag = null
-        return false
-      }
-      if (event.key === "=") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '=""');
-        event.target.selectionEnd = end + 2;
-        return false;
-      }
-      return this.setTab(event)
-    }
-  },
-};
-</script>
+const props = defineProps({
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {highlight} = useHighlight()
+const {setTab} = useCodeFormatter()
+
+const d = ref(props.modelValue || '')
+const code = ref('')
+const openTag = ref(null)
+const build_code = async () => {
+  if (d.value) {
+    code.value = await highlight(d.value, "html", true)
+  } else {
+    code.value = ''
+  }
+}
 
-<style lang="scss">
+const setKey = (event) => {
+  if (event.key === "<") {
+    openTag.value = event.target.selectionEnd
+    return false
+  } else if (event.key === "/" && openTag.value !== null && openTag.value + 1 === event.target.selectionEnd) {
+    openTag.value = null
+    return false
+  } else if (event.key === ">" && openTag.value !== null) {
+    const end = event.target.selectionEnd;
+    const sel = event.target.value.substring(openTag.value + 1, end).trim().split(' ')[0];
+    const t = `></${sel}>`
+    event.preventDefault()
+    document.execCommand('insertText', false, t);
+    event.target.selectionEnd = end + 1;
+    openTag.value = null
+    return false
+  }
+  if (event.key === "=") {
+    const end = event.target.selectionEnd;
+    event.preventDefault()
+    document.execCommand('insertText', false, '=""');
+    event.target.selectionEnd = end + 2;
+    return false;
+  }
+  return setTab(event)
+}
 
-</style>
+watch(() => props.modelValue, (newValue) => {
+  d.value = newValue
+})
+
+watch(d, async (newValue) => {
+  await build_code()
+  emit('update:modelValue', newValue)
+}, {immediate: true})
+
+onMounted(async () => {
+  if (props.modelValue) {
+    await build_code()
+  }
+})
+</script>